Simple raw javascript bar-like datepicker.
npm install week-view> A simple mobile UI widget for picking a date within a period.
npm
``shell`
npm install week-view
ES2015 module import
`js`
import WeekView from 'week-view'`
Load it via ~~a link tag and~~ a script taghtml`
js
new WeekView(element[, options])
`
- element
- Type: CSS selector or HTMLElement
- The container for the widget, normally a div at the top of the page
- options (optional)
- Type: Object
- See Options below.
Options
$3
- Type: Number
- Default: 7Length of the period. Restricted in [1, 14].
$3
- Type: Date
- Default: new Date()Initial start date of the period.
$3
- Type: Date
- Default: new Date()Minimum date. If given is later than
startDate, it'll be set to startDate.$3
- Type: Date or null
- Default: nullMaximum date. If given is earlier than
minDate, it'll be set to null.$3
- Type: function
- Default: date => {}Function to be called when a date is selected.
Param:
Date - the date selected.$3
- Type: function
- Default: (oldStart, currentStart) => {}Function to be called when the period is changed.
Params:
-
oldStart - the old period's start date
- currentStart - current period's start date$3
- Type: Boolean
- Default: trueWhether to show the header, which contains header text and prev/next buttons.
$3
- Type: function
- Default: date => date.toLocaleDateString()Header text.
Param:
Date - the date selected.$3
- Type: Object
- Default: {}A set of key-value pairs where key is your custom css class, and value is a function who receives a
Date and returns Boolean. The class will be added to corresponding cell element when the function returns true.e.g.
`js
{
'week-end': date => return [6,0].includes(date.getDay())
}
`
will add 'week-end' on weekend cells.$3
- Type: Array
- Default: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']Day texts from Sunday to Saturday.
API
$3
- start
- Type: Date
- offset (optional)
- Type: Number
- (return value)
- Type: thisSet the period starting from
start, set offsetth date in the period selected.$3
- (return value)
- Type: thisRe-render current period, e.g. new options set.
$3
- options
- Type: Object
- (return value)
- Type: thisSet new options for the instance, automatically refresh.
>
num, startDate, minDate, maxDate are not supported.$3
- date
- Type: Date
- (return value)
- Type: thisTry to set the given date selected.
$3
Destroy the instance.
$3
- Type: ArrayDates within the current period.
$3
- Type: Date`Selected date.
MIT.