日期控件用法：
<!DOCTYPE html>
<head><meta charset="utf-8"><title>日期</title><link rel="stylesheet" href="css/jquery-ui.css"><script src="js/jquery-3.3.1.min.js"></script><script src="js/jquery-ui.min.js"></script>
</head>
<body>
<input type="text" id="datepicker" style="width: 150px;height: 30px;text-align: center;">
<script>$("#datepicker").datepicker({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,onSelect: function (selectedDate) {console.log(selectedDate);}});
</script>
</body>效果展示：
日期控件和时间控件一起使用：
<!DOCTYPE html>
<head><meta charset="utf-8"><title>日期和时间</title><link rel="stylesheet" href="css/jquery-ui.css"><script src="js/jquery-3.3.1.min.js"></script><script src="js/jquery-ui.min.js"></script><script src="js/jquery-ui-timepicker-addon.min.js"></script><style>/*以下日期控件和时间控件一起使用时，需要用到的css样式*/.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }.ui-timepicker-div dl { text-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
