JavaScript 日期选择器 Pikaday 的一些总结
2017-01-02 19:38
435 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。
转载请注明出处!
做完一个关于公寓系统后,涉及到了日期选择组件的小东西,在这里抽空整理下,小白在此,前面大牛避让~~~
首先:附上PikaDay的下载地址
废话不多话,直接上干货。
Pikaday是一款超轻量级的javascript日期选择器,并且支持模块化的CSS,可以帮助你更加简单的配置样式。
兼容以下浏览器
IE 7+
Chrome 8+
Firefox 3.5+
Safari 3+
Opera 10.6+
目前虽然处于开发状态,但是看起来已经十分不错了。
和重量级别的jQueryUI 日期选择器相比,Pikaday更轻量级,压缩版本只有5kb。当然,如果你使用jQuery类库的话,同时也提供了jQuery插件,它的未压缩版本的api接口也十分的详尽,有兴趣的可以自己动手进行二次开发,相信大家一定会喜欢。
html结构:
因为这个js插件是老外一牛人做的,所以这个界面还是英文的、而且日期格式只能是这个,那么变换方法还是有的,上菜:
需要在资源中再引入一个格式化库件moment.js
再实例化 Pikaday组件,效果:
在实际项目中,有选择单个具体时间、有时间段等:
在这块介绍下几个参数以及回调函数的用法:
1、field:绑定pikaday到表单区域字段
2、minData:可以选择的最小/最早日期(这是一个本地日期对象)
3、maxData:同理,可以选择的最大/最晚日期(这是一个本地日期对象)
4、yearRange:任何一方的年数(如10)或上/下范围数组
5、trigger:使用不同的元素来触发开启Datepicker,这通常使用在其他Dom元素来开启时间控件
6、bound:自动显示/隐藏在热点Datepicker
7、position:优先位置的DatePicker相对于表单字段,例如:右上,右下角注:发生避免外面显示视口DatePicker可以自动调整,如不设置,该插件会自动调整进行显示,很良心
8、reposition:可设置为false,不复位DatePicker视口内,迫使其采取的配置位置,自定义
8、container:Dom节点进行包裹渲染该组件
9、format:默认的日期输出格式。tostring()和字段值(需配合moment.js)
10、formatStrict:用于严格日期分析的默认标志
11、defaultData:第一次打开时查看初始日期
12、setDefaultData:让defaultdate初始选择的价值
13、firstDay:本周第一天
14、disableWeekends:禁止对周六或周日选择
15、disableDayfn:回调函数,该函数在视图中每天传递一个日期对象.。应该返回真正的禁用选择的那一天。
16、showWeekNumber:在行的头上显示ISO周数.
17、isRTL:逆左到右语言的日历
18、i18n:语言的默认的月和星期名称(配套的moment.js进行实例化的格式对象)
19、yearSuffix:添加到标题中的年份的附加文本
20、showMonthAfterYear:在标题中年复一年地渲染
21、showDaysInNextAndPreviousMonths:将下一个月或前几个月的日历网格的日期呈现到当前月份,而不是呈现空表单元格.
22、numberofMonths:可见日历数量
23、mainCalendar:当numberofmonths使用,这将有助于您选择的主要日程将(默认左,可以设置为右)。仅用于第一次显示或选定日期尚未可见时使用.
24、theme:定义一个类,可以被用来作为一种风格不同的主题挂钩
以下是pikaday的相关回调函数:
A:onSelect:function(e){} 组件被选择时
B:onOpen: function(e){} 组件可见时
C:onClose: function(e){} 组件隐藏关闭时
D:onDraw: function(e){} 组件绘制时
以下是一些对象方法:
picker.isVisible() 返回的是布尔型 true or false
picker.show() 显示
picker.hide() 隐藏
picker.adjustPosition() 重新计算位置并设置
picker.destory() 销毁
相关的git demo示例>>
转载请注明出处!
做完一个关于公寓系统后,涉及到了日期选择组件的小东西,在这里抽空整理下,小白在此,前面大牛避让~~~
首先:附上PikaDay的下载地址
废话不多话,直接上干货。
Pikaday是一款超轻量级的javascript日期选择器,并且支持模块化的CSS,可以帮助你更加简单的配置样式。
兼容以下浏览器
IE 7+
Chrome 8+
Firefox 3.5+
Safari 3+
Opera 10.6+
目前虽然处于开发状态,但是看起来已经十分不错了。
和重量级别的jQueryUI 日期选择器相比,Pikaday更轻量级,压缩版本只有5kb。当然,如果你使用jQuery类库的话,同时也提供了jQuery插件,它的未压缩版本的api接口也十分的详尽,有兴趣的可以自己动手进行二次开发,相信大家一定会喜欢。
html结构:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>http://blog.csdn.net/ime33 原生JS英文时间日期插件 Pikaday.js</title> <link rel="stylesheet" href="http://dbushell.github.com/Pikaday/css/pikaday.css"> <script src="http://dbushell.github.com/Pikaday/pikaday.js"></script> </head> <body> <h3>基础例子</h3> <input type="text" id="datepicker"> <script> var picker = new Pikaday( { field: document.getElementById('datepicker'), firstDay: 1, minDate: new Date('2000-01-01'), maxDate: new Date('2020-12-31'), yearRange: [2000,2020] }); </script> </body> </html>运行结果:
因为这个js插件是老外一牛人做的,所以这个界面还是英文的、而且日期格式只能是这个,那么变换方法还是有的,上菜:
需要在资源中再引入一个格式化库件moment.js
var i18n = { // 本地化 previousMonth : '上个月', nextMonth : '下个月', months : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], weekdays : ['周日','周一','周二','周三','周四','周五','周六'], weekdaysShort : ['日','一','二','三','四','五','六'] }
var picker = new Pikaday( { field: document.getElementById('datepicker'), firstDay: 1, i18n: i18n, minDate: new Date('2000-01-01'), maxDate: new Date('2020-12-31'), yearRange: [2000,2020] });
再实例化 Pikaday组件,效果:
在实际项目中,有选择单个具体时间、有时间段等:
在这块介绍下几个参数以及回调函数的用法:
1、field:绑定pikaday到表单区域字段
2、minData:可以选择的最小/最早日期(这是一个本地日期对象)
3、maxData:同理,可以选择的最大/最晚日期(这是一个本地日期对象)
4、yearRange:任何一方的年数(如10)或上/下范围数组
5、trigger:使用不同的元素来触发开启Datepicker,这通常使用在其他Dom元素来开启时间控件
6、bound:自动显示/隐藏在热点Datepicker
7、position:优先位置的DatePicker相对于表单字段,例如:右上,右下角注:发生避免外面显示视口DatePicker可以自动调整,如不设置,该插件会自动调整进行显示,很良心
8、reposition:可设置为false,不复位DatePicker视口内,迫使其采取的配置位置,自定义
8、container:Dom节点进行包裹渲染该组件
9、format:默认的日期输出格式。tostring()和字段值(需配合moment.js)
10、formatStrict:用于严格日期分析的默认标志
11、defaultData:第一次打开时查看初始日期
12、setDefaultData:让defaultdate初始选择的价值
13、firstDay:本周第一天
14、disableWeekends:禁止对周六或周日选择
15、disableDayfn:回调函数,该函数在视图中每天传递一个日期对象.。应该返回真正的禁用选择的那一天。
16、showWeekNumber:在行的头上显示ISO周数.
17、isRTL:逆左到右语言的日历
18、i18n:语言的默认的月和星期名称(配套的moment.js进行实例化的格式对象)
19、yearSuffix:添加到标题中的年份的附加文本
20、showMonthAfterYear:在标题中年复一年地渲染
21、showDaysInNextAndPreviousMonths:将下一个月或前几个月的日历网格的日期呈现到当前月份,而不是呈现空表单元格.
22、numberofMonths:可见日历数量
23、mainCalendar:当numberofmonths使用,这将有助于您选择的主要日程将(默认左,可以设置为右)。仅用于第一次显示或选定日期尚未可见时使用.
24、theme:定义一个类,可以被用来作为一种风格不同的主题挂钩
以下是pikaday的相关回调函数:
A:onSelect:function(e){} 组件被选择时
B:onOpen: function(e){} 组件可见时
C:onClose: function(e){} 组件隐藏关闭时
D:onDraw: function(e){} 组件绘制时
以下是一些对象方法:
picker.isVisible() 返回的是布尔型 true or false
picker.show() 显示
picker.hide() 隐藏
picker.adjustPosition() 重新计算位置并设置
picker.destory() 销毁
相关的git demo示例>>
相关文章推荐
- javascript 日期联动选择器 [其中的一些代码值得学习]
- javascript 日期联动选择器 [其中的一些代码值得学习]
- Javascript日期选择控件(4)
- Javascript日期选择控件(1)
- Javascript日期选择控件(6)
- Javascript日期选择控件(5)
- 总结一些javascript代码,希望大家用得上,大家如果有更多,不妨也贴上来!愿我们做得更好!
- 免费的Javascript日期输入及选择控件大全
- 总结两个Javascript的哈稀对象的一些编程技巧
- 总结两个Javascript的哈稀对象的一些编程技巧
- javascript 表单日期选择效果
- 项目中用的一些javascript,判断日期的和文件名的
- 好多Javascript日期选择器呀-7
- JavaScript 实现日历式日期选择
- 日期选择控件 完美支持XHTML(JavaScript)
- JavaScript的使用2:用列表框进行日期选择
- 学习javascript点滴总结,包括一些常用代码1
- 好多Javascript日期选择器呀-5
- Javascript日期选择控件(3)
- javascript 表单日期选择效果