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


Posted in Javascript onAugust 26, 2017

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

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

Javascript 相关文章推荐
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
详解Angular4 路由设置相关
Aug 26 #Javascript
浅谈Angular路由守卫
Aug 26 #Javascript
javascript实现文字无缝滚动效果
Aug 26 #Javascript
node实现定时发送邮件的示例代码
Aug 26 #Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 #jQuery
get  post jsonp三种数据交互形式实例详解
Aug 25 #Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 #Javascript
You might like
PHP截取中文字符串的问题
2006/07/12 PHP
PHP 柱状图实现代码
2009/12/04 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
Python的词法分析与语法分析
2013/05/18 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
函授本科毕业自我鉴定
2013/10/09 职场文书
教师党员思想汇报
2014/01/06 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
家长给老师的感谢信
2015/01/20 职场文书
检讨书大全
2015/01/27 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
雷锋观后感
2015/06/10 职场文书
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技
MySql分区类型及创建分区的方法
2022/04/13 MySQL