jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载.pdfVIP

我们经常会应用到日期和时间选择器， 之前我们使用最多的是 jQuery UI 的 datepicker() ， 那么今天我给大家介绍一款非常有趣的日期和时间选择器，它分为日期选择器 datedropper 以及时间选择器 timedropper ，他们俩尤其适合在移动端上应用。 日期选择器 datedropper 使用非常简单，分三步， １、引入相关 js 和 css 文件。注意 datedropper 和 timedropper 都是基于 jQuery 的插件， 所以也要引入 jQuery 库文件。 lt;script src=jquery.jsgt;lt;/scriptgt;nbsp; lt;script src=datedropper.jsgt;lt;/scriptgt;nbsp; lt;link rel=stylesheet type=text/css href=datedropper.cssgt; ２、布置 body 中的 html 。 lt;input type=text id=pickdate /gt; ３、调用 datedropper lt;scriptgt;nbsp; $(#pickdate).dateDropper();nbsp; lt;/scriptgt; 然后，就是可以根据需要适当配置一些选项。 datedropper 提供了如下基本选项设置： animate：展示动画效果，当设置为 true 时，选择器面板中的日期会做动画滚动到当前 日期，默认是 true 。 init_animation ：点击弹出面板时的动画效果，有 fadeIn( 默认 ), bounce, dropDown 三种效 果。 format ：格式化日期，我已经将默认的格式改成了 Y-m-d 。 lang ：语言，我已经将插件默认的月份和星期翻译成中文语言了。 maxYear：最大年份，默认当前年份。 minYear ：最小年份，默认 1970。 yearsRange：年份范围，默认 10 年。 dateDropper 还提供了皮肤样式的设置。 时间选择器 timedropper 和日期选择器一样，使用也简单。 １、引入 js 和 css 文件。 lt;script src=jquery.jsgt;lt;/scriptgt;nbsp; lt;script src=timedropper.jsgt;lt;/scriptgt;nbsp; lt;link rel=stylesheet type=text/css href=timedropper.cssgt; ２、布置 body 中的 html 。 lt;input type=text id=picktime /gt; ３、调用 timedropper lt;scriptgt;nbsp; $(#picktime).timeDropper();nbsp; lt;/scriptgt; timeDropper 提供了如下基本选项设置： meridians ：是否 12 小时制，默认是 12 小时制，设置为 false 则为 24 小时制。 format ：格式化， HH:mm 如 02:12 。 init_animation ：动画形式， fadeIn( 默认 ), dropDown 。 setCurrentTime ：自动设置当前时间。 timeDropper 也提供了皮肤样式的设置。 jQuery 移动端日期 (datedropper)和时间 (timedropper) 选择器的内容就给大家介绍这么多， 感兴趣