DatetimePicker

Dec 19, 2019 Eric Guo    1036

摘要：DatetimePicker与Vue2结合使用

#### 需要使用mounted，不可使用created ，由于生命周期的原因
#### 插件地址
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OceaniaTest</title>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="date/bootstrap-datetimepicker.min.css">
<script src="date/bootstrap-datetimepicker.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>
<body>

<div id="app">
    <input type="text"  class="form-control" date  style="background:#fff" placeholder="开始时间" v-model="oceaniaTime"/>
</div>

<script type="text/javascript">
$("[date]").
    datetimepicker();
    var vm = new Vue({
        el: '#app',
      data: {
        message: '<h1>菜鸟教程</h1>',
        oceaniaTime:'2019-12-19 17:35',
      },
     mounted:function(){
            $("[date]").datetimepicker();
        },
    });
</script>
</body>
</html>
    mounted: function () {
        this.autoTotalStatistics();
        $("[date]").datetimepicker({
            minView: "month",
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            todayBtn: 1,
            autoclose: 1,
        }).on('changeDate', function (ev) {
            //var startTime = $("#StartTime").val();
            //var endTime = $("#EndTime").val();
            //vm.searchStartTime = startTime;
            //vm.searchEndTime = endTime;
        });
    },
这里赋值可以使用JQ，避免在IE等特殊浏览器下无法正常显示时间的问题
评论