Toast ui(tui) datepicker 如何重置更改日期？

Question

如何在 tui datepicker 中重置所选日期

let calendarNum = document.querySelectorAll('.calendar').length;
  for(let i = 0; i < calendarNum; i++){
  let container = document.querySelectorAll('.calendar')[i];
  let dateInput = document.querySelectorAll('.datepicker-input')[i];
  let instance = new tui.DatePicker(container, {
      language: 'en',
      input: {
        element: dateInput,
        format: 'dd.MM.yyyy',
      },
    });
  }

<div class="group-input gi-date">             <div class="date-picker-wrap">              <div class="tui-datepicker-input tui-datetime-input tui-has-focus">                 <input type="text" name="date-before" class="date-input datepicker-input" aria-label="Date-Time">                             <span class="tui-ico-date"></span> </div>
    <div class="calendar" style="margin-top: -1px;"></div>
  </div>
</div>

enter link description here

Answer 1

至少有两种方法可以做到这一点：

• 首先，您可以简单地将日期选择器的值设置为null：

  document.querySelector("input.datepicker-input").value = null

• 其次，可以在datepicker对象上调用setNull()方法：

  instance.setNull()

以下是基于您的代码的两种方法的示例。 注意，由于 tui 试图在沙盒环境中访问 localStorage，此 sn-p 可能会在 Stack Overflow 上给出脚本错误。如果发生这种情况，您可以view the snippet on JSFiddle instead。

let calendarNum = document.querySelectorAll('.calendar').length;

let container = document.querySelectorAll('.calendar')[0];
let dateInput = document.querySelectorAll('.datepicker-input')[0];
let instance = new tui.DatePicker(container, {
  language: 'en',
  input: {
    element: dateInput,
    format: 'dd.MM.yyyy',
  },
});


function setNull1() {
  document.querySelector("input.datepicker-input").value = null;
}

function setNull2() {
  instance.setNull();
}

<link rel="stylesheet" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.js"></script>
<div class="group-input gi-date">
  <div class="date-picker-wrap">
    <div class="tui-datepicker-input tui-datetime-input tui-has-focus"> <input type="text" name="date-before" class="date-input datepicker-input" aria-label="Date-Time"> <span class="tui-ico-date"></span> </div>
    <div class="calendar" style="margin-top: -1px;"></div>
  </div>
</div>
<button type="button" onclick="setNull1();">
Reset By Setting Value to Null
</button>
<button type="button" onclick="setNull2();">
Reset By Calling setNull()
</button>