<px-date-selector>
<px-date-selector> is a custom web component that is used in the Pixfizz CMS to select the starting date for a calendar or a planner project.
We're trying to keep web components minimal to avoid the need for any external JS dependencies.
<px-date-selector> is basically a collection of up to three select elements - for selecting the starting year, month, and day.
The day select only makes sense for daily or weekly calendars and is otherwise omitted. Currently the <px-date-selector> component accepts a start-date attribute in the format yyyy-mm-dd for setting the default date. If the start-date attribute is not present, it defaults to the first day of the next month. The start-date option is not convenient because it requires updating the hardcoded date every year.
It is also possible to set the default month by adding a default parameter on the px-date-month-selector, which can take a month number in the range of 1 to 12. If start-date is given, default is be ignored. But if start-month is not set, the starting date should default to the 1st day of the given month by choosing the year so that the constructed date is closest to the current date. For example, if default="1" and it's February 3rd 2023 today, the start date should default to 2023-01-01, but if today is July 20th, it should default to 2024-01-01.
On the px-date-year-selector, it is possible to define the set of year options that is available to the end user. It can simply be managed by setting a min and max parameter. For example, if the current date is June 1, 2023 and you have parameters set to min="-1" max="2", the user will have the following year options available to them: 2022, 2023, 2024, 2025. One year minus the current and two years plus the current one.
The below example has a wide range of parameters to demonstrate the possibilities, but is not intended to be simply copied and pasted to your site. Please carefully consider the values.
Last updated