推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)

前端之家收集整理的这篇文章主要介绍了推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

三款日期选择插件推荐给大家:

1.My97DatePicker

纯原生JS,专注于PC端,支持IE6+;页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结构,否则就会报错找不到指定文件

(1)直接在html文件中写入

注意:由于此插件是原生JS写的,所以绑定点击事件请务必请用原生JS的点击事件绑定方法,如果使用$('#ipt').on('click',function( ){ }),在选中一个日期并失去焦点后,想要重新选择就必须点击两次次才能唤起日历。 (2)如果给输入框添加class="Wdate",输入框的右边会出现一个日期图标。 (3)可以通过其他元素来弹出日期选择框,直接给该元素添加onclick="WdatePicker({el: '#ipt'})" (4)可以通过添加position属性来定义弹出位置,例如 onclick="WdatePicker({position: {left:100,top:50}})" (5)可以通过添加dateFmt属性来定义日期格式,例如 onclick="WdatePicker({dateFmt: 'MM-yy'})" (6)如果没有定义onpicked和oncleared事件,将自动触发文本框的onchange事件,定义这些事件的方式如下

插件,在这里手动添加校验 },oncleared: function(){ // 配合jquery.validate.js插件,在这里手动添加校验 },}); }

(7)可以实现日期选择联动

(8)还能将选中的值拆分到文本框

更多功能和参数请去官网查询nofollow" href="http://www.my97.net/dp/demo/resource/3.asp">http://www.my97.net/dp/demo/resource/3.asp。

2.jquery.datepicker.js

主要用于PC端,需要同时引入jquery.js和jquery-ui.js,样式方面除了引入jquery-ui.css,还要带上jquery-ui目录中的images文件夹,否则就会报错找不到指定的文件

(1)引入相关文件后,直接就是$('#ipt').datepicker( );

(2)常用的几个参数配置如下

显示几个月 showButtonPanel:true,// 是否显示按钮面板 dateFormat: 'yy-mm-dd',// 日期格式 clearText:"清除",// 清除日期的按钮名称 closeText:"关闭",// 关闭选择框的按钮名称 yearSuffix: '年',// 年的后缀 showMonthAfterYear:true,// 是否把月放在年的后面 defaultDate:'2011-03-10',// 默认日期 minDate:'2011-03-05',// 最小日期 maxDate:'2011-03-20',// 最大日期 monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],dayNamesMin: ['日','一','二','三','四','五','六'],onSelect: function(selectedDate) { // 选择日期后执行的操作 alert(selectedDate); } });

3.Mobiscroll

专注于移动端,依赖于jquery类库,有多种样式可供选择,根据需要引入各类文件

(1)demo如下:

<Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"> Mobiscroll日期时间<a href="/tag/chajian/" target="_blank" class="keywords">插件</a>

<style type="text/css">
.dwl{
font-size: 20px;
}
.dwbg .dwb{
font-size: 20px;
}
table td:first-child{
padding-right: 15px;
}
table td:last-child{
padding-left: 15px;
}
table .dww{
min-width: 150px !important;
}

<script src="dev/jquery-1.9.1.js">

<script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript">

<script src="dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript">

@H_404_85@

<script type="text/javascript">
$(function () {
var currYear = (new Date()).getFullYear();
var opt={};
opt.date = {preset : 'date'};
opt.default = {
theme: 'android-ics light',// 皮肤样式
display: 'bottom',// 显示方式
mode: 'scroller',// 日期选择模式
startYear: currYear,//开始年份
endYear: currYear + 30,//结束年份
dateFormat: 'mm/yyyy ',// 日期格式
dateOrder: 'mmyy',// 面板中日期排列格
setText: '确定',// 确认按钮名称
cancelText: '取消',// 取消按钮名籍我
monthText: '月',// 面板中月文字
yearText: '年',// 面板中年文字
};

$("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'],opt['default']));
});

(2)解决与移动端软键盘的定位冲突

如果页面有多个输入框,当点击一个输入框时会唤起设备自带的软键盘,然后如果直接点击另一个id名为appDate的日期输入框,即失去焦点的同时,获取到了mobiscroll绑定的输入框的焦点,结果发现之前的软键盘下沉消失之后,本该显示底部的日期选择部件显示在了屏幕的上方,解决办法是找到mobiscroll.core-2.5.2.js 这个文件搜索focus关键字,将对应的地方改成:

其中300ms就是设置的延迟时间,这样以来再做相同的操作,就是等之前的软键盘下沉消失之后从底部浮上显示日期选择部件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的jQuery相关文章