下载地址:https://github.com/zw1371/zm-datepicker-full

之前写了一个简单的vue日历控件:https://www.cnblogs.com/mrzhu/p/8632396.html

具体用法:(基本用法请参考:https://www.cnblogs.com/mrzhu/p/8632396.html)

  

<zm-datepicker type="week"  v-model="option.sDate" @select-time="selectSDate" placeholder="开始日期"></zm-datepicker>

  

然后简单的日历控件并不能很好的满足我现有的工作,故封装了一个稍微复杂点的日历控件,相比之前的日历控件 增加了以下功能:

  1:增加周的选择

  2:增加了select-time事件(用户选择事件后会触发该方法)

  3:增加了placeholder用户用户没有选择时候的文字展示

以下重点介绍相关功能:

  1:周的选择(设置type属性为week)

  

  2:增加了select-time事件

    基本上使用v-model就已经可以很好的满足我们的要求,之所以添加了该事件是因为,如果一个日历控件 需要不停的切换其状态,比如在某些情况下他的状态是选择月 在某些情况下他的状态是选择周,使用v-model并不能很好的表示不同状态下的值,所以新增了该事件,该事件传递两个参数,第一个参数表示当前日历的类型(月 日 周 小时 ...),第二个参数表示用户具体选择的值,不同类型对应的值不一样

   selectSDate(type,data){
console.log(type)//month-当前日历类型为选择月,day-当前日历类型为选择日,week-当前日历类型为选择周,hour-当前日历类型为选择小时,minute-当前日历类型为选择分钟内
console.log(data)//不同类型的日历 返回的值不一样
},

  关于select-time事件中,第二个参数的值的说明:

    如果当前日历类型为选择月

        {
date,//yyyy-MM格式日期
day,//yyyy-MM-dd格式日期
time//yyyy-MM-dd hh:mm:ss格式日期
}

     如果当前日历类型为选择周

        {
weekIndex:w,//当前周的索引
monday:s,//当前选择的周的周一的日期 格式为yyyy-MM-dd
sunday:e,//当前选择周的周日的日期 格式为yyyy-MM-dd
time//时间 格式为yyyy-MM-dd hh:mm:ss
}

    如果当前类型为选择日

        {
date,//yyyy-MM-dd格式数据
day,//yyyy-MM-dd格式数据
time//yyyy-MM-dd hh:mm:ss格式数据
}

    如果选择为小时

        {
date,//yyyy-MM-dd hh格式数据
day,//yyyy-MM-dd格式数据
time//yyyy-MM-dd hh:mm:ss格式数据
}

    如果选择为分钟

        {
date,//yyyy-MM-dd hh:mm格式数据
day,//yyyy-MM-dd格式数据
time//yyyy-MM-dd hh:mm:ss格式数据
}

  

多功能版vue日历控件的更多相关文章

  1. vue日历控件,自定义选择年月 选择年月日 选择年月日时 选择年月日时分,自定义日期范围

    下载地址:https://pan.baidu.com/s/1iEZl4kDkEg4ybwqc7aI7vQ 注:功能更加全面的日历控件请访问:https://www.cnblogs.com/mrzhu/ ...

  2. javascript日历控件——纯javascript版

    平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...

  3. My97日历控件常用功能记录

    My97相信大家都不陌生,应该是我所见过的最强大的一个日历控件了,最近的项目中也比较多地用到了此控件,而且项目中经常会有不同时间范围的需求,在此列出一些比较常用的日期范围格式的设置,尽管在My97的官 ...

  4. 转 My97日历控件常用功能记录

    My97相信大家都不陌生,应该是我所见过的最强大的一个日历控件了,最近的项目中也比较多地用到了此控件,而且项目中经常会有不同时间范围的需求,在此列出一些比较常用的日期范围格式的设置,尽管在My97的官 ...

  5. javascript日历控件

    以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就 ...

  6. Android自定义控件之日历控件

      标签: android 控件 日历 应用 需求 2015年09月26日 22:21:54 25062人阅读 评论(109) 收藏 举报 分类: Android自定义控件系列(7) 版权声明:转载注 ...

  7. WPF 4 日历控件(Calendar)

    原文:WPF 4 日历控件(Calendar)      在之前我已经写过两篇关于WPF 4 任务栏(Taskbar)相关的特性.相信自从VS2010 Beta 版放出后,WPF 的粉丝们肯定在第一时 ...

  8. android 自定义日历控件

    日历控件View: /** * 日历控件 功能:获得点选的日期区间 * */ public class CalendarView extends View implements View.OnTouc ...

  9. TWaver初学实战——如何在TWaver属性表中添加日历控件?

    在日期输入框中添加日历控件,是一种非常流行和实用的做法.临渊羡鱼不如退而写代码,今天就看看在TWaver中是如何实现的.   资源准备   TWaver的在线使用文档中,就有TWaver Proper ...

随机推荐

  1. IDEA 201809 Jrebel安装破解

    jrebel介绍: JRebel是一款JAVA虚拟机插件,它使得JAVA程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响.JRebel使你能即时分别看到代码.类和资源的变化, ...

  2. Log4j2 简介

    介绍 Log4j2是Log4j的升级版,与之前的版本Log4j 1.x相比.有重大的改进,修正了Logback固有的架构问题的同事,改进了许多Logback所具有的功能. 特性 一.API 分离 Lo ...

  3. python timeit模块

    timeit模块timeit模块可以用来测试一小段Python代码的执行速度. class timeit.Timer(stmt='pass', setup='pass', timer=<time ...

  4. spring boot常见问题

    1.什么是springboot 用来简化spring应用的初始搭建以及开发过程 使用特定的方式来进行配置(properties或yml文件) 创建独立的spring引用程序 main方法运行 嵌入的T ...

  5. 清除Windows 10的文件夹浏览痕迹

    windows 10有一个功能就是在快速访问时显示“最近访问的文件”,“常用文件”.如果是一台共用电脑,这个功能会经常暴露自己的“行踪”. 可以在“文件夹选项”-“隐私”中去掉勾选,并点击“清除”来清 ...

  6. python各种转义字符

  7. 2.4JAVA基础复习——JAVA语言的基础组成数组

    JAVA语言的基础组成有: 1.关键字:被赋予特殊含义的单词. 2.标识符:用来标识的符号. 3.注释:用来注释说明程序的文字. 4.常量和变量:内存存储区域的表示. 5.运算符:程序中用来运算的符号 ...

  8. c#的几种数据结构

    Array/ArrayList/List/LinkedList/Queue/Stack/HastSet/SortedSet/Hashtable/SortedList/Dictionary/Sorted ...

  9. Oracle GoldenGate 18.1 支持的DB和OS列表

    Product Release Processor Type OS Version OS Update Type OS Update Level Run Mode 32/64 Bit Database ...

  10. android 模拟器 访问 localhost IIs Express 400错误

    如果用安卓模拟器调试本机的网站,比如 localhost:63586,是访问不到的,返回结果是 400 错误.原因是模拟器上的localhost指向的默认是模拟器自己. 解决方法是:(1) 把安卓模拟 ...