如何获取Multidatepicker MDP选中总天数并显示到输入框

数据老陈

2026-5-26

获取Multidatepicker选中天数并填入输入框

没问题，这个需求很好实现！Multidatepicker本身提供了获取选中日期的方法，我们只需要监听日期选择的变化，计算选中天数再更新到输入框就可以了。

解决方案步骤：

利用MDP的getDates()方法获取所有选中的日期数组，数组的长度就是选中的天数
通过onSelect回调监听每次日期选择/取消的操作，实时更新输入框的值
页面初始化时也要同步一次初始选中的天数（避免默认选中日期时输入框为空）

修改后的完整代码：

// 初始化多日期选择器
$('#mdp-demo').multiDatesPicker({
  numberOfMonths: [1,2],
  altField: '#altField',
  minDate: 2,
  // 每次选择/取消日期时触发
  onSelect: function() {
    // 获取选中的日期数组
    const selectedDates = $(this).multiDatesPicker('getDates');
    // 将天数填入目标输入框，记得替换#dayCount为你实际的输入框ID
    $('#dayCount').val(selectedDates.length);
  }
});

// 页面加载完成后，同步初始选中的天数（如果有默认选中项）
const initialSelected = $('#mdp-demo').multiDatesPicker('getDates');
$('#dayCount').val(initialSelected.length);