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对象的支持
Jul 25 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
Js 随机数产生6位数字
May 13 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 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数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python插入排序算法的实现代码
2013/11/21 Python
python放大图片和画方格实现算法
2018/03/30 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Numpy之random函数使用学习
2019/01/29 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
详解python statistics模块及函数用法
2019/10/27 Python
python将图片转base64,实现前端显示
2020/01/09 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
python实现人脸签到系统
2020/04/13 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
竞职演讲稿范文
2014/01/11 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
企业精神口号
2014/06/11 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
婚宴致辞
2015/07/28 职场文书
健康教育主题班会
2015/08/14 职场文书
pandas中pd.groupby()的用法详解
2022/06/16 Python