vue项目中引入vue-datepicker插件的详解


Posted in Javascript onMay 14, 2019

项目需求中有一个日期选择限制的功能点:今天之前不可选,周末不可选。

传统的input type='date无法做到,所以使用了这个插件来实现功能。

1.引入vue-datepicker loader:npm install vue-datepicker

2.引入moment loader:npm install moment --save

因为vue-datepicker是依赖vue和moment的,所以也应提前 引入moment;

3.在用到该插件的地方引入: import myDatepicker from 'vue-datepicker/vue-datepicker-es6.vue';

/* vue 2.0 */

页面中实现如下:

<template>
        <date-picker :date="startTime" :option="option" :limit="limit" id="select_date"></date-picker>
</template>
export default {
    components: {
      'date-picker': myDatepicker
    },
    data() {
      return {
        startTime: {
          time: ''
        },
        endTime: {
          time: ''
        },
        option: {
          type: 'day',
          week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
          month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
          format: 'YYYY-MM-DD',
          placeholder: 'when?',
          inputStyle: {
            'display': 'inline-block',
            'padding': '4px',
            'line-height': '17px',
            'font-size': '14px',
            'width': '190px',
            'border': '1px solid #ddd',
            // 'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
            'border-radius': '5px',
            'color': '#5F5F5F'
          },
          color: {
            header: '#ccc',
            headerText: '#f00'
          },
          buttons: {
            ok: 'Ok',
            cancel: 'Cancel'
          },
          overlayOpacity: 0.5, // 0.5 as default
          dismissible: true // as true as default
        },
        timeoption: {
          type: 'min',
          week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
          month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
          format: 'YYYY-MM-DD HH:mm'
         },
         multiOption: {
          type: 'multi-day',
          week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
          month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
          format:"YYYY-MM-DD HH:mm"
         },
        limit: [{
          type: 'weekday',
          available: [1, 2, 3, 4, 5]
        }, {
          type: 'fromto',
          from: getLocalTime(date),
          to: ''
        }]
      }
    }
  }

以上所述是小编给大家介绍的vue项目中引入vue-datepicker插件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
document.documentElement的一些使用技巧
Apr 18 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
JS实现数组去重的11种方法总结
Apr 04 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 #jQuery
JavaScript中this的全面解析及常见实例
May 14 #Javascript
jquery 验证用户名是否重复代码实例
May 14 #jQuery
记录vue项目中遇到的一点小问题
May 14 #Javascript
javascript中如何判断类型汇总
May 14 #Javascript
详解如何探测小程序返回到webview页面
May 14 #Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 #jQuery
You might like
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php中cookie的作用域
2008/03/27 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
js单词形式的运算符
2014/05/06 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
python Django模板的使用方法(图文)
2013/11/04 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
django之常用命令详解
2016/06/30 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
90条交通安全宣传标语
2019/10/12 职场文书