boostrap的时间插件daterangepicker.js之单日期,精确到秒
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="width: 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>