bootstrap-datetimepicker使用

最新推荐文章于 2024-08-08 07:19:13 发布

zoepriselife316

最新推荐文章于 2024-08-08 07:19:13 发布

阅读量3.3k

点赞数

分类专栏： JavaScript Demo node electron 文章标签： bootstrap-datetimepicker使用

本文链接：https://blog.csdn.net/zoepriselife316/article/details/91388383

版权

JavaScript 同时被 3 个专栏收录

92 篇文章 1 订阅

订阅专栏

Demo

57 篇文章 0 订阅

订阅专栏

electron

18 篇文章 1 订阅

订阅专栏

使用的node.js开发，在其中使用了这个bootstrap-datetimepicker日期控件
包的下载方法1：
我是在本地下载了这个项目，然后把它放到静态文件中的，文档地址：
https://www.bootcss.com/p/bootstrap-datetimepicker/#project，直接下载zip的包
然后解压
解压后的文件
包的下载方法2：
也可以直接新建个文件夹，克隆这个项目，然后继续往下走

git clone git://github.com/smalot/bootstrap-datetimepicker.git

随后把我所需用的文件放到我的文件夹中
三个文件
还需要css的样式文件
css文件

分别放js和css文件

可能是我之前下载的控件不一样，需要依赖moment.js，
然后，在使用这个控件前需要下载moment.js

npm install moment.js --save

不过我现在的文件中是没有用到这个js的，所以这个步骤可以省略
随后，就可以在文件中引入了，但是一定要注意引入文件的顺序

<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">  
  <link rel="stylesheet" href="./css/bootstrap-datetimepicker.min.css">
  
  <script>let $ = window.$ = window.jQuery = require('jquery');</script>
  <script>
    require('../node_modules/bootstrap/dist/js/bootstrap.min.js');
  </script>
  <!-- <script src="../node_modules/moment/moment.js"></script> -->
  <script src="./js/bootstrap-datetimepicker.min.js"></script>
  <script src="./js/bootstrap-datetimepicker.zh-CN.js"></script>
</head>

这些文件在压缩包中都有，直接拷贝引入即可，最后这个文件zh-CN.js是在C:\bootstrap-datetimepicker-master\bootstrap-datetimepicker-master\js\locales文件夹中
然后写html

<div class="row">
              <div class='col-sm-6 col-md-5'>
                <div class="form-group">
                  <label for="startTime">生效时间</label>
                  <div class='input-group date' id='startTime'>
                    <input type='text' class="form-control" readonly="readonly" />
                    <span class="input-group-addon">
                      <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                  </div>
                </div>
              </div>
            
              <div class='col-sm-6 col-md-5 col-md-offset-1'>
                <div class="form-group">
                  <label for="endTime">失效时间</label>
                  <div class='input-group date' id='endTime'>
                    <input type='text' class="form-control" readonly="readonly" />
                    <span class="input-group-addon">
                      <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                  </div>
                </div>
              </div>
            </div>

js:

$('#startTime').datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    weekStart: 1,
    language: 'zh-CN',
    minView: 'hour',
    autoclose: true,
    todayHighlight: 1,
    todayBtn: true,
    forceParse:true,
    clearBtn: true,
    pickerPosition:'bottom-left',
}).on("changeDate", function(ev) {
    if (ev.date) {
        $('#endTime').datetimepicker('setStartDate', new Date(ev.date.valueOf()))
      
    } else {
        $('#endTime').datetimepicker('setStartDate', );
    }
});

$('#endTime').datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    weekStart: 1,
    language: 'zh-CN',
    minView: 'hour',
    autoclose: true,
    todayHighlight: 1,
    forceParse:true,
    pickerPosition:'bottom-left',
    clearBtn: true,
}).on("changeDate", function(ev) {
    if (ev.date) {
        $('#startTime').datetimepicker('setEndDate', new Date(ev.date.valueOf()))
      } else {
        $('#startTime').datetimepicker('setEndDate', new Date());
    }
});

效果：
时间控件
点击失效时间

可以选择日期，时间，到秒,然后可以清空clear