https://www.gtv.com.tw/blog/src/mods/renderer_date_picker.js

1import { getDate } from './utility.js'
2
3const ICON = '<i class="fa fa-calendar"></i>'
4const DEFAULT_SEPARATOR = '/'
5
6
7
8class DatePickerRenderer {
9
10    constructor() {
11        this._counter = 0
12        this._dateIntervals = {}
13        this._pickers = {}
14    }
15
16    /**
17     * 計數器
18     */
19    get counter() {
20        return this._counter
21    }
22    set counter(data) {
23        this._counter = data
24    }
25
26    /**
27     * @param {Object} input
28     * @param {*} input.container - 日期選擇器渲染對象
29     * @param {String} input.text - 按鈕顯示文字
30     * @param {String} input.size - 按鈕大小 e.g. 'short', 'longest thicker'
31     * @param {String} input.id - 按鈕 id
32     * @param {Boolean} input.singleDatePicker - 是否非選定區間
33     * @param {Object} input.pickedDate - 已選定區間
34     * @param {String} input.pickedDate.start
35     * @param {String} input.pickedDate.end
36     * @param {String} input.additionalClass - [option] 自訂類別 
37     * @param {Boolean} input.readonly - [option] 是否唯獨
38     * @param {function} input.onChange - 變更日期後的事件(測試)
39     * @param {boolean} input.alignLeft -  [option] 顯示日期是否置左, 預設:置中
40     */
41    render(input) {
42        if (!input.container) return false
43        if (this._dateIntervals[input.id]) this._dateIntervals[input.id] = null
44        this.counter += 1
45
46        let renderer = this
47        let id = input.id ? input.id : `m-dp${this.counter}`
48        let text = input.text ? input.text : input.singleDatePicker ? '請選擇日期' : '請選擇區間'
49        //let daterangepicker
50
51        let thePickBar = $(`<span class="date-picker-btn ${input.size ? input.size : ''} ${input.additionalClass ? input.additionalClass : ''}${input.readonly ? ' readonly' : ''}${input.alignLeft ? ' left' : ''}" id="${id}"><i class="fa fa-calendar"></i>${text}</span>`)
52            .on('apply.daterangepicker', function (ev, picker) {
53                renderer._dateIntervals[input.id] = {
54                    start: picker.startDate.format(`YYYY${DEFAULT_SEPARATOR}MM${DEFAULT_SEPARATOR}DD`),
55                    end: picker.endDate.format(`YYYY${DEFAULT_SEPARATOR}MM${DEFAULT_SEPARATOR}DD`)
56                }
57                this.innerHTML = input.singleDatePicker ?
58                    `${renderer.getResult(input.id).start}` :
59                    `${renderer.getResult(input.id).start} 至 ${renderer.getResult(input.id).end}`
60                // 重置這個picker
61                $(this).on('clear', () => {
62                    $(this).html(`${ICON}${text}`)
63                })
64                if (input.onChange) {
65                    input.onChange(this.innerHTML)
66                }
67            })
68            .appendTo($(input.container))
69            .daterangepicker({
70                locale: {
71                    format: `YYYY${DEFAULT_SEPARATOR}MM${DEFAULT_SEPARATOR}DD`
72                },
73                showDropdowns: true,
74                linkedCalendars: false,
75                singleDatePicker: input.singleDatePicker ? input.singleDatePicker : false,
76                startDate: input.pickedDate && input.pickedDate.start && input.pickedDate.start != '' ? new Date(input.pickedDate.start) : new Date(),
77                endDate: input.pickedDate && input.pickedDate.end && input.pickedDate.end != '' ? new Date(input.pickedDate.end) : new Date()
78            })
79            .on('show.daterangepicker', function (e, picker) { // 用類別設定鎖定狀態(測試，不穩定)
80                if (thePickBar.hasClass('readonly')) {
81                    $(picker.container[0]).hide()
82                }
83            })
84        if (input.pickedDate && input.pickedDate.start) {
85            this.innerHTML = input.singleDatePicker ? getDate(input.pickedDate.start) : `${getDate(input.pickedDate.start)} 至 ${getDate(input.pickedDate.end)}`
86            $(thePickBar).html(this.innerHTML)
87            renderer._dateIntervals[input.id] = {
88                start: input.pickedDate.start,
89                end: input.singleDatePicker ? input.pickedDate.start : input.pickedDate.end
90            }
91        }
92
93        this._pickers[id] = {
94            id: id,
95            bar: thePickBar,
96            clear: () => {
97                thePickBar
98                    .html(`<i class="fa fa-calendar"></i>${text}`)
99                this._dateIntervals[id] = null
100            }
101        }
102
103        return thePickBar
104    }
105
106    getResult(pickerID) {
107        let res = this._dateIntervals[pickerID] ? this._dateIntervals[pickerID] : { start: null, end: null }
108        return res
109    }
110
111}
112
113
114
115export default DatePickerRenderer