mithril-datepicker
Pick a date! But only if you're using Mithril, and only for flexbox-capable browsers.
Demo
mithril-datepicker at flems.io
Installation
via npm:
npm install mithril-datepicker
You'll want to bring in either src/style.sass
or src/style.css
, depending on your workflow.
Usage
var DatePicker = require('path/to/mithril-datepicker.js')
var myDate = new Date(someSpecialDateYouHaveInMind)
m(DatePicker, {
date: myDate,
onchange: function(chosenDate){
// do your magic with your shiny new Date
}
})
API
There are 2 optional attributes you can pass in via the component's attrs
object:
-
date
: a valid JSDate
object. Defaults to the current date. -
onchange
: function to execute when a date is chosen. Receives the newly-chosenDate
object as its argument.
Theming
You can change the appearance easily by editing either style.css
or style.sass
,
whichever fits your workflow. If you're using SASS, you have a lot of quick-change UI based on variables at the top of the document.
Localization
mithril-datepicker
features 2 flavors of L10n: global and per-instance. In both cases, the English default names
for days of the week, months and the labels for the previous/next buttons can all be overridden, along with the week's
starting day.
ATTRIBUTE | TYPE | DESCRIPTION |
---|---|---|
locale |
String | BCP 47 language tag, eg. "fr" or "es" . Defaults to "en-us"
|
weekStart |
Int | 0-based weekday to present first, defaulting to 0 (Sunday) |
prevNextTitles |
[String] | Array of string labels for the prev/next increment buttons. Defaults to ["1 Mo", "1 Yr", "10 Yr"]
|
formatOptions |
Object | hash for the components of the formatted date for output to the display. The tested options are weekDay , day , month , year . See the MDN docs for the possible values. |
To globally set the language for all datepickers in your project:
var myOptions = {
weekday: 'short',
day: '2-digit',
month: 'short',
year: 'numeric'
}
DatePicker.localize({
weekStart: 1, // Monday
locale: 'es',
prevNextTitles: ['1 Me', '1 Añ', '10 Añ'],
formatOptions: myOptions
})
To set the language for a single datepicker, overriding the default/global setting, pass attrs
to the component:
m(DatePicker, {
date: myDate,
onchange: myOnchangeFn,
weekStart: 0, // override the global we set above
locale: 'fr',
formatOptions: myOptions
})