WonderCSS

JavaScript 日期选择器 Pikaday 简介和使用

最近在做织梦DedeCMS模板中需要添加一个在线提交表单,其中涉及到一个“预约时间”表单项目,那么最理想的方案就是点击日期框,直接弹出一个直观的日历选项,由用户点击即可而无需手动录入年月日。若想实现这个用户体验毫无疑问的需要JS支持了,那么今天就记录一个简单实用的日历JS:Pikaday

我们可以先看看 Pikaday 的 Demo:http://dbushell.github.io/Pikaday/

再来简单了解下 Pikaday JavaScript,它是一个 JS 日期选择器,它不依赖于任何 Javascript 库,并且文件大小小于 5K,但是功能却一点不弱,可以进行高级定制。并且样式可以根据 CSS 进行更改选择器的设计,当然默认的样式已经非常不错了。

Pikaday-Demo-Screenshot

Pikaday 使用起来很简单

首先,在页面中创建一个输入框:


<input type="text" id="datepicker">

然后,在页面中加载 Pikaday 的 Javascript 库和 CSS 文件(出于对页面的优化,我们推荐奖JS引用放到页尾),并调用 Pikaday:


<link rel="stylesheet" href="http://dbushell.github.com/Pikaday/css/pikaday.css">
<script src="http://dbushell.github.com/Pikaday/pikaday.js"></script>
<script>
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>

再此处需要注意的是如果你的网页已经加载了 jQuery 库,其中调用代码可以改成下面更简洁的方式:


var picker = new Pikaday({ field: $('#datepicker')[0] });

完成以上两步 Pikaday 就可以正常的使用了,试试效果吧!

By 于湛 发布于 2013.09.28 2,095 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注