美文网首页前端Vue专辑Vue.js开发技巧Vue.js专区
vue与bootstrap学习笔记(2)|时间选择器

vue与bootstrap学习笔记(2)|时间选择器

作者: 86e682d0d2f1 | 来源:发表于2017-08-18 11:04 被阅读271次

    一、下载bootstrap-datetimepicker时间选择器js,css文件。

    1. github地址:bootstrap-datetimepicker

    2. 官方网站地址:官网bootstrap-datetimepicker地址,有具体的例子与解释

    二、在vue项目文件中引入

    import './assets/css/bootstrap.min.css'
    import "./assets/css/bootstrap-datetimepicker.min.css"
    import './assets/js/bootstrap.min'
    import './assets/js/bootstrap-datetimepicker.min.js'
    

    三、具体代码如下:

    <template>
    <div class="container">
        <form action="" class="form-horizontal"  role="form">
            <fieldset>
                <legend>Test</legend>
                <div class="form-group">
                    <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
                    <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                        <input class="form-control" size="16" type="text" value="" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input1" value="" /><br/>
                </div>
            </fieldset>
        </form>
    </div>
    </template>
    
    <script>
    
      export default {
        name: 'time',
        data () {
          return {
            time: ''
          }
        },
        methods: {
            dateDefault(){
                var d, s;
                var self = this;        
                d = new Date();
                s = d.getFullYear() + "-";             //取年份
                s = s + (d.getMonth() + 1) + "-";      //取月份,date生成的月份为0-11
                s += d.getDate() + " ";                //取日期
                s += d.getHours() + ":";               //取小时
                s += d.getMinutes() + ":";             //取分
                s += d.getSeconds();                   //取秒
                self.time = s;
                $('.form_datetime').datetimepicker({
                    language: 'zh-CN',
                   format: 'yyyy-mm-dd hh:ii:ss',
                   //startDate: s,       默认开始时间
                    weekStart: 0,        //一周从那一天开始,默认值为:0,范围:0-6
                    todayBtn:  1,        //默认值:false,为true时,底部显示today,不选中,为linked时当天日期被选中
                    autoclose: 1,        //选择一个日期后是否立即关闭此选择框
                    todayHighlight: 1,   //高亮当前日期
                    startView: 2,         // 日期时间选择器打开之后首先显示的视图,默认值为:2,0:hour,1:day,2:mouth,3:year,4:decade
                    forceParse: 0,        //强制解析文本框的值
                    showMeridian: 1
                 });
                $('#form_datetime').datetimepicker()
                     .on('hide', function (ev) {
                      var value = $("#form_datetime").val();
                     self.time = value;
                   });
    
            }
        },
        mounted() {
            //必须在组件渲染之后调用
            this.dateDefault();
        }
      }
    </script>
    

    相关文章

      网友评论

      • 629650b9d84f:这样根本就没有获取到选中的值,获取的是最开水获取的当前时间,浪费时间

      本文标题:vue与bootstrap学习笔记(2)|时间选择器

      本文链接:https://www.haomeiwen.com/subject/vxnorxtx.html