时间选择控件
javascript时间选择控件集小巧和强大的方案真的不算多，最近大家都在推荐的Pikaday+moment组合方案，真心觉得不错。
Pikaday 的优势是首先是小巧gzip后仅仅5kb。
使用方法也很简单，如果你要在你的项目中使用它仅仅需要添加一个input，然后附加一段JS代码即可。就像下面一样：
|
1
2
3
4
5
6
7
8
9
10
|
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这些库的话，也可以，只要确定传入的是一个对象就好。
|
1
2
3
4
|
//FOR JQUERY
var
picker
=
new
Pikaday
(
{
field:
$
(
'#datepicker'
)
[
0
]
}
)
;
//FOR MOOTOOLS
var
picker
=
new
Pikaday
(
{
field:
$
(
'datepicker'
)
}
)
;
|
如果你需要选中之后调用自定义的函数进行交互，那么同样很简单！
(这里使用Moment库来进行时间格式化~稍后介绍)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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多语言方案。
|
1
2
3
4
5
6
7
8
9
|
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。
在引入库之后，你可以轻易的格式化你的时间
|
1
2
3
4
5
|
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
|
它有一个不错的功能就是显示时间间隔多久
|
1
2
3
4
5
|
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
|
还有特有的日历时间
|
1
2
3
4
5
6
7
8
|
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
|
当然，你可以使用字符串传递和日期对象传递进行使用
|
1
2
3
4
5
6
|
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时间戳
|
1
2
|
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/