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 相关文章推荐
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
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
十天学会php之第一天
2006/10/09 PHP
php开启openssl的方法
2014/05/15 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
php自动加载方式集合
2016/04/04 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
菜单效果
2006/10/14 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
python实现绘制树枝简单示例
2014/07/24 Python
python中尾递归用法实例详解
2015/04/28 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
Python如何发布程序的详细教程
2018/10/09 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
python用700行代码实现http客户端
2021/01/14 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
Mysql如何查看是否使用到索引
2022/12/24 MySQL