我们经常应用日期和时间选择器。之前，我们使用最多的是jQuery UI的datedropper()。今天，我想介绍一个非常有趣的日期和时间选择器，它分为日期选择器和时间选择器。它们特别适合移动应用。

在线演示源代码下载

日期选择器日期选择器

分三步使用非常简单。

1.介绍相关的js和css文件。请注意，datedropper和timedropper是基于jQuery的插件，因此我们还应该引入jQuery库文件。

script src=' http : jquery . js '/script script src=' http 3360 datedropper . js '/script linkrel='样式表' type=' text/CSS ' href=' datedropper . CSS ' 2。在正文中排列html。

Type=' text' id=' pickdate'/3。打电话给约会者。

脚本$('#pickdate ')。date dropper()；/script然后，您可以根据需要配置一些选项。Datedropper提供以下基本选项设置：

动画：显示动画效果。当设置为true时，选择器面板中的日期将被动画化并滚动到当前日期。默认值为真。

Init_animation:点击弹出面板时的动画效果，包括fadeIn(默认)、bounce、DrOp。

格式化：格式化日期。我已将默认格式更改为Y-m-d m-d。

郎：语言，我已经把插件默认的月和周翻译成中文了。

MaxYear:最大年份，默认为当前年份。

MinYear:最小年份，默认为1970年。

年范围：年范围；默认值为10年。

DateDropper还提供皮肤样式设置。

时间选择器。

像日期选择器一样，它很容易使用。

1.介绍js和css文件。

script src=' http : jquery . js '/script script src=' http 3360 timedropper . js '/script linkrel='样式表' type=' text/CSS ' href=' timedropper . CSS ' 2。在正文中排列html。

Type=' text' id=' picktime'/3。打电话给时间滴管。

脚本$('#picktime ')。timeDropper()；/script timeDropper提供以下基本选项设置：

经脉：是否为12小时，默认为12小时，如果设置为假，则为24小时。

格式：Format，HH:mm，如02:12。

Init_animation:动画形式，fadeIn(默认)，DrOp。

SetCurrentTime:自动设置当前时间。

TimeDropper还提供皮肤样式设置。

jQuery移动日期(datedropper)和timedropper选择器的内容会给大家介绍这么多。感兴趣的朋友可以查看效果演示并下载源代码！