Integration with JSON
Generally, the data which is received from the server is serialized in a JSON format.
The date object in JSON is an ISO8601-formatted date string. For more details, refer to the documentation on the JSON.stringify method. On the other hand, the Calendar works only with JavaScript Date instances.
To bind the Calendar to dates which are serialized as strings, handle the parsing process:
- Convert the JSON date strings into valid JavaScript
Dateobjects by using theIntlServiceor any other suitableDateparser. - Define the
valueinput property of the component—the same approach applies to reactive and template-driven forms. - Wire the
valueChangeoutput property of the Calendar to get the selectedDatevalue.
JavaScript's
Dateconstructor treats date-only strings (for example,"2025-06-30") as UTC midnight, not as local time. When you convert such a string to local time, users in timezones behind UTC may see the wrong date. To avoid this issue, parse date-only strings using the date component constructor:new Date(year, month - 1, day). For more information, refer to the MDN documentation on creating Date objects.
The following example demonstrates how to set the value of the Calendar.