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的一个简单的脚本验证插件
Apr 05 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
vue组件name的作用小结
May 23 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 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/11/25 PHP
php 中英文语言转换类代码
2011/08/11 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
php实现微信公众号无限群发
2015/10/11 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
vue常用指令代码实例总结
2020/03/16 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
高级方案规划工程师岗位职责
2013/11/29 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
政府采购方案
2014/06/12 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
郭明义电影观后感
2015/06/08 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
详解TypeScript的基础类型
2022/02/18 Javascript