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 
})