<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap时间插件用法</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/datepicker3.css" /> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="js/bootstrap-datepicker.js"></script> <script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script> </head> <body> <div class="form-group"> <label>参加工作时间 <em>*</em></label> <input type="text" class="form-control" readonly="readonly" data-verify data-noempty="参加工作时间不能为空" name="starttime" id="starttime" placeholder="请选择参加工作时间"> </div> </body> </html> <script> $(document).ready(function() { $('.contact-box').each(function() { animationHover(this, 'pulse'); }); $('#starttime').datetimepicker({ language: 'zh-CN', startDate: new Date(), format: "yyyy-mm-dd hh:ii", autoclose: true, todayBtn: true, }).on('changeDate', function(ev) { var d = $('#starttime').val(); if(d != "") { $('#endtime').datetimepicker('setStartDate', $('#starttime').val()); } }); $('#endtime').datetimepicker({ language: 'zh-CN', startDate: new Date(), format: "yyyy-mm-dd hh:ii", autoclose: true, todayBtn: true, }).on('changeDate', function(ev) { var d = $('#endtime').val(); if(d != "") { $('#starttime').datetimepicker('setEndDate', d); } }); }); </script>
下载demo链接：https://i.cnblogs.com/Files.aspx