Pick a date! But only if you're using Mithril. (component for Mithril.js ^v1.0)

  • Users starred: 21
  • Users forked: 6
  • Users watching: 21
  • Updated at: 2019-10-11 01:38:50


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


mithril-datepicker at


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.

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'

  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