jQuery UI库中的Datepicker插件的基本用法

Datepicker插件是一个用于日期选择的插件，它提供了灵活的配置选项，可以自定义日期选择器的展示方式、日期

Datepicker插件是一个用于日期选择的插件，它提供了灵活的配置选项，可以自定义日期选择器的展示方式、日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。

基本日期选择器的用法

//html
<input type="text" id="datepicker">

//引入jQuery和jQuery UI库，并初始化Datepicker插件
$(function() {
  $("#datepicker").datepicker();
});

日期修改触发事件

$(function() {
  $("#datepicker").datepicker({
    onSelect: function(dateText, inst) {
      // 获取选择的日期
      var selectedDate = $(this).val();
      // 在控制台输出选择的日期
      console.log(selectedDate);
      // 在此处编写相关事件触发的代码
    }
  });
});

计算日期间隔天数

//html
<input type="text" id="startDate">
<input type="text" id="endDate">

//js
$(function() {
  $("#startDate, #endDate").datepicker({
    onSelect: function(dateText, inst) {
      var startDate = $("#startDate").datepicker("getDate");
      var endDate = $("#endDate").datepicker("getDate");
 
      if (startDate && endDate) {
        var timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
        console.log("间隔天数：" + diffDays);
      }
    }
  });
});

相关文章