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 相关文章推荐
优化 JavaScript 代码的方法小结
Jul 16 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
在node中如何使用 ES6
Apr 22 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
详解Vue3使用axios的配置教程
Apr 29 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
星际争霸任务指南——人族
2020/03/04 星际争霸
网站当前的在线人数
2006/10/09 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
Vue入门之animate过渡动画效果
2018/04/08 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
python中定义结构体的方法
2013/03/04 Python
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python利用opencv保存、播放视频
2020/11/02 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
六一儿童节主持词
2014/03/21 职场文书
高中教师评语大全
2014/04/25 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS