有趣的日期和时间选择器
ljtx7297
9年前
<p> </p> <p>我们经常会应用到日期和时间选择器，之前我们使用最多的是jQuery UI的datepicker()，那么今天我给大家介绍一款非常有趣的日期和时间选择器，它分为日期选择器datedropper以及时间选择器timedropper，他们俩尤其适合在移动端上应用。</p> <p><img src="https://simg.open-open.com/show/e0066022be29995f63c23b267a458f1c.jpg"></p> <p><a href="/misc/goto?guid=4959671053020508601" rel="nofollow,noindex">查看演示</a> <a href="/misc/goto?guid=4959671053115958907" rel="nofollow,noindex">下载源码</a></p> <p>日期选择器datedropper</p> <p>使用非常简单，分三步，１、引入相关js和css文件。注意datedropper和timedropper都是基于jQuery的插件，所以也要引入jQuery库文件。</p> <pre> <code class="language-javascript"><script src="jquery.js"></script> <script src="datedropper.js"></script> <link rel="stylesheet" type="text/css" href="datedropper.css"> </code></pre> <p>２、布置body中的html。</p> <pre> <code class="language-javascript"><input type="text" id="pickdate" /> </code></pre> <p>３、调用datedropper</p> <pre> <code class="language-javascript"><script> $("#pickdate").dateDropper(); </script> </code></pre> <p>然后，就是可以根据需要适当配置一些选项。datedropper提供了如下基本选项设置：</p> <p>animate：展示动画效果，当设置为true时，选择器面板中的日期会做动画滚动到当前日期，默认是true。</p> <p>init_animation：点击弹出面板时的动画效果，有fadeIn(默认), bounce, dropDown三种效果。</p> <p>format：格式化日期，我已经将默认的格式改成了Y-m-d。</p> <p>lang：语言，我已经将插件默认的月份和星期翻译成中文语言了。</p> <p>maxYear：最大年份，默认当前年份。</p> <p>minYear：最小年份，默认1970。</p> <p>yearsRange：年份范围，默认10年。</p> <p>dateDropper还提供了皮肤样式的设置。</p> <p>时间选择器timedropper</p> <p>和日期选择器一样，使用也简单。１、引入js和css文件。</p> <pre> <code class="language-javascript"><script src="jquery.js"></script> <script src="timedropper.js"></script> <link rel="stylesheet" type="text/css" href="timedropper.css"> </code></pre> <p>２、布置body中的html。</p> <pre> <code class="language-javascript"><input type="text" id="picktime" /> </code></pre> <p>３、调用timedropper</p> <pre> <code class="language-javascript"><script> $("#picktime").timeDropper(); </script> </code></pre> <p>timeDropper提供了如下基本选项设置：</p> <p>meridians：是否12小时制，默认是12小时制，设置为false则为24小时制。</p> <p>format：格式化，HH:mm如02:12。</p> <p>init_animation：动画形式，fadeIn(默认), dropDown。</p> <p>setCurrentTime：自动设置当前时间。</p> <p>timeDropper也提供了皮肤样式的设置。</p> <p>更多详情可以访问项目官网： <a href="/misc/goto?guid=4958864789749205769" rel="nofollow,noindex">http://felicegattuso.com/projects/datedropper/</a></p> <p>来自： <a href="/misc/goto?guid=4959671053232283294" rel="nofollow">http://www.helloweba.com/view-blog-360.html</a></p>