JQuery DateTimePicker Date and Time Plugin Example

jQuery ui is very powerful, the date Select Plugin DatePicker is a flexible plugin, we can customize its display, including date format, language, restriction selection date range, add related buttons, and other navigation.

Date Select Plugin is a configured flexible plugin, you can define its display mode, including date format, language, restriction selection date range, add related buttons, other navigation, etc.

documentation and Download address:

1, jQuery-TimePicker-Add address: http://xiazai.jb51.net/201701/yuanma/jQuery-timePicker-addon_jb51.rar

2, jQuery -TimePicker-addon’s documentation address: http://trentrichardson.com/examples/timepicker/

3, jQuery-ui download address: http://jqueryui.com/themeroller/

4, jQuery download address:


jQuery (1.32-1.11.1-2.1.1) https://www.jb51.net/jiaoben/58.html


jQuery 3.0 https://www.jb51.net/codes/35629.html

Next, the renderings:

introduced JS files:

          1, the default effect:   

$ (“# Defult”). DateTimePicker ();

jQuery DateTimePicker 日期和时间插件示例

2, control to time:

   
$ (‘# date’). Prop (“Readonly”, True) .datetimePicker ({Timetext: ‘Time’, HourText: ‘Hours’, MinuteText: ‘Second’, CurrentText: ‘Now’, Clostext: ‘Finish’, Showsecond: True , // Display Second TimeFormat: ‘HH: mm: SS’ // Format Time});

3, control to the year of the day

jQuery DateTimePicker 日期和时间插件示例

Key code:

$ (“# Date_YY-MM-DD”). Prop (“Readonly”, true) .datepicker {CHANGEMONTH: TRUE, DATEFORMAT: “YY-MM-DD”, OnClose: function (SELECTEDDATE) {}};
  4, start end interval  

Key generationCode:

$ (“# Date_Start”). PROP (“Readonly”, true) .datepicker ({ChangeMonth: True, DateFormat: “YY-MM-DD” OnClose: Function (SELECTEDDATE) {$ (“# Date_end”). DatePicker (“Option”, “Mindate”; $ (“# Date_end”). Prop (“Readonly”, true). DatePicker ({CHANGEMONTH: TRUE, DATEMAT: “YY-MM-DD”, OnClose: function (“# Date_Start”). DatePicker (“Option”, “Maxdate”, SELECTEDDATE); $ (“# Date_end “) .VAL ($ (this) .val ());}}); jQuery DateTimePicker 日期和时间插件示例

5, time division selection:
   

$ (‘# DATE_HHMMSS’). PROP (“Readonly”, true) .timePicker ({Timetext: ‘Time’, HOURTEXT : ‘Hours’, MinuteText: ‘Minute’, SecondText: ‘Second’,CurrentText: ‘Today’, Clostext: ‘Complete’, showsecond: true, // Display Second TimeFormat: ‘HH: mm: SS’ // Format Time});

jQuery DateTimePicker 日期和时间插件示例

6, start ending section (second way): jQuery DateTimePicker 日期和时间插件示例

Key code:
   $. TimePicker.DateRange ($ ("# Date_Start_1"), $ ("# Date_end_1"), {MinInterval: (1000 * 60 * 60 * 24 * 1), // Interval Time MaxInterval : (1000 * 60 * 60 * 24 * 1), // 1 days interval time START: {}, // start Picker Options end: {} // end picker options});}; 

jQuery DateTimePicker 日期和时间插件示例

   

(function ($) {$ (Function () {$ .datePicker.Regional “‘zh-cn’] = {ChangeMonth: true, ChangeYear: True, Cleartext: ‘Clear’, ClearsTatus: ‘Clear Selected Date’, Closetext: ‘Close’, CloseStatus: ‘does not change the current selection’, prevtext: ‘

‘, nextstatus:’ Show next month ‘, nextbigText:’ >> ‘, NextBigStatus:’ shows the next year ‘, CurrentText:’ Today ‘, CurrentStatus:’ Show this month ‘, Monthnames: [‘ Jan ‘, ‘February’, March ‘,’ April ‘, March’, ‘June’, July ‘,’ August ‘,’ September ‘,’ October ‘,’ November ‘ , ‘December’], MONTHNAMESSHORT: [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ’10’ , ’11’, ’12’], MonthStatus: ‘Choosing Month’, YearsTatus: ‘Choosing New Year’, WeekHeader: ‘Week’, Weekstatus: ‘The year, DAYNAMES: [‘ Sunday ‘,’ Monday ‘, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’], DayNamesshort: [‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’ , ‘Saturday’], daynamesmin: [‘Day’, ‘One’, ‘2’, ‘Three’, ‘Four’, ‘Five’, ‘Six’],DayStatus: ‘Setting DD for a week start’, DateStatus: ‘Select M Month D Day, DD’, DateFormat: ‘YY-MM-DD’, FirstDay: 1, INITSTATUS: ‘Please select Date’, isrtl: false}; }); $ (“() {$ .datePicker.setdefaults ($. datepicker.regional [‘zh-cn’]); $ (” # defult “). DateTimePicker (); $ (‘# Date’). Prop (“Readonly”, True) .datetimePicker ({Timetext: ‘Time’, HourText: ‘Hours’, MinuteText: ‘Second’, CurrentText: ‘Now’, Clostext: ‘Finish’, Showsecond: True , // Display Second TimeFormat: ‘hh: mm: SS’ // Format Time}); $ (“# DATE_YY-MM-DD”). Prop (“Readonly”, True) .datePicker ({ChangeMonth: True, DateFormat: “YY-MM-DD”, OnClose: function (SELECTEDDATE) {}}); $ (“# Date_Start”). Prop (“Readonly”, TRUE) .datepicker ({ChangeMonth: True, DateFormat: “YY-mm-DD”, onclose: function (“# Date_end”). DatePicker (“Option”, “Mindate”, SELECTEDDATE);}} ); $ (“# Date_end”). Prop (“Readonly”, True), DateFormat: “YY-MM-DD”, OnClose: function (SELECTEDDATE) {$ (“# Date_Start”) .datePicker (“Option”, “Option”; $ (“# Date_end”). VAL ($ (this) .val ());}}); $ (‘# DATE_HHMMS’). Prop (“Readonly “, true) .timepicker ({Timetext: ‘time’, hourtext: ‘hour’, minutetext: ‘second’, CurrentText: ‘Today’, CloseText: ‘Complete’, showsecond: true, // Show second timeFormat: ‘hh: mm: ss’ // format time}); $ .timepicker.daterange ($ (“# datE_START_1 “), $ (” # DATE_END_1 “), {MinInterval: (1000 * 60 * 60 * 24 * 1), // Interval Time MaxInterval: (1000 * 60 * 60 * 24 * 1), // 1 DAYS interval time interval START: {}, // start picker options end: {} // end picker options});};});}; jQuery DateTimePicker 日期和时间插件示例

Default: jQuery DateTimePicker 日期和时间插件示例

Controls to time:

:
   Start ending section: 
~

 Start ending section (second way of writing):   ~        Code Download address: http://xiazai.jb51.net/201701/yuanma/test_datepicker_jb51.rar   The above is all of this article, I hope to help everyone, and I hope everyone will support Tumi Cloud.                      
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment