Home >Web Front-end >JS Tutorial >The use and problem solving of jquery UI Datepicker time control

The use and problem solving of jquery UI Datepicker time control

PHPzforward: 2016-05-16 15:03:122497browse

The example in this article shares the use of datepicker in jqueryUI to solve the failure problem when used in conjunction with UpdatePanel in asp.net.

1. How to use the datepicker of jqueryUI

--> First, according to your needs on the jqueryUI official website Download the style that suits your system theme , jqueryUI theme: Download address (http://jqueryui.com/themeroller/#themeGallery)

The use and problem solving of jquery UI Datepicker time control

-->Downloaded files
jquery-ui-1.10.3.custom folder; the difference between different themes is that they reference different css
Downloaded by default The styles are as follows:

The use and problem solving of jquery UI Datepicker time control

Other styles, such as the style I downloaded:

The use and problem solving of jquery UI Datepicker time control

The downloaded jqueryUI is different except for the css folder. , other files are the same

--> Steps to use datePicker in the page
(1) Introduce jquery-ui-1.10.3.custom .min.css style file
(2) Introduce jquery-1.9.1.js and jquery-ui-1.10.3.custom.min.js script files; Note: First introduce jquery file

( 3) My need 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-p").css("font-size", "12px"); //改变大小
    });
  </script>
</head>
<body>
  <label for="from">开始时间：</label>
  <input type="text" id="txtStartDate" name="from"/>
  <label for="to">结束时间：</label>
  <input type="text" id="txtEndDate" name="to"/>
</body>

Note:

(1)$("#ui-datepicker-p").css("font-size", " 12px"); Used to change the size of the date control
(2) dateFormat: "yy-mm-dd", change the date format

(3) The date control is in English version, add a script to change it Chinese

/* Chinese initialisation for the jQuery UI date picker plugin. */
/* Written by Cloudream (cloudream@gmail.com). */
jQuery(function ($) {
  $.datepicker.regional[&#39;zh-CN&#39;] = {
    closeText: &#39;关闭&#39;,
    prevText: &#39;<上月&#39;,
    nextText: &#39;下月>&#39;,
    currentText: &#39;今天&#39;,
    monthNames: [&#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;,
        &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;],
    monthNamesShort: [&#39;一&#39;, &#39;二&#39;, &#39;三&#39;, &#39;四&#39;, &#39;五&#39;, &#39;六&#39;,
        &#39;七&#39;, &#39;八&#39;, &#39;九&#39;, &#39;十&#39;, &#39;十一&#39;, &#39;十二&#39;],
    dayNames: [&#39;星期日&#39;, &#39;星期一&#39;, &#39;星期二&#39;, &#39;星期三&#39;, &#39;星期四&#39;, &#39;星期五&#39;, &#39;星期六&#39;],
    dayNamesShort: [&#39;周日&#39;, &#39;周一&#39;, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;],
    dayNamesMin: [&#39;日&#39;, &#39;一&#39;, &#39;二&#39;, &#39;三&#39;, &#39;四&#39;, &#39;五&#39;, &#39;六&#39;],
    weekHeader: &#39;周&#39;,
    dateFormat: &#39;yy-mm-dd&#39;,
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: &#39;年&#39;
  };
  $.datepicker.setDefaults($.datepicker.regional[&#39;zh-CN&#39;]);
});

(4) For detailed usage of some datepicker attributes and methods, you can refer to its API documentation, which is very detailed

--> ; Share another trick

Use of $("[id$=txtASN]")

The defined textbox control id of asp.net is txtASN, but $("#txtASN") cannot get the dom element of the textbox. The reason is that after checking the source code, it is found that its control ID has changed. If the control is placed in the panel or the master, the generated html control input ID is Will change, such as pnlBaseInfo_txtASN
Solution: $("[id$=txtASN]"), the meaning is to get the dom element whose id ends with txtASN

-- >Complete effect

The use and problem solving of jquery UI Datepicker time control

2. Solve the failure problem when used in conjunction with UpdatePanel in asp.net
Problem: After running, click "Query", the page is partially refreshed, and it is found that the calendar selector does not come out
DatePicker fails after asynchronous postback in asp.net's UpdatePanel Problem
The DatePicker control can be displayed normally when the page is first loaded, but after clicking the query, the DatePicker fails due to asynchronous postback.
--> Analysis of UpdatePanel
UpdatePanel is mainly used for partial refresh in the application to avoid Postback of the entire page.
The core of UpdatePanel's partial refresh lies in the MicrosoftAjaxWebForm.js file. Its partial refresh process is to submit the page to the server (including ViewState). After executing the server code, the HTML in the UpdatePanel will be asynchronously re-rendered.

--> Analysis of jQuery
Because after the UpdatePanel is partially refreshed, the text box element in it is rewritten, and at this time the entire DOM tree is not There is no reloading, so jQuery's ready event is not triggered, so the text box element loses its original special effects.
-->Solution
Put the code to initialize DatePicker 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-p").css("font-size", "14px"); //改变大小
  });
});

You can also refer to the following articles to learn:

Usage of jquery UI Datepicker time control (1)

Usage of jquery UI Datepicker time control (2)

Usage of jquery UI Datepicker time control (3)

The above is the entire content of this article, I hope it will be helpful to everyone's learning.

Statement：

This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Simple use of Bootstrap modal dialog_javascript skillsNext article：Simple use of Bootstrap modal dialog_javascript skills

See more

The use and problem solving of jquery UI Datepicker time control

Related articles