Date pickers for tcomb-form

[gcanti]

Hi all, I wrote a simple date picker for tcomb-form https://github.com/gcanti/simple-date-picker if you want to give it a spin

Usage

import SimpleDatePicker from 'simple-date-picker'

function renderDate(locals) {
  return (
    <SimpleDatePicker
      value={locals.value}
      onChange={locals.onChange}
    />
  )
}

const dateTemplate = t.form.Form.templates.date.clone({ renderDate })

class DatePickerFactory extends t.form.Component {

  getTemplate() {
    return dateTemplate
  }

}

t.Date.getTcombFormFactory = () => DatePickerFactory

const Type = t.struct({
  birthDate: t.Date
})

[carbureted]

You may want to mention that it also requires the style react-day-picker styles to be imported as well, but this is great! Huge improvement over the default.

[grahamlyus]

Before looking at tcomb-form, I've been using this one: http://pushtell.github.io/react-bootstrap-date-picker/, which uses a Popover, so works better in a modal.

It works with an ISO String, not a Date, so it needs a transformer. Is there any way to set a default transformer for the template/factory, rather than having to specify it in the Form options?

import DatePicker from 'react-bootstrap-date-picker';

const dateTransformer = {
  format: (value) => t.Date.is(value) ? value.toISOString() : value,
  parse: (str) => str ? new Date(str) : null
};

const renderDate = (locals) => {
  return (
    <DatePicker value={locals.value} onChange={locals.onChange}/>
  );
}

const datePickerTemplate = Form.templates.date.clone({ renderDate });

class DatePickerFactory extends t.form.Component {
  getTemplate() {
    return datePickerTemplate;
  }
}

t.Date.getTcombFormFactory = () => DatePickerFactory;

[gcanti]

Before looking at tcomb-form, I've been using this one: http://pushtell.github.io/react-bootstrap-date-picker/, which uses a Popover, so works better in a modal.

Nice one! Thanks for sharing @grahamlyus

Is there any way to set a default transformer for the template/factory, rather than having to specify it in the Form options?

class DatePickerFactory extends t.form.Component {
  static transformer = dateTransformer // <= yep!
  getTemplate() {
    return datePickerTemplate
  }
}

[grahamlyus]

Great, thanks!