如何通过同时单击一天来设置 Materialise Datepicker 的样式

Question

我正在使用 Materialise Datepicker 在列表中切换假期。根据我的代码，当我点击一天时，事件是 added/removed to/from 列表同时发生。但是，对于日期选择器中的样式，只有在我点击另一天或重新启动日期选择器时才会更新。 Here 是 Materialise Pickers 的文档。

我添加了 7 月 1 日和 20 日作为示例。您可以尝试 add/remove 其他几天。

我希望日期选择器中的样式也像列表一样同步更新。有什么想法吗？

提前致谢。

var holidays = [1625086800000, 1626728400000];

var datepicker = document.querySelector('#addHoliday')

var options = {
  showClearBtn: true,
  events : holidays.map ((day) => {return new Date(day).toDateString()}),
  onSelect : (day) => {
    var index = holidays.indexOf(day.valueOf())
    if(index > -1) {
        holidays.splice(index,1)
    } else {
      holidays.push(day.valueOf())
      holidays.sort()
    };
    M.Datepicker.getInstance(document.querySelector('#addHoliday')).options.events = holidays.map ((day) => {return new Date(day).toDateString()})
    
    disposeHolidays()   
  }
}

M.Datepicker.init(datepicker, options)
disposeHolidays()

function disposeHolidays () {
  holidaysList.innerHTML = holidays.map ((day) => {
    return '<li class="collection-item">' + new Date(day).toDateString() + '</li>'}).join('')
}

.has-event {
  background : #FF6666 !important
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="row">
  <div class="input-field col s6 l3 offset-s1 offset-l1">
    <input type="text" class="datepicker" id="addHoliday">
    <label for="addHoliday">Pick a date</label>
    
    <div class="row">
      <ul class="collection" id="holidaysList">
      </ul>
    </div>
  </div> 
</div>

Answer 1

浏览了源代码。有一个未记录的 'draw' 方法可以更新 HTML。试试这个。

var holidays = [1625086800000, 1626728400000];

var datepicker = document.querySelector('#addHoliday')

var options = {
  showClearBtn: true,
  events: holidays.map((day) => {
    return new Date(day).toDateString()
  }),
  onSelect: (day) => {
    var index = holidays.indexOf(day.valueOf())
    if (index > -1) {
      holidays.splice(index, 1)
    } else {
      holidays.push(day.valueOf())
      holidays.sort()
    };

    var instance = M.Datepicker.getInstance(datepicker);
    instance.options.events = holidays.map((day) => {
      return new Date(day).toDateString()
    })
    instance.draw(true);

    disposeHolidays()
  }
}

M.Datepicker.init(datepicker, options)
disposeHolidays()

function disposeHolidays() {
  holidaysList.innerHTML = holidays.map((day) => {
    return '<li class="collection-item">' + new Date(day).toDateString() + '</li>'
  }).join('')
}

.has-event {
  background : #FF6666 !important
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="row">
  <div class="input-field col s6 l3 offset-s1 offset-l1">
    <input type="text" class="datepicker" id="addHoliday">
    <label for="addHoliday">Pick a date</label>
    
    <div class="row">
      <ul class="collection" id="holidaysList">
      </ul>
    </div>
  </div> 
</div>

如何通过同时单击一天来设置 Materialise Datepicker 的样式

How to style Materialize Datepicker by clicking on a day simultaneously

html

javascript

datepicker

materialize