You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

MultipleDatePicker设置问题:如何自定义选中非当前日期与年份?

解决MultipleDatePicker自定义选中日期的问题

看起来你在用的这个multiple-date-picker组件(基于AngularJS+Moment.js)默认选中当天,其实它可以通过绑定属性来自定义选中日期和默认显示的月份/年份,我来帮你一步步解决:


1. 绑定选中日期数组

这类多选日期组件通常会提供双向绑定属性来控制选中的日期,比如selected-dates。你需要在控制器中创建包含目标日期的Moment对象数组,再绑定到组件上:

控制器代码

angular.module('yourAppName').controller('YourController', function() {
  var vm = this;

  // 定义需要选中的日期,必须用Moment对象创建(组件依赖Moment,格式要匹配)
  vm.targetSelectedDates = [
    moment('2022-05-15'), // 2022年5月15日
    moment('2024-01-01')  // 2024年1月1日
  ];

  // 设置默认显示的月份(可选,直接跳转到指定年月)
  vm.defaultDisplayMonth = moment('2024-01-01');
});

修改后的HTML

<div ng-controller="YourController as vm">
  <multiple-date-picker 
    selected-dates="vm.targetSelectedDates"
    month="vm.defaultDisplayMonth"
    auto-select-today="false">
  </multiple-date-picker>
</div>

2. 关键属性说明

  • selected-dates: 双向绑定你的选中日期数组,数组元素必须是Moment.js对象(从你提供的代码片段里的moment()调用能看出组件依赖它)。
  • month: 绑定想要默认显示的月份/年份,同样用Moment对象,打开组件就会直接跳转到指定年月。
  • auto-select-today: 组件一般会有这个属性,设置为false就能取消默认选中当天的行为,避免和自定义选中日期冲突。

3. 验证组件的属性支持

如果你不确定属性名称,可以去组件源码里找scope定义部分,比如类似这样的代码:

scope: {
  selectedDates: '=',
  month: '=',
  autoSelectToday: '='
}

从你提供的代码片段里的scope.month可以确认month属性支持绑定,selected-dates(或类似命名,比如selectedDates)大概率也是存在的。

这样设置后,组件就会按照你指定的日期选中,并且默认显示你设置的年月啦。

内容的提问来源于stack exchange,提问作者Usman Iqbal

火山引擎 最新活动