Date widget/input appears to save inconsistent to display

1
votes

I figure that this is some timezone/UTC issue - but I can't quite figure it out.

I have setup Netlify CMS on my Gatsby website using the following config.yml:

backend:
  name: git-gateway
  branch: master

publish_mode: editorial_workflow

media_folder: src/images/uploads
public_folder: /uploads

collections:
  - name: "tourInfo"
    label: "Tour Info"
    files:
      - file: "static/json/tours.json"
        label: "Tours"
        name: "tours"
        fields:
          - {label: "Tour", name: tour, widget: list, fields: [
            {label: "Date", name: date, widget: "date"},
            {label: "Spaces", name: spaces, widget: "number"},
            {label: "Booked", name: booked, widget: "number", required: false} ]}

I've used this to create tour dates but on doing so there's inconsistencies:

Date selector

On selecting a date through the CMS the date appears correct as above.

But then the date is saved as:

Inconsistent date

This is obviously inconsistent with the date which I input.

This behaviour is also consistent across all entered dates fetched via Gatsby on the front end:

[
   {
      "date":"2019-04-03T23:35:50.291Z",
      "spaces":6,
      "booked":6
   },
   {
      "date":"2019-04-17T23:36:08.718Z",
      "spaces":6,
      "booked":null
   },
   {
      "date":"2019-05-01T23:36:19.622Z",
      "spaces":6,
      "booked":null
   },
   {
      "date":"2019-05-15T23:36:33.206Z",
      "spaces":6,
      "booked":null
   },
   {
      "date":"2019-06-05T23:36:49.265Z",
      "spaces":6,
      "booked":null
   },
   {
      "date":"2019-06-19T23:37:09.924Z",
      "spaces":6,
      "booked":6
   }
]

They're all a day out.

I suspect this is some type of timezone issue? My locale is currently on BST.

Surely when working with the date widget time shouldn't matter - why does Netlify even have to save a time? I'm only inputting a date.

How can I rectify this? So when I enter 2019/04/04 I get 2019/04/04?

2
datetimetimegatsbynetlifynetlify-cms

2 Answers

1
votes

There is the ability to set the format for date in NetlifyCMS.

Example

{label: "Date", name: date, widget: "date", dateFormat: "YYYY-MM-DD", "format": "YYYY-MM-DD"},
  • dateFormat is the widget output
  • format is the data output

These formats are moment based formatting.

See Docs

0
votes

We can do this to disable the the date calendar only keeps the time selector: Inside config.yml file, just need to write down something commands like this: 

name: 'end_time'
label: 'End Time'
widget: 'datetime'
format: 'HH:mm A'
dateFormat: false
timeFormat: true

It will looks like this:

enter image description here