Without jQuery-based date component with support for date ranges, muitiple calendars and more.
- el:
- type: Element
- required:
true
- description: Calendar container
- trigger:
- type: Element
- required:
true
- description: Provoke DatePicker show and hide
- eg:
input element
(onfocus show the DatePicker)
- defaultDate:
- type: String
- default:
'today'
- eg:
'2017-04-15'
- description: Default selected date
- isRadio:
- type: Boolean
- default:
false
- description: Is it date radio selected?
- lang:
- type: String
- options:
'EN'
|'CN'
- default:
'EN'
- description: The font language, for
CN
will use Chinese, forEN
will use English
- position:
- type: String
- options:
'top'
|'right'
|'left'
|'bottom'
- default:
'bottom'
- selectInterval:
- type: Array
- default:
[1970, 2030]
- eg:
[2000, 2020]
- description: Select abled range
- showFn:
- type: Function
- description: After show callback
- hideFn:
- type: Function
- description: After hide callback
- onchange:
- type: Function
- description: callback which observe datePicker change
- show:
- type: Function
- hide:
- type: Function
-
manually import
calendar.css
andcalendar.js
-
create DatePicker contructor, for below:
<input type="text" id="datePicker"> <span id="calendar"></span>
var dateComponent = new DatePicker({ el: document.querySelector('#calendar'), onchange: function (curr) { dateInput.value = curr; } }); var dateInput = document.querySelector('#datePicker'); dateInput.onfocus = function () { dateComponent.show(); };