Question

我们正在使用ng2-bootstrap DatePicker让用户选择多个日期。我们想突出显示＆＃34;选择＆＃34;选择器中的日期。好像＆＃34; customClass＆＃34;财产应该是这样做的方式，但我还没有能够让它工作 - 我也没有看到任何使用它的例子。那里有人有一个简单的例子吗？

Answer 1

遇到同样的问题，不得不在Github上挖掘代码。在我的例子中，我有一个开始日期和结束日期，我想在两者之间的所有日子里设置样式。

我使用的是Moment.js，它处理了很多逻辑来生成天数。 DateRangeUtils是一个自定义助手类。

重要的是要知道模式是日期选择器的模式（日，月或年）。在我的例子中，我们只使用日期模式。

＆＃13;

var recipesCollection = db.collection("recipes");
        exports.getAllRecipes = function() {
            return recipesCollection.find({}).toArray();
        };

＆＃13;

export class CustomDayStyle {
    public date: Date;
    public mode: string;
    public clazz: string;

    constructor(date: Date, mode: string, clazz: string) {
        this.date = date;
        this.mode = mode;
        this.clazz = clazz;
    }
}

private get selectedDays(): Array<CustomDayStyle> {
  var days = new Array<CustomDayStyle>();

  var dateIndex = DateRangeUtils.toMoment(this.beginDate);
  while (!DateRangeUtils.isAfter(dateIndex, this.endDate)) {
    days.push(new CustomDayStyle(dateIndex.clone().toDate(), "day", "class-name-here"));
    dateIndex.add(1, 'days');
  }

  return days;
}

＆＃13;

.class-name-here {
   // Your css here
 }

＆＃13;

如何使用ng2-bootstrap DatePicker的customClass属性？

1 个答案: