Add date picker block

[bartbutenaers]

Beside to the timestamp-block, it would be nice if a user could enter a date/time in a datetime picker:

This is supported by Blockly as the field_date block:

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

However got an error that the field_date widget doesn't exist. Seems that that widget increases the library size with 30%, so Google has commented it. When you want to use it, you need to uncomment those lines and build Blockly yourself again. There is a proposal for a workaround (widget in a separate .js file), but don't think that is available yet...

Here is the explanation by Andrew.

[bartbutenaers]

Perhaps we should also add a time block. Or a timestamp block. Here is another date picker.

And another proposal from the blockly forum:

For time input blocks, I use 2 number fields for hours and minutes, followed by a dropdown field for am/pm. I added a feature to the number field to pad the minutes with a leading zero when the number < 10 so my block would show "1:05" instead of "1:5"

[bartbutenaers]

@cymplecy, @jsccjj, This is an old issue. But luckily the Blockly team has meanwhile created a separate NPM module for the date picker: see @blockly/field-date.

This module is added as a dependency in our node, so it is automatically installed. Our endpoint serves the files to the browser.

Short demo of the standard date picker, which I have added to our "Date/time" category:

P.S. It always uses format yyyy-mm-dd, which can be passed directly to the Date constructor (as you can see in the generated Javascript code).

Weekend is over ;-(

[cymplecy]

It looks nice :)

[bartbutenaers]

I'm going to close this issue. If it doesn't work as expected, it can be reopened afterwards.