jquery UI DatePicker Time control usage and problem solving _jquery

In this paper, we share the use of DatePicker in jQueryUI, and solve the problem of failure in the joint use of UpdatePanel in asp.net.

The use of 1.jqueryUI DatePicker

--> first on the jQueryUI online according to your needs to download the appropriate style for your system theme , jQueryUI theme: Download address;

--> Downloaded files
jquery-ui-1.10.3.custom folders; Different topics differ in that they refer to different CSS
The default download style is as follows:

Other styles like the style I downloaded:

Other files are the same in the downloaded jQueryUI except for CSS folders

Steps to use DatePicker in a--> page
(1) Introduction of JQUERY-UI-1.10.3.CUSTOM.MIN.CSS style files
(2) Introduction of Jquery-1.9.1.js and Jquery-ui-1.10.3.custom.min.js script files; Note: introduce jquery files first

(3) My demand is to make a start time and an end time selection.

The code is as follows:

<script type= "Text/javascript" >
    $ (function () {
      $ ("#txtStartDate"). DatePicker ({
        dateformat: " Yy-mm-dd ",
        changemonth:true,
        onclose:function (selectedDate) {
          $ (" #txtEndDate "). DatePicker (" option ", "MinDate", selectedDate);
        }
      );
      $ ("#txtEndDate"). DatePicker ({
        dateformat: "Yy-mm-dd",
        changemonth:true,
        onclose:function ( SelectedDate) {
          $ ("#txtStartDate"). DatePicker ("option", "MaxDate", selectedDate);
        }
      );
      $ ("#ui-datepicker-div"). CSS ("Font-size", "12px"); Change size
    });
  </script>
 
 

Note:

(1) $ ("#ui-datepicker-div"). CSS ("Font-size", "12px"); Used to change the size of a date control
(2) DateFormat: "Yy-mm-dd", Change date format

(3) Date control is in English version, adding a script to make it Chinese

/* Chinese initialisation for the jQuery UI date picker plugin. *
/* Written by Cloudream (cloudream@gmail.com). */
JQuery (function ($) {
  $.datepicker.regional[' ZH-CN ') = {
    Closetext: ' Close ',
    prevtext: ' < last month ',
    nexttext: ' Next month > ',
    currenttext: ' Today ',
    monthnames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ',
        ' July ', ' August ', ' September ', ' October ', ' November ', ' December ',
    monthnamesshort: [' One ', ' two ', ' three ', ' four ', ' Five ', ' Six ',
        ' seven ', ' eight ', ' nine ', ' ten ', ' 11 ', ' 12 '],
    daynames: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '],
    Dayn Amesshort: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ',
    daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '],
    Weekhea Der: ' Zhou ',
    dateformat: ' Yy-mm-dd ',
    firstday:1,
    isrtl:false,
    showmonthafteryear:true,
    Yearsuffix: ' Year '
  };
  $.datepicker.setdefaults ($.datepicker.regional[' zh-cn ');
});

(4) for a number of datepicker properties and methods of detailed use, you can refer to its API documentation, said above in detail

-->, let's share a trick .

Use of $ ("[ID$=TXTASN]")

The defined ASP.net TextBox control ID is TXTASN, but $ ("#txtASN") does not get the DOM element of the textbox, because after viewing the source code, it is found that its control ID has changed, if the control is placed in a panel or in the master, The generated HTML control input ID changes, such as PNLBASEINFO_TXTASN
Workaround: $ ("[ID$=TXTASN]"), the meaning of which is to get the DOM element whose ID ends with TXTASN

--> Finish Effect

2. Solve the problem of UpdatePanel in conjunction with ASP.net
problem: after running, click "Query", page local refresh, find calendar selector does not come out
The problem of DatePicker failure after asynchronous return in the UpdatePanel of ASP.net
The DatePicker control can be displayed normally when the page is first loaded, but after clicking the query, the DatePicker is invalidated by the asynchronous return.
--> Analysis UpdatePanel
UpdatePanel is mainly used for local refresh in the application and avoids the postback of the whole page.
The core of UpdatePanel implementation of local refresh is Microsoftajaxwebform.js file, its local refresh process is to submit the page to the server (including ViewState), Executes the server-side code and asynchronously renders the HTML within the UpdatePanel.

--> Analysis jquery
because the text box elements in the UpdatePanel are rewritten after the local refresh, and the entire DOM tree is not reloaded, the jquery ready event does not trigger, so the text box element loses its original effect.
--> resolution Method
Place the initialization DatePicker code in Sys.WebForms.PageRequestManager.getInstance (). add_pageloaded (function (evt, args) {});

$ (function () {
  Sys.WebForms.PageRequestManager.getInstance (). add_pageloaded (function (evt, args) {
    $ () [id$ =txtstartdate] "). DatePicker ({
      dateformat:" Yy-mm-dd ",
      changemonth:true,
      onclose:function ( SelectedDate) {
        $ ("[Id$=txtenddate]"). DatePicker ("option", "MinDate", selectedDate);
      }
    );
    $ ("[Id$=txtenddate]"). DatePicker ({
      dateformat: "Yy-mm-dd",
      changemonth:true,
      onclose:function ( SelectedDate) {
        $ ("[Id$=txtstartdate]"). DatePicker ("option", "MaxDate", selectedDate);
      }
    );
    $ ("#ui-datepicker-div"). CSS ("Font-size", "14px"); Change size
  });

You can also refer to the following articles for study:

jquery UI DatePicker Time Control usage (basic version)

How to use the jquery UI DatePicker Time Control (enhanced version)

jquery UI DatePicker Time Control Usage (final version)

The above is the entire content of this article, I hope to help you learn.