daterangepicker是一个很好的时间插件，下面代码引入的文件都必须全部引入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单日期控件</title> </head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="css/daterangepicker.css"/> <body> <div class="date_panel" style=" 200px;height: 50px;margin: 350px auto;"> <input class="date" type="text" id="sendMsgTime"> </div> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/moment.min.js"></script> <script type="text/javascript" src="js/daterangepicker.js"></script> <script type="text/javascript"> $(document).ready(function(){ var date = new Date(); var seperator1 = "-"; var seperator2 = ":"; var seperator3 = "/"; var month = date.getMonth() + 1; var strDate = date.getDate(); var hour=date.getHours(); var minute=date.getMinutes(); var second=date.getSeconds();//秒 if (month >= 1 && month <= 9) { month = "0" + month; } if (strDate >= 0 && strDate <= 9) { strDate = "0" + strDate; } if(hour<10){ hour='0'+hour; }else{ hour=hour; } if(minute<10){ minute='0'+minute; }else{ minute=minute; } if(second<10){ second='0'+second; }else{ second=second; } var currentdate = date.getFullYear() + seperator3 + month + seperator3 + strDate + ' ' + hour + ':' + minute + ':' + second; $('input#sendMsgTime').daterangepicker({ autoApply: true, singleDatePicker: true, showDropdowns: true, timePicker: true, timePicker24Hour: true, startDate: currentdate, //设置开始日期 也可以:moment().hours(0).minutes(0).seconds(0) opens: "center", drops: "up", locale: { format: "YYYY/MM/DD HH:mm:ss", applyLabel: '确定', cancelLabel: '取消', daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay: 1 }, }, function(start) {//选择日期后触发的回调函数 $('input#sendMsgTime').val(start.format('YYYY/MM/DD HH:mm:ss')); }); $('input#sendMsgTime').val(currentdate); }) </script> </body> </html>