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

前端之家收集整理的这篇文章主要介绍了日历插件zaneDate 不依赖任何第三方插件 使用简单 文档完善前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先来找图看看时间选择器的效果:@H_301_1@@H_301_1@@H_301_1@@H_301_1@@H_301_1@@H_301_1@

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

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

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

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

插件不依赖任何第三方插件,因此可以在任何地方单独使用

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

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

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

<link href="./dist/zane-calendar.css">
<script src="./dist/zane-calendar.js"></script>

<!-- 需要加时间插件的输入框 -->
<input type="text" name="" id="zane-calendar">

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

webpack 开发引入方式

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

<!-- 需要加时间插件的输入框 -->
<input type="text" name="" id="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,选择完成之后调用
}

参数具体配置可参考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 @H_301_1@doubleday类型新增选择时间,支持时分秒选择

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

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

双日期范围选择

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

1.2.1 版本 新增z-index 参数

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

2.0.5 修复 double选择器 默认值

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

猜你在找的设计模式相关文章