In-depth analysis of jQuery date picker_jquery

1: By default, when the date input text box gets the page focus, the date picker component will open the calendar selection panel in an overlay . When the date input text box When the box loses focus or a date is selected, the calendar selection panel will be automatically closed
$(selector).datepicker([options]);
Simple example:

Copy code The code is as follows:

< style>
*{ font-size:12px; }



Please enter a date:
< input type="text" id="inputDate" />

Rendering:


2: Specify the picture button of the pop-up date picker
Need to add a response resource file:

Copy code The code is as follows:

$(document).ready(function() {
$("#datepicker" ).datepicker({
showOn: "button",
buttonImage: "Images/calendar.gif",
buttonImageOnly: true
});
});

Copy code The code is as follows:

请选择一个日期：

效果图：
  

3：显示带年、月份下拉列表和按钮面板的日期选择器

复制代码 代码如下:

请输入一个日期：

效果图：
  
4：同时显示多个月份的日期选择器

复制代码 代码如下:

Please select a date:

Rendering:


5: Some methods of date picker
dialog, isDisabled, hide, show, refresh, getDate, setDate

Copy code The code is as follows:

< ;/head>

Please enter a date:

Rendering:


6: Some events of the date picker
6.1 beforeShow event: This event is triggered before the date picker is displayed.
6.2 beforeShowDay event: This event will be triggered before each day is selected on the date picker function(date) {}
6.3 onChangeMonthYear: This event will be triggered when the date picker selects a new year or month function(year , month, inst);
6.4 onClose event: This event is triggered when the date picker control is closed. function(dataText, inst) {}
6.5 onSelect event: This event is triggered when the date picker selects a date. function(dataText, inst) {} //dataText is the string of the selected date, inst is the date picker instance

Copy code The code is as follows:

效果图：