vue与bootstrap实现时间选择器的示例代码

 更新时间:2017年08月26日 09:51:12   转载 作者:肖尔_  
本篇文章主要介绍了vue与bootstrap实现时间选择器的示例代码,非常具有实用价值,需要的朋友可以参考下

一、下载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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 深入理解vue.js双向绑定的实现原理

    深入理解vue.js双向绑定的实现原理

    vue.js是MVVM结构的,同类的还有AngularJs;至于MVC、MVP、MVVM的比较网上已经有很多了,这样不再重复。这篇文章将给大家深入的介绍vue.js双向绑定的实现原理,有需要的朋友们可以参考借鉴,下面跟着小编一起来看看吧。
    2016-12-12
  • 代码分析vue中如何配置less

    代码分析vue中如何配置less

    在本篇文章中,我们给大家详细讲述了vue中如何配置less的详细代码和步骤,有需要的朋友跟着学习下。
    2018-09-09
  • 利用Vue.js实现求职在线之职位查询功能

    利用Vue.js实现求职在线之职位查询功能

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。下面这篇文章主要给大家介绍了关于利用Vue.js实现求职在线之职位查询功能的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-07-07
  • VUE实现可随意拖动的弹窗组件

    VUE实现可随意拖动的弹窗组件

    今天小编就为大家分享一篇VUE实现可随意拖动的弹窗组件,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue中组件通信的八种方式(值得收藏!)

    vue中组件通信的八种方式(值得收藏!)

    这篇文章主要给大家总结介绍了关于vue中八种组件通信方式的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方

    这篇文章主要介绍了vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • vue实现消息的无缝滚动效果的示例代码

    vue实现消息的无缝滚动效果的示例代码

    本篇文章主要介绍了vue实现消息的无缝滚动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue中$refs的用法及作用详解

    vue中$refs的用法及作用详解

    这篇文章主要介绍了vue中$refs的用法及作用详解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • Vue精简版风格概述

    Vue精简版风格概述

    本篇文章给大家讲解了一下Vue精简版风格的相关知识点内容以及分享了实例代码,有兴趣的朋友参考下。
    2018-01-01
  • 解决vue-cli webpack打包开启Gzip 报错问题

    解决vue-cli webpack打包开启Gzip 报错问题

    这篇文章主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07

最新评论