bootstrap-datetimepicker使用

使用的node.js開發，在其中使用了這個bootstrap-datetimepicker日期控件
包的下載方法1：
我是在本地下載了這個項目，而後把它放到靜態文件中的，文檔地址：
https://www.bootcss.com/p/bootstrap-datetimepicker/#project，直接下載zip的包
而後解壓

包的下載方法2：
也能夠直接新建個文件夾，克隆這個項目，而後繼續往下走css

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

隨後把我所需用的文件放到個人文件夾中

還須要css的樣式文件
html

分別放js和css文件node

多是我以前下載的控件不同，須要依賴moment.js，
而後，在使用這個控件前須要下載moment.jsjquery

npm install moment.js --save

不過我如今的文件中是沒有用到這個js的，因此這個步驟能夠省略
隨後，就能夠在文件中引入了，可是必定要注意引入文件的順序git

<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文件夾中
而後寫htmlgithub

<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:web

$('#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());
    }
});

效果：

點擊失效時間

能夠選擇日期，時間，到秒,而後能夠清空clearnpm

位置有點醜，還須要研究下，不過開心的是，他終於能夠成功運行了bootstrap

參考網址：下面的連接中前兩個對我做用最大
https://www.bootcss.com/p/bootstrap-datetimepicker/ 官方文檔指南
https://blog.csdn.net/farmerxiaoyi/article/details/74295470 以前一直中文實現不了，參考這個文檔就出來了
https://blog.csdn.net/qq_33368846/article/details/82223676
https://blog.csdn.net/u011127019/article/details/51725081
https://blog.csdn.net/hurtheart517/article/details/51474324svg

增長一條，在代碼執行完，須要清空控件，能夠直接這麼寫：
https://blog.csdn.net/rendeyishi/article/details/78125796，參考

$('#startTime').find("input").val("");

本文同步分享在博客「zoepriselife316」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。