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 相关文章推荐
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 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
用户的详细注册和判断
2006/10/09 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
PyQt5响应回车事件的方法
2019/06/25 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
如何在Django项目中引入静态文件
2019/07/26 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
老公给老婆的道歉信
2014/01/10 职场文书
单位实习证明怎么写
2014/01/17 职场文书
大四自我鉴定
2014/02/08 职场文书
安全生产月活动总结
2014/05/04 职场文书
食品安全承诺书
2014/05/22 职场文书
五年级学生评语大全
2014/12/26 职场文书
惊天动地观后感
2015/06/10 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS