[Feature] Change first day of the week on the date-picker widget

[ayushpahwa]

Summary

We should be able to change the first day of the week on the date picker widget.

Motivation

As requested by a user on discord.

[Hyperion101010]

Looks good can i pick this up @ayushpahwa

[Nikhil-Nandagopal]

Hi @Hyperion101010 , 👋 the issue is all yours! Do raise a PR within 4 days and read our Contributing.md

[OladapoAjala]

Hello @Nikhil-Nandagopal are you still working on this?

@Nikhil-Nandagopal can I pick this up?

I have looked into this and come up with two possible solutions:

1. We automatically detect the current locale of the user and render a calender based on the locale
2. We have an input on the datepicker widget settings that allows the developer set the start date of the popup calender.

Let me know your thoughts.

[Nikhil-Nandagopal]

@OladapoAjala go for it! We can do both, detect the current locale and set that as the default as well as give the user an option

[OladapoAjala]

Hello @Nikhil-Nandagopal thanks for assigning this issue to me. There are a couple of challenges here tho:

Firstly

1. the DateInput component doesn't support timezone
2. to render the DateInput calender based on timezone, we need to manually set the locale props & pass in the necessary localUtils from moment
3. for each locale passed, we need to import the locale data from moment (reference)
4. this is somewhat impractical.

Secondly

1. The Timezone component from blueprintjs seems like a good fit for the date picker widget
2. kindly point me to any resource on how we handle adding a new property to a widget

something like

[somangshu]

@OladapoAjala to find existing property and add new once as well, Please take a look at the app/client/src/widgets/DatePickerWidget2/widget/index.tsx > getPropertyPaneConfig method.

This problem is resolved with the new property introduced by blueprint dayPickerProps which show the API for firstDayOfWeek which will let you change this, We can introduce this property in the propertyPane and set it to default=0

ref

[OladapoAjala]

Hello @somangshu thanks for the info.

I have solved this problem by passing in an object containing the firstDayOfWeek into the dayPickerProps into the DateInput component.

I am however stuck at implementing a drop-down in the date-picker property pane that dynamically passes values to the DateInput component (basically how do you access data from the property pane and pass it in as a prop into the widget's component?).

[somangshu]

@OladapoAjala the property given in the widget is accessible in the component with this.props because its passed with the component in the getPageView() method of the widget. So you can pass your new property form the datePickerWidget2 > getPageView() > component and utilize this in the component

Let me know if you still have a question

[OladapoAjala]

Thanks @somangshu I'd work on this over the weekend and give a feedback soon, been a bit busy lately!