计算机教程

当前位置:澳门娱乐场网址 > 计算机教程 > jQueryUI中的datepicker使用方法详解澳门娱乐场网址

jQueryUI中的datepicker使用方法详解澳门娱乐场网址

来源:http://www.ablakeforum.com 作者:澳门娱乐场网址 时间:2019-06-29 08:13
先说datepicker。 github上的地址是:https://github.com/eternicode/bootstrap-datepicker。

效果如下:

jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。

澳门娱乐场网址 1

之前做的一个排班考勤系统,跟时间打交道较多,对时间控件做过一些对比,觉得jqueryUI里的这个datepicker更为实用,下面抽点时间给大家整理,方便以后查阅,同时也希望能帮助到大家!

在bundle里面引用添加js 和 css的引用。

bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/datepicker3.css"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js", "~/Scripts/bootstrap-datepicker.js", "~/Scripts/bootstrap-datepicker.zh-CN.js"/*中文语言包*/ )); 

然后是html页面代码,很简单,一个标签即可:

<input type="text" class="datepicker" placeholder="请选择日期" />

1,引入js,css

然后是写js格式化:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
<script src="http://www.ablakeforum.com/uploads/allimg/190629/0Q32aY9-1.jpg"></script>
<script src="http://www.ablakeforum.com/uploads/allimg/190629/0Q3293404-2.jpg"></script>
<script type="text/javascript">      $(function () {          $(".datepicker").datepicker({              language: "zh-CN",              autoclose: true,//选中之后自动隐藏日期选择框              clearBtn: true,//清除按钮              todayBtn: true,//今日按钮              format: "yyyy-mm-dd"//日期格式,详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format          });      });  </script>

这个大概不需多说,datepicker是基于jqueryUI的控件,而使用jqueryUI肯定要先引入jquery.js

如此,基本的功能就实现了,比较容易。

2,配置属性**
**

datepicker有一系列的方法,比如获取/设置日期,基本的格式是:

在刚刚接触这个插件前,我也是网上各种找资料,但是找的大多都比较杂,各种属性全盘有序无序的列出来,挑不出重点。其实我们一个日常的使用不需要那么多,为了快速查看并使用,我这里直接在方法体列举用得最多的几个属性:

$('.datepicker').datepicker('method', arg1, arg2);
<input id="testDatepicker" class="test-datepicker" placeholder="请选择日期.."/> 
<script type="text/javascript">
$("#testDatepicker").datepicker({
showAnim: 'slideDown',//show 默认,slideDown 滑下,fadeIn 淡入,blind 百叶窗,bounce 反弹,Clip 剪辑,drop 降落,fold 折叠,slide 滑动
minDate: -1,//最小日期,可以是Date对象,或者是数字(从今天算起,例如 7),或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如:' 1m  7d')。
maxDate:  17,//最大日期,同上
defaultDate :  4, //默认日期,同上
duration : 'fast',//动画展示的时间,可选是"slow", "normal", "fast",''代表立刻,数字代表毫秒数
firstDay : 1 ,//设置一周中的第一天。默认星期天0,星期一为1,以此类推。
nextText : '下一月',//设置“下个月”链接的显示文字。鼠标放上去的时候
prevText : '上一月',//设置“上个月”链接的显示文字。
showButtonPanel: true,//是否显示按钮面板 
currentText : '今天',//设置当天按钮的文本内容,此按钮需要通过showButtonPanel参数的设置才显示。
gotoCurrent : false,//如果设置为true,则点击当天按钮时,将移至当前已选中的日期,而不是今天。
}); 
</script>

比如获取当前日期:

3,常用事件

$(".datepicker").datepicker("getDate").toLocaleString();//获取  $(".datepicker").datepicker("setDate", '2014-01-25');//设置

datepicker提供了相关事件,在实际开发中最常用的无非就是这三个,打开前beforeShow,关闭后onClose,onselect选中,我们可以通过控制台打印相关参数调试一下具体怎么使用,这样更能加深对插件的认知:

这个datepicker有个比较实用的功能,很多情况下我们给客户选择的是一个时间段,所有要求开始时间必须小于结束时间,这个功能datepicker已经帮我们实现了。
添加如下html标签:

$("#testDatepicker").datepicker({
onselect: function(dateText, inst){//选中事件
console.log("onselect, dateText",dateText);
console.log("onselect, inst",inst);
},
beforeShow : function(input){//日期控件显示面板之前
console.log("beforeShow, input",input);
},
onClose : function(dateText, inst){//当日期面板关闭后触发此事件(无论是否有选择日期)
console.log("onClose, dateText",dateText);
console.log("onClose, inst",inst);
}
});
<div class="input-group input-medium date-picker input-daterange" data-date-format="yyyy-mm-dd">      <input name="dtBegin" class="form-control" style="font-size: 13px;" type="text" value="">      到      <input name="dtEnd" class="form-control" style="font-size: 13px;" type="text" value="">  </div>

这里说一下onselect事件,一般我们实际项目中都会两个日期选择框,如一个开始日期,一个结束日期。那么我们肯定是会要做开始日期必须小于结束日期的校验,而我们通过onselect事件去改变另外一个日期框的最大/小日期即可做到输入的控制,如图:

两个input放在一个div中,格式相关的可以在div中设置,不需要后面每个重新设置。

澳门娱乐场网址 2澳门娱乐场网址 3

执行如下js:

html:

本文由澳门娱乐场网址发布于计算机教程,转载请注明出处:jQueryUI中的datepicker使用方法详解澳门娱乐场网址

关键词:

上一篇:linux卸载apache 澳门娱乐场网址php mysql

下一篇:没有了