JQuery DateTimePicker Date and Time plug-in example, jquery date plug-in

JQuery DateTimePicker Date and Time plug-in example, jquery date plug-in

JQuery UI is very powerful. The date selection plug-in Datepicker is a flexible configuration plug-in. We can customize its display mode, including date format, language, restriction selection date range, add related buttons, and other navigation.

The date selection plug-in is a flexible configuration plug-in that you can define its display method, including date format, language, restriction selection date range, add related buttons, and other navigation.

Document and:

1. http://xiazai.jb51.net/201701/yuanma/jQuery-Timepicker-Addon_jb51.rar of jQuery-Timepicker-Addon

2. jQuery-Timepicker-Addon document address: http://trentrichardson.com/examples/timepicker/

3, JQuery-UI: http://jqueryui.com/themeroller/

4. JQuery:

Jquery (1.32-1.11.1-2.1.1) http://www.bkjia.com/jiaoben/58.html

Jquery 3.0 http://www.bkjia.com/codes/35629.html

Let's take a look at it first:

Introduce js files:

<script src="js/jquery-3.1.1.min.js"></script><script src="jquery-ui-1.12.1/jquery-ui.min.js"></script><link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" /><script src="jQuery-Timepicker/jquery-ui-timepicker-addon.min.js"></script><script type="text/javascript" src="jQuery-Timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script><link href="jQuery-Timepicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />

1. Default effect:

Key code:

$("#defult").datetimepicker();

2. Control to hour, minute, and second:

Key code:

$ ('# Date '). prop ("readonly", true ). datetimepicker ({timeText: 'time', hourText: 'hourly ', minuteText: 'minetext: 'Min', secondText: 'second', currentText: 'right', closeText: 'complete ', showSecond: true, // display the second timeFormat: 'hh: mm: ss' // format time });

3. Control to year, month, and day

Key code:

    $("#date_yy-mm-dd").prop("readonly", true).datepicker({      changeMonth: true,      dateFormat: "yy-mm-dd",      onClose: function(selectedDate) {      }     }); 

4. start and end Interval

Key code:

  $("#date_start").prop("readonly", true).datepicker({      changeMonth: true,      dateFormat: "yy-mm-dd",      onClose: function(selectedDate) {       $("#date_end").datepicker("option", "minDate", selectedDate);      }     });     $("#date_end").prop("readonly", true).datepicker({      changeMonth: true,      dateFormat: "yy-mm-dd",      onClose: function(selectedDate) {       $("#date_start").datepicker("option", "maxDate", selectedDate);       $("#date_end").val($(this).val());      }     });

5. Time, minute, and second options:

 

Key code:

$ ('# Date_hhmmss '). prop ("readonly", true ). timepicker ({timeText: 'time', hourText: 'hour', minuteText: 'minetext: 'Min', secondText: 'second', currentText: 'right', closeText: 'complete ', showSecond: true, // display the second timeFormat: 'hh: mm: ss' // format time });

6. start and end interval (the second method ):

 

Key code:

$. Timepicker. dateRange ($ ("# date_start_1"), $ ("# date_end_1"), {minInterval: (1000*60*60*24*1 ), // interval maxInterval: (1000*60*60*24*1), // 1 days interval start :{}, // start picker options end: {}// end picker options });});

Complete code:

<! DOCTYPE html> 
The: http://xiazai.jb51.net/201701/yuanma/Test_Datepicker_jb51.rar of the Code
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.