Jquery-ui Date Time Control implementation

Date controls and time controls are standalone controls, datetime controls are imported at the same time as the date control and JS of the time control, and then the date control is added to the time control to display the parameters without importing the time control JS. Date control function sets the time control to be wrapped incorrectly

Date Control official website website: http://jqueryui.com/

Date control JS:jquery-ui.js

corresponding functions and default property settings: Function Datepicker()

Time Control official website website: http://plugins.jquery.com/jt.timepicker/

Time Control Js:jquery-ui-timepicker-addon.js

corresponding functions and default property settings: Function timepicker()

$ (function () {/** * Sets the time format for time fields TODO need to consider optimizing selectors. Exclude hidden type *//Date with time (to avoid being overwritten in front of the Hour)//$ (' input[id$=datetime],[id$=datetime],[id$=datetime],[id$=datetime],[ Class$=datetime]. DateTimePicker ({showsecond:true,hourgrid:4,minutegrid:10, TimeFormat: ' Hh:mm:ss '}); $ (' input[ id$=datetime],[id$=datetime],[id$=datetime],[id$=datetime],[class$=datetime],[class$=datetime],[class$= Datetime],[class$=datetime]. DateTimePicker ({daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' VI '],//set the week name of the control to show FirstDay: 1,//Set the day of the week in the first column, Sunday is 0. Monday is 1, and so on. Changemonth:true,//Change month drop-down box changeyear:true,//Change year drop-down box showsecond:true,//show milliseconds monthnamesshort:[' January ', ' February ', ' March ', ' April ' , ' May ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December '],timeformat: ' hh:mm:ss ',//Set time format dateformat: ' Yy-mm-dd ',// Set Date format hourgrid:4,//show time ruler minutegrid:10,secondgrid:10});//Date $ (' input[id$=date],[id$=date],[class$=date],[class$ =date]. DatePicker ({daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' VI '],//set the control's week name to show Firstday:1,//Set the day of the week in the first column, Sunday for 0, week One is 1, and so on. ChangemOnth:true,//Change month dropdown box changeyear:true,//Change year dropdown box monthnamesshort:[' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ', ' October ' ', ' November ', ' December '],dateformat: ' YY-MM-DD '//Set date format});//time display seconds set format $ (' input[id$=time],[id$=time],[class$=time] '). Timepicker ({showsecond:true,timeformat: ' Hh:mm:ss ', Hstep: ' 2 ', hourgrid:4,minutegrid:10});});

Display effects such as the following:

Date Time Control

Date control

Time Control:

Jquery-ui Date Time Control implementation