澳门贵宾会娱乐官网Js日期选择自动填充到输入框_javascript技巧_脚本之家

复制代码 代码如下:

使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui
css样式表。代码示例如下:

很漂亮、兼容火狐的Js日期选择,自动填充到输入框

复制代码 代码如下:

用法演示:
请选择日期:

注:引入js脚本时,需先引入jQuery类库,后引入jQuery ui 脚本

下面为两种实现步骤:

思路一:

第一步 实现两个datepicker组件。

需要定义两个input标签,类型为text,并指定id属性

HTML代码如下

复制代码 代码如下:开始日期:结束日期:

在js代码中得到两个input元素的jQuery对象,并将其转化为datepicker组件

Js代码如下

复制代码 代码如下: $.ready{
$.datepicker.datepicker;

实现以上操作后,在页面中点击文本框,如果出现datepicker则代表成功。

第二步 设置开始和结束日期

当选择开始日期的值后,则结束日期的最小值应该就是开始日期;同理,当选择结束日期后,开始日期的最大值则应该是结束日期。我们可以利用datepicker中的onSelect属性来设置当选择指定日期后触发的事件,通过该事件来指定对应的datepicker最小日期或最大日期。

Js代码如下

复制代码 代码如下:$.datepicker({
onSelect:function{ $.datepicker(“option”,”minDate”,dateText);
}});$.datepicker({ onSelect:function{
$.datepicker(“option”,”maxDate”,dateText); }});

注:匿名函数中的dateText属性为当前选择日期的字符串

思路二:

第一步 同时获得两个文本框对象,并将其转换为datepicker

HTML代码如下

复制代码 代码如下:开始日期:结束日期:

Js代码如下

复制代码 代码如下:var dates =
$;dates.datepicker();

第二步
同样在选择日期后,触发onSelect事件,调用函数传递selectedDate参数,

函数体中首先判断触发事件的是开始日期还是结束日期,通过该判断来指定设置minDate或者是maxDate,然后利用not()函数,来反向选择另一个datepicker对象,并设置其对应的属性。

Js代码如下

复制代码 代码如下:dates.datepicker({
onSelect: function{ var option = this.id == “start” ? “minDate” :
“maxDate”; dates.not.datepicker(“option”, option, selectedDate); }});

这样在设置一方后,另一方就会被限制了。

实现的效果如图:

发表评论

电子邮件地址不会被公开。 必填项已用*标注