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