How to call Ext js DatePicker in the input of common HTML

In recent projects, the Ext js control library is used in a unified manner, and I have just been in touch with Ext js. Most of the time I have to look at the API documentation, in the past few days, we have required the use of common HTML input to call the DatePicker control of Ext js. I checked it online and found that there is no good solution. I wrote one by myself, the main idea is to call the show event of Ext js DatePicker In The onclick event of input, handle some display and its events by yourself, and paste the code below, which is quite urgent to write, it can be optimized in many places.

 

Code

ExtendDatePicker = function (target ){
Var datePickerContainer = null; // DatePicker container
Var datePickerContainerID = null; // DatePickerID
Var isCreate = false; // whether a DatePicker has been created
Var datePicker = null; // datePicker object
Var target = target; // value assignment object
Var divElement; // layer object

Ext. get (target). on ("click", showDatePicker );
DatePickerContainerID = target + "_ datePickerContainer_extjs ";

Function showDatePicker (){
If (datePicker === null ){
If (datePickerContainer === null ){
GetContainer ();

}

DatePicker = new Ext. DatePicker ({
ShowToday: false
});

DivElement = Ext. get (datePickerContainerID );
DivElement. applyStyles ("position: absolute ");
DivElement. applyStyles ("z-index: 99999 ");
DatePicker. render (datePickerContainerID );
DatePicker. on ('select', selectEvent );
}

SetPosition ();

If (Ext. get (target). getAttribute ("value ")! = ""){
Try {
DatePicker. setValue (Date. parseDate (Ext. get (target). getValue (), "m/d/Y "));
}
Catch (err ){
Alert ("invalid date format ");
}
}

Ext. getDoc (). on ("mousedown", closeEvent );
Ext. EventManager. on (window, 'resize', setPosition );
DatePicker. show ();
}

Function closeEvent (doc, sender ){
If (sender = undefined
| Sender = null
|! (Sender. getAttribute ("id") = target
| Sender === datePickerContainer
| FindChild (datePickerContainer, sender ))){
DatePicker. hide ();
Ext. getDoc (). un ("mousedown", closeEvent );
Ext. EventManager. un (window, 'resize', setPosition );
}
}

Function selectEvent (sender, e ){
Document. getElementById (target). value = e. format ("m/d/Y ");
DatePicker. hide ();
}

Function getContainer (){
DatePickerContainer = document. createElement ("div ");
Document. body. appendChild (datePickerContainer );

DatePickerContainer. setAttribute ("id", datePickerContainerID );
DatePickerContainer. setAttribute ("name", datePickerContainerID );
}

Function setPosition (){
Var targetElement = Ext. get (target );
If (Ext. getBody (). getHeight ()-targetElement. getHeight ()-targetElement. getY () <165 ){
DivElement. setY (targetElement. getY ()-165 );
}
Else {
DivElement. setY (targetElement. getY () + targetElement. getHeight ());
}

DivElement. setX (targetElement. getX ());
DivElement. applyStyles ("width: 9px"); // you can specify the layer width.
}
}

Function findChild (docElement, sourceElement ){
If (docElement === sourceElement ){
Return true;
}
Else {
If (docElement. childNodes. length> 0 ){
For (var I = 0; I <docElement. childNodes. length; I ++ ){
If (findChild (docElement. childNodes [I], sourceElement) = true ){
Return true;
}
}
}
}

Return false;
}