红红火火恍恍惚惚

Jquery UI 日历插件 datepicker 动态修改时间范围

由 吉光片羽 在 7 年前

Jquery UI 日历插件 datepicker 动态修改时间范围钱端攻城狮

本来以为会有相关的API,结果没找到,最后用了最笨的办法,先销毁再实例化,这里做个笔记:

场景一:

HTML结构

<select>
  <option value="spring">春季</option>
  <option value="fall">秋季</option>
</select>
<input type="date">

JS代码

//构造若干个时间段
var period={
  spring:["2016-02-04","2016-05-05"],
  fall:["2016-08-07","2016-11-07"]
};
//选项改变时触发日历控件
$("select").change(function(){
  var between=period[$(this).val()];
  //首先销毁再重构
  $("input").datepicker("destory").datepicker({
    minDate:between[0],
    maxDate:between[1]
  });
}).change();//直接触发日历控件

如果你有更好的办法,感谢评论指教!

场景二:

HTML结构

<input type="date" id="min">
<input type="date" id="max">

JS代码

//实例化日历控件
var $min=$("#min"),$max=$("#max");
$min.datepicker({
  minDate:$min.val(),
  maxDate:$max.val(),
  onSelect:function(){
    $max.datepicker("option","minDate",this.value);
  })
});
$max.datepicker({
  minDate:$min.val(),
  maxDate:$max.val(),
  onSelect:function(){
    $min.datepicker("option","maxDate",this.value);
  })
});

第二个场景比较常见,此处仅供参考。

猜你喜欢 Related Posts

各抒己见 Comment

名称

邮箱

主页

微信阅读量 微信阅读量 2019-02-14 21:13:42 | 回复 第一个留言!0 0