React, tcomb-form, and date fields

Setting my first date field up in tcomb-form, I followed the docs and used tcomb.Date as the field type:

const Person = t.struct({
  name: t.String,
  surname: t.String,
  email: t.maybe(t.String),
  age: t.Number,
  rememberMe: t.Boolean,
  birthDate: t.Date // a date field
});

Except that gave me this nightmarishly ugly dropdown date format:

Which accepts a Date object as its value – which this form makes really difficult since if you’re updating on form change, it tries to make a Date object after each change, which results in a lot of invalid dates. Fun.

Even more fun, the values in the month dropdown are in a 0-based array, meaning that when you pick January, you get “0” as your month value, which as you can guess, results in an invalid date.

After some headdesking, I discovered that if you designate the field’s tcomb type as a string and pass the HTML5 “date” type to the field in the form options, you get something a lot prettier (in this example I am using Bootstrap):

 fields: {
   birthDate: {
     label: 'Birth Date',
     type: 'date'
   }
}

Making this a lot easier to deal with on the front and back end.

Advertisement