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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
JS中的一些常用的函数式编程术语
Jun 15 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
详解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中文本操作的类
2007/03/17 PHP
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
Python3读取zip文件信息的方法
2015/05/22 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
python入门教程之基本算术运算符
2020/11/13 Python
python中四舍五入的正确打开方式
2021/01/18 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
基督教婚礼主持词
2014/03/14 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
联谊活动总结
2014/08/28 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
论文评审意见
2015/06/05 职场文书
个人向公司借款协议书
2016/03/19 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python