jQuery ui使用datepicker插件实现了minDate和maxDate

要使用jQuery ui，首先应该介绍jQuery类库、jqueryujs脚本和jQuery ass样式表。代码示例如下：复制的代码如下： Script src=' http 3360 js/jQuery-1 . 7 . 1 . js '/Script Script src=' http 3360 js/jQuery-ui-1 . 8 . 18 . custom . min . js '/Script rel='样式表' type=' text/CSS ' href=' CSS/smooth/jQuery-ui-1 . 8 . 18 . custom . CSS '注意：引入js script时，这里有两个实现步骤：第一步是实现两个datepicker组件。您需要定义两个输入标签，类型是文本，并指定id属性。HTML代码如下。复制代码如下：开始日期：输入类型='text' id='start '结束日期：输入类型='text' id='end '获取js代码中两个输入元素的jQuery对象。并将其转换为datepicker组件的Js代码。复制代码如下： $(文档)。ready (function () {$ ('# start '))。datepicker()；$('#end ')。datepicker()；});完成上述操作后，单击页面上的文本框。如果日期选择器出现，则表示成功。步骤2设置开始和结束日期当选择开始日期的值时，结束日期的最小值应该是开始日期；同样，当选择结束日期时，开始日期的最大值应为结束日期。我们可以使用datepicker中的onSelect属性设置选择指定日期后触发的事件，并通过该事件指定相应的datepicker最小日期或最大日期。Js的代码如下： $ ('# start ')。dateppicker({ on select :函数(datetext，inst) {$ ('# end ')。datepicker ('option '，' mindate '，datetext)；}});$('#end ')。dateppicker({ OnSelect3360 FuncTion(DateText，inst){ $('#start '))。datepicker('option '，' maxDate '，DateText)；}});注意：匿名函数中的日期文本属性是当前选定日期的字符串。想法二：第一步是同时获取两个文本框对象。并将其转换为datepicker(使用jQuery的选择器)。HTML代码如下。复制代码如下：开始日期：输入类型='text' id='start '结束日期：输入类型='text' id='end'Js代码如下。复制代码如下： var date=$(' # start，# end ')；date . datepicker()；在第二步中，选择日期后，将触发onSelect事件，并调用函数来传递selectedDate参数。在函数体中，首先判断事件是由开始日期还是结束日期触发，然后指定并设置minDate或maxDate。然后，使用not()函数反向选择另一个datepicker对象，并设置其相应的属性。Js的代码如下：复制代码如下： dates . dateppicker({ on select : function(selected date){ var option=this . id==' start '？'minDate ' : ' maxDate不是(这个)。datepicker('option '，option，selected date)；}});这样，设置一方后，另一方就会受到限制。效果如图：。