日期控件用法：
！ doctypehtmlheadmetacharset=' utf-8 ' title日期/titlelinkrel=' style sheet ' href=' CSS/jquery-ui.CSS ' script src=headbodyinputtype=' text ' id=' date picker ' style=' width 330 height : 30px； 文本- Align :中心；' script$(#datepicker ).datepicker )、changemonth:true、changeYear: true、clearText: )清除、clear status cle prevText: '上个月'，prevStatus: '上个月'，prevBigText: '，prevBigStatus: '上个月'，nextStatus: '下个月' 当前文本： '今天'， currentStatus: '显示图书的“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十一月”、“十二月” monthStatus:“选月”、yearStatus:“选年”、weekHeader:“周”、weekStatus:“年”内的频率“星期二”、“星期三”、“星期三” “星期二”、“星期三”、“星期四”、“星期五”、“星期六”、“Daynana”(六)、“dayStatus:”将DD设置为一周的开始)，dateStatus: )为MD innning isRTL: false，on select : function (选择的数据) console.log ) selecteddate； }； )； /script/body 效果展示：
日期控件和时间控件一起使用：
！ doctypehtmlheadmetacharset=' utf-8 ' title日期和时间/titlelinkrel=' style sheet ' href=' CSS/jquery-ui.CSS ' script src SSS scriptscriptsrc=' js/jquery-ui-time picker-addon.min.js '/ss '使用的css样式*.ui-time picker-div.ui-widggid } .ui-timepicker-div dl { te
xt-align: left; } .ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; } .ui-timepicker-div dl dd { margin: 0 10px 10px 40%; } .ui-timepicker-div td { font-size: 90%; } .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; } .ui-timepicker-div .ui_tpicker_unit_hide{ display: none; } .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; } .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; } .ui-timepicker-rtl{ direction: rtl; } .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; } .ui-timepicker-rtl dl dt{ float: right; clear: right; } .ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; } /* Shortened version style */ .ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; } .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, .ui-timepicker-div.ui-timepicker-oneLine dt { display: none; } .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; } .ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; } .ui-timepicker-div.ui-timepicker-oneLine dl dd, .ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; } .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before, .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; } .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before, .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; } .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide, .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; } </style></head><body><input type="text" id="datepicker1" style="width: 150px;height: 30px;text-align: center;"><script> $('#datepicker1').datetimepicker({ changeMonth: true, changeYear: true, clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', closeStatus: '不改变当前选择', prevText: '<上月', prevStatus: '显示上月', prevBigText: '<<', prevBigStatus: '显示上一年', nextText: '下月>', nextStatus: '显示下月', nextBigText: '>>', nextBigStatus: '显示下一年', currentText: '今天', currentStatus: '显示本月', monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthStatus: '选择月份', yearStatus: '选择年份', weekHeader: '周', weekStatus: '年内周次', dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'], dayStatus: '设置 DD 为一周起始', dateStatus: '选择 m月 d日, DD', dateFormat: 'yy-mm-dd', firstDay: 1, initStatus: '请选择日期', isRTL: false, timeText: '时间', hourText: '小时', minuteText: '分钟', onSelect: function (selectedDateTime) { console.log(selectedDateTime); } });</script></body>效果展示：
参考：
https://stackoverflow.com/questions/60716841/set-date-and-time-in-jquery-datetimepicker-based-on-another-datetimepicker
https://trentrichardson.com/examples/timepicker/
https://www.cnblogs.com/gccbuaa/p/6921596.html
完整示例下载：
链接：https://pan.baidu.com/s/1iq_F8onl_Hk4ztwWs5ZKrA
提取码：lian