时间选择控件

javascript时间选择控件集小巧和强大的方案真的不算多，最近大家都在推荐的Pikaday+moment组合方案，真心觉得不错。

Pikaday 的优势是首先是小巧gzip后仅仅5kb。

使用方法也很简单，如果你要在你的项目中使用它仅仅需要添加一个input，然后附加一段JS代码即可。就像下面一样：

1.在你的HTML页面中添加一个input标准控件

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

2.在页面中引入pikaday.js脚本
<script src="pikaday.js"></script>
3.创建一个pikaday对象
<script>
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>

当然，如果你使用mootools或者jquery这些库的话，也可以，只要确定传入的是一个对象就好。

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

如果你需要选中之后调用自定义的函数进行交互，那么同样很简单！
(这里使用Moment库来进行时间格式化~稍后介绍)

<input type="text" id="datepicker" value="9 Oct 2012">

<script src="moment.js"></script>
<script src="pikaday.js"></script>
<script>
    var picker = new Pikaday({
        field: document.getElementById('datepicker'),
        format: 'D MMM YYYY',
        onSelect: function() {
//这里定义你要进行交互的数据
            console.log(this.getMoment().format('Do MMMM YYYY'));
        }
    });
</script>

对了，pikaday会对你的数据进行有效性检查的，所以，在编写的时候，又节约了时间。
忘记说了，这款小巧而强大的时间控件还带有i18N多语言方案。

var picker = new Pikaday({
        field: document.getElementById('datepicker'),

        i18n: {
            months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
            weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
            weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
        }
    });

下面来说一下Moment.js,这个库的功能是分析、验证以及处理时间数据。
优势同样，首先是小巧，只有5kb。
在引入库之后，你可以轻易的格式化你的时间

moment().format('MMMM Do YYYY, h:mm:ss a');//October 26th 2012, 11:45:37 am
moment().format('dddd');//Friday
moment().format("MMM Do YY");//Oct 26th 12
moment().format('YYYY [escaped] YYYY');//2012 escaped 2012
moment().format();//2012-10-26T11:45:37+08:00

它有一个不错的功能就是显示时间间隔多久

moment("20111031", "YYYYMMDD").fromNow();//a year ago
moment("20120620", "YYYYMMDD").fromNow();//4 months ago
moment().startOf('day').fromNow();//12 hours ago
moment().endOf('day').fromNow();//in 12 hours
moment().startOf('hour').fromNow();//an hour ago

还有特有的日历时间

moment().subtract('days', 10).calendar();//10/16/2012
moment().subtract('days', 6).calendar();//last Saturday at 11:48 AM
moment().subtract('days', 3).calendar();//last Tuesday at 11:48 AM
moment().subtract('days', 1).calendar();//Yesterday at 11:48 AM
moment().calendar();//Today at 11:48 AM
moment().add('days', 1).calendar();//Tomorrow at 11:48 AM
moment().add('days', 3).calendar();//Monday at 11:48 AM
moment().add('days', 10).calendar();//11/05/2012

当然，你可以使用字符串传递和日期对象传递进行使用

var day = new Date(2011, 9, 16);
var dayWrapper = moment(day);
var otherDay = moment(new Date(2020, 3, 7));

var newday = '2011-10-10';
var newdayWrapper(newday);

还可以使用UNIX时间戳

var day = moment(1318781876406);
var day = moment.unix(1318781876);

moment还有很多用法，必须联合数组，使用json等…

下面是两个库的地址：

Pikaday DEMO:

http://dbushell.github.com/Pikaday/

Pikaday  GITHUB:

https://github.com/dbushell/Pikaday

 

Momunt  GITHUB:

https://github.com/timrwood/moment/

Momunt  WEB SITE(DEMO):

http://momentjs.com/

Momunt  WEB SITE(DOCS):

http://momentjs.com/docs/

注：本文转载自： http://soulteary.com/2012/10/26/javascript-date-picker.html