Register for the online Blockly Developer Summit April 28-29, 2021!

Date fields

A date field stores a string as its value, and a string as its text. Its value and text both have the format YYYY-MM-DD.

Date field

Date field with editor open

Date field on collapsed block



  "type": "example_date",
  "message0": "date: %1",
  "args0": [
      "type": "field_date",
      "name": "FIELDNAME",
      "date": "2020-02-20"


Blockly.Blocks['example_date'] = {
  init: function() {
        .appendField(new Blockly.FieldDate('2020-02-20'), 'FIELDNAME');

The date field constructor takes in an optional value and an optional validator. The value should be a string in the format YYYY-MM-DD. Otherwise the current (today's) date will be used.

Serialization and XML

The XML for a date field looks like so:

<field name="FIELDNAME">2020-02-20</field>

The field node's name attribute contains a string referencing a date field, and the node's inner text is the value to apply to the field. The inner text value follows the same rules as the constructor value.

Creating a date validator

A date field's value is a YYYY-MM-DD format string, so any validators must accept a YYYY-MM-DD format string, and return a YYYY-MM-DD format string, null, or undefined.

Note when validating a date it may be useful to use Closure's date class.

Here is an example of a validator that only accepts weekdays:

function(newValue) {
  var date =;
  var weekday = date.getWeekday();
  if (weekday == 0 || weekday == 6) {
    return null;
  return date.toIsoString(true);