首页 > Web开发 > 详细

boostrap的时间插件daterangepicker.js之单日期,精确到秒

时间:2019-10-18 16:02:26      阅读:76      评论:0      收藏:0      [点我收藏+]

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>

 

boostrap的时间插件daterangepicker.js之单日期,精确到秒

原文:https://www.cnblogs.com/zzwlong/p/11698255.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!