日期選擇器 - Datepicker

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="datepicker" data-datepicker>
  <input class="input date-input" data-date />
</div>

<br>
<br>

<div class="datepicker" data-datepicker>
  <input class="input date-input" data-date />
  <input class="input time-input" data-time />
</div>

<br>
<br>
<input class="input time-input" data-timepicker />

<br>
<br>
<div data-date-menu></div>


<br>
<br>
<div class="monthpicker" data-monthpicker>
  <input class="input date-input" data-month />
</div>
<br>
<br>
<div data-month-menu></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import intlReady from '../../assets/js/intlReady'
import set from 'date-fns/set'

export default function bindDatepickers() {
  const { DateMenu, Datepicker, Timepicker, MonthMenu, Monthpicker, $$ } = window.beyond
  const dateToTimestamp = date => parseInt(+date / 1000, 10)

  let datepickers = []
  let timepickers = []
  let monthpickers = []
  let dateMenus = []
  let monthMenus = []
  let unbound = false

  intlReady()
    .then(() => {
      if (unbound) {
        return
      }
      const timestamp = dateToTimestamp(new Date())
      datepickers = Array.from(document.querySelectorAll('[data-datepicker]'))
        .map(dom => new Datepicker(dom, timestamp))

      timepickers = Array.from(document.querySelectorAll('[data-timepicker]'))
        .map(dom => new Timepicker(dom, timestamp))


      monthpickers = $$('[data-monthpicker]')
        .map(dom => {
          const date = new Date()
          return new Monthpicker(dom, { date })
        })

      const date = new Date()

      dateMenus = Array.from(document.querySelectorAll('[data-date-menu]'))
        .map(dom => new DateMenu({ date, options: { dom, isStatic: true } }))
        .map(d => {
          d.on('td-click', (event, res) => {
            const { year, month, date } = res
            const newDate = set(new Date(), { year, month, date })
            d.setDate({ startDate: newDate })
          })
          d.setDate({ date, startDate: date })
          d.show()
          return d
        })

      monthMenus = $$('[data-month-menu]')
        .map(dom => {
          return new MonthMenu({
            dom,
            date: new Date()
          })
        })
    })

  return function unbindDatepickers() {
    unbound = true
    datepickers.forEach(d => d.destroy())
    timepickers.forEach(d => d.destroy())
    monthpickers.forEach(d => d.destroy())
    dateMenus.forEach(d => d.destroy())
    monthMenus.forEach(d => d.destroy())
  }
}