DataCapture, date picker custom style

[santosh-pingle]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

To apply the custom style to date picker dialog as per figma style, it is required that datacapture should have support for material date picker.

Once material date picker is updated to the datacapture module, it is possible to have date picker which was mentioned in figma.
Also, custom style can be applied to the header of the date picker.

We can refer below code snippet to apply the custom style to date picker where header is customised according to the figma.

Add <item name="materialCalendarTheme">@style/ThemeOverlay.App.DatePicker</item> to the @style/Theme.MyQuestionnaire at catalog or Theme.Questionnaire at datacapture.

Try below code to customise date picker header

<style name="ThemeOverlay.App.DatePicker" parent="@style/ThemeOverlay.MaterialComponents.MaterialCalendar">
        <item name="materialCalendarHeaderLayout">@style/Widget.App.MaterialComponents.MaterialCalendar.HeaderLayout</item>
        <item name="materialCalendarHeaderTitle">@style/Widget.App.MaterialComponents.MaterialCalendar.HeaderTitle</item>
        <item name="materialCalendarHeaderSelection">@style/Widget.App.MaterialComponents.MaterialCalendar.HeaderSelection</item>
        <item name="materialCalendarHeaderToggleButton">@style/Widget.App.MaterialComponents.MaterialCalendar.HeaderToggleButton</item>
    </style>
    <style name="Widget.App.MaterialComponents.MaterialCalendar.HeaderLayout" parent="Widget.MaterialComponents.MaterialCalendar.HeaderLayout">
        <item name="android:background">?attr/colorSurface</item>
        <item name="android:textColor">@color/grey_800</item>
    </style>
    <style name="Widget.App.MaterialComponents.MaterialCalendar.HeaderTitle" parent="Widget.MaterialComponents.MaterialCalendar.HeaderTitle">
        <item name="android:textColor">?attr/colorOnSurface</item>
    </style>
    <style name="Widget.App.MaterialComponents.MaterialCalendar.HeaderSelection" parent="Widget.MaterialComponents.MaterialCalendar.HeaderSelection">
        <item name="android:textColor">?attr/colorOnSurface</item>
    </style>
    <style name="Widget.App.MaterialComponents.MaterialCalendar.HeaderToggleButton" parent="Widget.MaterialComponents.MaterialCalendar.HeaderToggleButton">
        <item name="android:tint">?attr/colorOnSurface</item>
    </style> 

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Would you like to work on the issue?
Please state if this issue should be assigned to you or who you think could help to solve this issue.

[Anshul-9923]

@santosh-pingle I would like to work on this issue. Can you please assign it to me?

[santosh-pingle]

#1045

[santosh-pingle]

@Anshul-9923 thanks for showing interest, this issue has dependency on issue 1109, let me connect you with @jingtang10