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开发之三数组对象实例介绍
Nov 12 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
node事件循环和process模块实例分析
Feb 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中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python批量按比例缩小图片脚本分享
2015/05/21 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
python 实现dict转json并保存文件
2019/12/05 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
档案室主任岗位职责
2014/02/12 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
怎样填写就业意向
2014/04/02 职场文书
产品设计开发计划书
2014/05/07 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
食堂卫生管理制度
2015/08/04 职场文书
校园之声广播稿
2015/08/18 职场文书