🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A lightweight jQuery plugin that lets you create cross-browser and fully configurable date & time picker for input fields.

Date-Picker Time-Picker

Documentation

项目简介

一个基于 Jquery 的日期时间选择器插件(使用的时候,请保证插件脚本在 Jquery 之后引用)
插件兼容到 IE7 ,但 IE7 和 IE8 下需要多引入一个 es5-shim.min.js (在 demo 目录下可以找到)


虽然目前市面上这类插件很多,但大多数都只提供日期选择功能,没有精确到时分秒
又或者虽然提供时间选择,但界面过于花俏,不够简洁,要用到项目中必须花不少精力去调整样式
这个插件本着简洁的初衷,界面极少用到黑白以外的色调,确保能适应大多数场景
啥?你的站点本来就是很花俏,需要鲜艳的风格?
不好意思,要么找更适合你的插件,要么直接该源文件调整样式吧...实在没考虑到那样的需求,毕竟它不是完美的...


插件使用了 webpack 打包,最终只生成一个 js 文件,确保了使用上的简单
但...同时也正因为使用了 webpack 打包,对于 IE7 和 IE8,需要引入 es5-shim.min.js 使其支持 es5 语法拓展,插件才能正常运行
如果只是单纯的使用,直接引用 dist 目录下的 date-time-picker.min.js 即可
插件文档如下,使用 demo 下载源码后自己直接在本地查看即可

如何做自定义调整

先下载源码到本地,然后打开 src 目录。里面分别有三个文件(html,js,less)
大部分情况下,只需要修改 less 文件,来改变选择器的外观色调
其他两个文件,建议不要轻易改动。
修改完毕后,到项目根目录下,执行下面两条命令(安装项目打包依赖模块、项目打包):

npm install gulp 

$.setDateTimePickerConfig(configObj);

此方法用于设置插件的全局配置
下面是这个方法的调用例子:

$.setDateTimePickerConfig({     yearName: '',     monthName: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'], //月份显示格式     dayName: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] }); 



$.fn.dateTimePicker([configObj]);

生成日期选择器实例
下面是这个方法的调用例子:

$('#J-demo-01').dateTimePicker(); 
$('#J-demo-02').dateTimePicker({     mode: 'dateTime' }); 
$('#J-demo-03').dateTimePicker({     mode: 'dateTime',     limitMin: '2017-03-10 08:00:00',     limitMax: '2017-03-20 08:00:00',     format: 'yyyy/MM/dd HH:mm:ss',     yearName: '',     monthName: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'], //月份显示格式     dayName: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] }); 



configObj

日期选择器的配置对象,它包含多个属性,下面是每个属性的注解

limitMax【Str|JqObj】

如果设定了此配置项,日期选择范围会限制在此输入框当前时间之前(包含当前时间),可传入日期输入框JQ对象(比如开始时间不可大于结束时间,就把结束时间输入框的JQ对象传入),或者具体日期(请保证日期格式符合国际标准)

limitMin【Str|JqObj】

如果设定了此配置项,日期选择范围会限制在此输入框当前时间之后(包含当前时间),可传入日期输入框JQ对象(比如结束时间不可小于开始时间,就把开始时间输入框的JQ对象传入),或者具体日期(请保证日期格式符合国际标准)

yearName【Str】

年份名,默认值为:"年"

monthName【StrArr】

月份显示格式,需传入一个字符串数组,默认值为:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

dayName【StrArr】

星期显示格式,需传入一个字符串数组,默认值为:['日', '一', '二', '三', '四', '五', '六']

mode【Str】

选择器模式,可传 "date" 或 "dateTime",默认值为:"date"

format【Str】

时间格式,默认值为:'yyyy-MM-dd'(当 mode 为 "date" 时) 或 'yyyy-MM-dd HH:mm:ss'(当 mode 为 "dateTime" 时)


You May Also Like