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

Source: Internet
Author: User
Tags gety

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.



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;



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.