本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议，欢迎转载、或重新修改使用，但需要注明来源。 [署名 4.0 国际 (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/deed.zh)

本文作者: 苏洋

创建时间: 2012年10月26日
统计字数: 2677字
阅读时间: 6分钟阅读
本文链接: https://soulteary.com/2012/10/26/javascript-date-picker.html

-----


# 时间选择控件

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



![时间选择控件](https://attachment.soulteary.com/2012/10/26/datejs.png "时间选择控件")

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

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

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

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

2.在页面中引入 pikaday.js 脚本

3.创建一个 pikaday 对象

```js
<script>
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>
```

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

```js
//for jQuery
var picker = new Pikaday({ field: $('#datepicker')[0] });
// for MooTools
var picker = new Pikaday({ field: $('datepicker') });
```

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

```html
<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 多语言方案。

```js
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。 在引入库之后，你可以轻易的格式化你的时间

```js
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
```

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

```js
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
```

还有特有的日历时间

```js
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
```

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

```js
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 时间戳

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

Moment 还有很多用法，必须联合数组，使用JSON等...

下面是两个库的地址：

- Pikaday DEMO: [http://dbushell.github.com/Pikaday/](http://dbushell.github.com/Pikaday/)
- Pikaday  GITHUB: [https://github.com/dbushell/Pikaday](https://github.com/dbushell/Pikaday) 
- Momunt  GITHUB: [https://github.com/timrwood/moment/](https://github.com/timrwood/moment/)
- Momunt  WEB SITE(DEMO): [http://momentjs.com/](http://momentjs.com/) 
- Momunt  WEB SITE(DOCS): [http://momentjs.com/docs/](http://momentjs.com/docs/)