In-depth analysis of jQuery date picker

In-depth analysis of jQuery date picker_jquery

WBOY

Release： 2016-05-16 17:31:54

Original

1266 people have browsed it

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:

DatePicker Local

< 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:

DatePickerIcon

请选择一个日期：

效果图：

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

复制代码代码如下:

DatePicker Local

请输入一个日期：

效果图：

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

复制代码代码如下:

DatePickerButton

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:

DatePicker Dialog

< ;/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:

DatePicker Dialog

效果图：