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 JSDateobject. Defaults to the current date.onchange: function to execute when a date is chosen. Receives the newly-chosenDateobject 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
})