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>

 

posted @ 2019-10-18 14:50  zzwlong  阅读(1927)  评论(0)  编辑  收藏  举报