日历插件zaneDate 不依赖任何第三方插件使用简单文档完善

ranwu 发布于2019-08-22 16:09 / 3508人阅读

摘要：先来找图看看时间选择器的效果没错就是这个吊样，如果你不需要这个色调，你可以我的项目任意修改美美的色调。当然也欢迎你给我提很多很多的让我改不停。

先来找图看看时间选择器的效果：

没错就是这个吊样，如果你不需要这个色调，你可以fork我的github项目任意修改美美的色调。

当然也欢迎你给我提很多很多的bug让我改不停? 。

npm地址：https://www.npmjs.com/package...
github地址：https://github.com/wangweiang...
demo地址：http://www.seosiwei.com/zaneD...

说明：
掉起插件DOM节点可以是input输入框，也可以是其他任意闭合的html标签

此插件不依赖任何第三方插件，因此可以在任何地方多带带使用

插件不兼容低版本的IE浏览器，IE浏览器请慎重

暂时只支持单个时间段选择，后期会推出多个时间段选择方式

使用方法：
浏览器端直接应用css,js







初始化
zaneDate({
    elem:"#zane-calendar",
})

webpack 开发引入方式

const zaneDate = require("zane-calendar")
或
import zaneDate from "zane-calendar"




初始化
zaneDate({
    elem:"#zane-calendar",
})

gitHub代码拉取下来运行方式

git clone https://github.com/wangweianger/zane-data-time-calendar.git
npm install
npm run dev
npm run build

插件参数说明

{    
    elem:"#zane-calendar",   控件的dom原生 注意：仅限制于id选择器
    type:"day",   可选类型 day year month time oubleday doubleyear doublemonth doubletime
    lang:"cn",   可选择语言类型 cn , en 
    width:280,  插件宽度配置
    format:"yyyy-MM-dd HH:mm:ss",  时间格式化
    begintime:"",  开始时间  （单选择器默认选择此项）
    endtime:"",       结束时间  （double选择器需要）
    min:"",  可选取时间最小范围 1900-10-01
    max: "",  可选取时间最大范围 2099-12-31
    position:"fixed",  定位方式  暂时只支持 fixed
    event:"click",   事件方式 暂时只支持 click 
        zindex:100,  z-index的值
    showtime:true,  是否显示选择时间
    showclean:true,  是否显示清除按钮
    shownow:true,  是否显示当前按钮
    showsubmit:true, 是否显示提交按钮
    haveBotBtns:true, 是否有底部按钮列表
    calendarName:"", 此参数勿动 表示当前时间插件实例化对象
    mounted:()=>{}, 插件加载完成之后调用
    change:(fulltime,begintime,endtime)=>{}, 时间变更之后调用
    done:(fulltime,begintime,endtime)=>{}, 选择完成之后调用
}

参数具体配置可参考demo文件

案例调用方式

    默认完整选项
    zaneDate({
        elem:"#zane-calendar",
    })

    只选择年月日
    zaneDate({
        elem:"#zane-calendar",
        showtime:false,
    })

    使用英文
    zaneDate({
        elem:"#zane-calendar",
        lang:"en",
    })

    只选择年
    zaneDate({
        elem:"#zane-calendar",
        type:"year",
    })

    只选择月
    zaneDate({
        elem:"#zane-calendar",
        type:"month",
    })

    只选择时间
    zaneDate({
        elem:"#zane-calendar",
        type:"time",
    })

    格式化方式
    zaneDate({
        elem:"#zane-calendar",
        format:"yyyy年MM月dd日 HH时mm分ss秒",
    })

    限定能选择的最小最大区间
    zaneDate({
        elem:"#zane-calendar",
        min:"2017-08-01",
        max:"2017-08-20",
    })

1.1.0 版本新增double双选择时间配置

config.type  新增double类型  可选类型如下：
day year month time doubleday doubleyear doublemonth doubletime

双日期范围选择

zaneDate({
    elem:"#demo21",
    type:"doubleday",
    showtime:false
})

双年范围选择
zaneDate({
    elem:"#demo22",
    type:"doubleyear",
})

双月范围选择
zaneDate({
    elem:"#demo23",
    type:"doublemonth",
})

双时间选择
zaneDate({
    elem:"#demo24",
    type:"doubletime",
})

1.2.0
doubleday类型新增选择时间，支持时分秒选择

double类型检测距离右边window边线的距离，若不足，自动排列为上下两个日期

config.type doubleday支持选择时间范围

双日期范围选择

zaneDate({
    elem:"#demo25",
    format:"yyyy-MM-dd HH:mm:ss",
    type:"doubleday",
    showtime:true
})

1.2.1 版本新增z-index 参数

zaneDate({
    elem:"#zane-calendar",
    zindex:500,
})

2.0.5 修复 double选择器默认值

如果你有什么好的建议或者疑问请给我留言吧。

GPU云服务器云服务器日历插件 js日历插件 php 日历插件 js日历插件视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94092.html

Cordova创建系统日历事件

摘要：在制作一款打卡的时候有这么一个需求创建提醒到系统日历中，也就是利用系统日历来做事件的提醒，这么做的好处很明显，无需处理提醒的细节，也无需后台。在制作一款打卡App的时候有这么一个需求 -- 创建提醒到系统日历中，也就是利用系统日历来做事件的提醒，这么做的好处很明显，App无需处理提醒的细节，也无需后台。这个App是基于Cordova开发的，并没有访问系统日历的接口，我们只能通过插件来...

snowLu 2019-08-23 13:57 评论0 收藏0
前端插件库

摘要：原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库，目的是强化表格操作如搜索排序，并自动加入组件引入表格中，使用非常灵活简便。由推出，灵活扎实的建议列表函数库。原文链接：前端插件库站点：前端开发文档博客：前端插件库前端插件库 DataTables 官网：https://www.datatables.net/ DataTables是jQuery的JavaScr...

高胜山 2019-08-26 13:44 评论0 收藏0
前端插件库

摘要：原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库，目的是强化表格操作如搜索排序，并自动加入组件引入表格中，使用非常灵活简便。由推出，灵活扎实的建议列表函数库。原文链接：前端插件库站点：前端开发文档博客：前端插件库前端插件库 DataTables 官网：https://www.datatables.net/ DataTables是jQuery的JavaScr...

shusen 2019-08-30 10:53 评论0 收藏0
学习实践 - 收藏集 - 掘金

摘要：官网地址聊天机器人插件开发实例教程一创建插件在系统技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。我会简单基于的简洁视频播放器组件前端掘金使用和实现购物车场景前端掘金本文是上篇文章的序章，一直想有机会再次实践下。 2道面试题：输入URL按回车&HTTP2 - 掘金通过几轮面试，我发现真正那种问答的技术面，写一堆项目真不如去刷技术文章作用大，因此刷了一段时间的博客和掘金，整理下曾经被...

mikyou 2019-08-29 12:50 评论0 收藏0
VUE UI框架对比 element-ui 与 iView

摘要：而则是用到到指令结合的方式去生成，批量生成元素。表格操作列自定义渲染的时，使用的是的函数，直接在中插入对应模板表格分页都需要引入分页组件配合使用两者总体比较，要比简洁许多。 element VS iview(最近项目UI框架在选型，做了个分析，不带有任何利益相关）主要从以下几个方面来做对比使用率（npm 平均下载频率，组件数量，star, issue…)API风格打包优化与设计师友...

ZHAO_ 2019-08-20 17:25 评论0 收藏0