Pick a date! But only if you're using Mithril, and only for flexbox-capable browsers.

mithril-datepicker at flems.io

via npm:

npm install mithril-datepicker

You'll want to bring in either src/style.sass or src/style.css, depending on your workflow.

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

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.

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.

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.

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