Date Picker Component

[gselltho]

Feature Request

Summary

Add a dedicated component for picking dates. Similar to the date picker component of ng material: https://material.angular.io/components/datepicker/overview

Feature Description

The component should support these attributes:

• date: Date; Binding for the value of the component
• format: String; Date format, something like: "YYYY/MM/DD"
• disabled: boolean; is the component enabled or disabled
• changed: event; fires when value changes
• rangeFrom: Date; selectable range of date
• rangeTo: Date; selectable range of date

to start with, it will be sufficient to provide a basic version: input field with an button next do it to open the date selector overlay (as to see in the attached screenshot)

Attachments

Screenshot of Material Date Picker:

[lukasholzer]

@gselltho Thank you very much for opening this feature request!
I think on this topic we need a close collaboration with our @dynatrace-oss/ux-core team. Maybe they have already created some mocks for this topic or they can provide us with some insights.

If they have already some mocks or designs, this issue would be a good starting point to collect all necessary information and API proposals.

[kathrin-aigner]

I'm not sure for which purpose the date picker is needed but Arkadiusz Lipiarz is working together with his team for a long time now on a date picker we want to use as Global timeframe selector
it's already implemented in our demo environment. Ithink in this case it would be best to talk to him.

[ffriedl89]

We had the discussion in the past and @ursula-wieshofer did some evaluation in the product, and we have one or two datepickers in total. This meant that this was not high on the priority list.

@gselltho I think it would make sense to discuss this further and target an addition to the library.
I think we can take a lot of learnings from @angular/components and do a simplified version.
Would you be able to create a more detailed API Proposal for it?

[arkadiuszlipiarz]

Hello there!

So it seems that the feature my team created would fit use cases @gselltho listed and much much more. Besides the top of our site, it is also used by Dashboard team as a local component. We prepared it both in Angular and GWT. Reach out to me on Slack if you are interested.

But... it seems that Ryan and his team were preparing a super similar solution to what you shared. Here is how it looks:

Code owner is @areknow and he can provide you with more details.

[gselltho]

Hi guys, i'm not sure whats next. The component of Ryans team is basically the angular material one and exact what i need. But I would say, since it is a very basic component, its home should be barista components and as it seems, more teams could use it.

@ffriedl89: of course, i can create a more detailed API description. At least for a limited feature set for a first implementation. I will post it here in the next couple of days

[areknow]

Hi @gselltho, I am the developer of the date picker shared component that resides in the spine-x repo. I have already spoken to the barista team about transferring it to the barista components lib, but unfortunately it has a hard dependency on several material packages which is not something that the team would like to add to the project.

Angular CDK does not include a date picker which means this component would have to be written from the ground up.

Is there an issue with you using the date picker shared component from the mono repo?

Cheers

[gselltho]

Hi @areknow, your component is great! I just miss Angulars Reactive Form feature (ControlValueAccessor) and, so it seems, it has to be a DtFormFieldControl to use it seamless within Barista and Angular Reactive forms.

[ffriedl89]

@gselltho Thanks for reaching out again. It's exactly as @areknow outlines. His component is a restyled material component which introduces a dependency on material and other util libraries from the angular/components repo. It also comes with a hard dependency to moment.js which is huge and not tree shakable.
Unfortunately, the CDK does not come with a datepicker yet that is not styled the material way.
Up until now the datepicker was not a component many teams needed since we don't have any datepickers except the global timeframe selector in the product.

If you need the component it would be awesome if we can work together on contributing the component to the library. This process starts by creating the API proposal for it here in this issue :)
Once this is done we can help you get started and guide you through the development process and we will help you along the way.

Right now the barista team needs help from contributors to add this component to the library.
Any help here is highly appreciated

[thomaspink]

Hey, will take care of it as the settings VCT also needs a date/timepicker now. In the following comments i will try to collect all requirements and then propose an API.

If you also have and features/requirements that should be in there, that are not yet listed, please let me know.

cc @areknow

[thomaspink]

Requirements:

General Requirements

• Selecting a date: The user must be able to select a date
• Selecting a time: In addition to selecting a date the user must also be able to select an additional time.
• **Prefill
• Disabled: The consumer may disable the whole datepicker.
• Selectable range: It should be possible to define the range of dates the user can select (can be implemented via min/max inputs)
• Timezone: It should be possible to define the timezone for the dates the user selects.

Technical Requirements

• NgModel compatible: The datepicker must be compatible with angular forms.
• Form-field compatible: The datepicker must be a valid form-field-control.
• Modularity: The datepicker should consist of several sub-components/directives/utilities so the consumers can also use just parts instead of the full datepicker component (e.g. The month-view for timeframe selector)
• Native Date object: Dates should be represented by the native Date object/class (including the whole consumer facing API). Not by some abstract custom implementation. Additional utility functions/services (DateAdapter) might be needed.
• Light & Dark mode: The control needs to support the light and dark themes

Optional Requirements (Not sure if needed):

• Limit selectable dates: It should be possible to further limit (extending the min/max requirements) the dates that are selectable (can be implemented by a function the consumer can implement)
• Ranges: In addition to select a single date it should also be possible to select a range of dates (e.g. 1.1.2020 - 10.1.2020)
• Mobile fallback: On mobile devices the datepicker should fallback to its native counterpart (Note: We need to check if all features defined for the custom version are also supported for the native one)

API Proposal

WIP: will be adapted over time. If you have any input/feedback regarding the proposed API, please let me know

The Datepicker should consist of multiple Components:

DtDatepicker (dt-datepicker)

The datepicker itself. This component combines all the other components into one useabe datepicker (see Requirements).

Inputs

Name	Type	Default value	Description
value	D | null	null	The selected date.
startAt	D | null	null	The date to open the calendar to initially. Is ignored if selected is set. Defaults to todays date internally for display only.
min	D | null	null	The minimum valid date.
max	D | null	null	The maximum valid date.
disabled	boolean	false	Whether the datepicker is disabled.
isTimeEnabled	boolean	false	Whether or not the time mode is enabled.
isRangeEnabled	boolean	false	Whether or not the range mode is enabled.

DtCalendar (dt-calendar)

Component for selecting the date in a calendar view (calendar-body component). Includes the calendar view (month) and the necessary controls to navigate between different months and years.

Inputs

Name	Type	Default value	Description
selected	D | null	null	The currently selected date.
startAt	D | null	null	A date representing the period (month or year) to start the calendar in.
minDate	D | null	null	The minimum selectable date.
maxDate	D | null	null	The maximum selectable date.

Outputs

Name	Type	Description
selectedChange	D	Emits when the currently selected date changes.

Calendar Body (dt-calendar-body)

Hosts only the calendar grid for a month.

Inputs

Name	Type	Default value	Description
activeDate	D	today	The date to display in this month view (everything other than the month and year is ignored).
selected	D | null	null	The currently selected date.
minDate	D | null	null	The minimum selectable date.
maxDate	D | null	null	The maximum selectable date.
dateFilter	(date: D) => boolean	-	Function used to filter whether a date is selectable or not.

Outputs

Name	Type	Description
selectedChange	EventEmitter<D>	Emits when a new value is selected.
activeDateChange	EventEmitter<D>	Emits when any date is activated.

Timepicker ('dt-timepicker')

Hosts the timepicker, which contains the timeinput (with the hour and minute inputs).

Inputs

Name	Type	Default value	Description
valueLabel	string	''	Label used for displaying the date in range mode.
hour	number | null	null	The hour to display in the timepicker.
minute	number | null	null	The minute to display in the timepicker.
disabled	boolean	false	The disabled state of the timepicker and its inputs.
isTimeRangeEnabled	boolean	false	Whether or not the time range mode is enabled.

Outputs

Name	Type	Description
timeChange	EventEmitter	Emits the timeChange event if the time inputs contain valid values on blur.

Timeinput ('dt-timeinput')

Hosts the timeinput, which contains the the hour and minute inputs.

Inputs

Name	Type	Default value	Description
hour	number | null	null	The hour to display in the timeinput.
minute	number | null	null	The minute to display in the timeinput.
disabled	boolean	false	The disabled state of the inputs.

Outputs

Name	Type	Description
timeChange	EventEmitter	Emits the timeChange event if the time inputs contain valid values on blur.

[thomaspink]

Please post below the requirements/feature the datepicker should provide. I will add them in the list of the previous comment.

[gselltho]

@thomaspink Thank you for taking care of this 👍
Your requirement description has already everything i would need. I have just a question regarding:
Selecting a time: In addition to selecting a date the user must also be able to select an additional time.
The time is meant as optional, i guess? Will I be able to chose what is selectable: only date, only time, or both in combination?

[thomaspink]

@gselltho Thanks for the feedback 👍

The idea was to either have date and time as default, but you can disable the time part to make it date only, or the other way round. Not sure what the best way is (do more consumers need only a date selectors or the date/time one).

[areknow]

It would be nice to be have control over timezone. Some of our use cases in spine X require UTC for interacting with certain legacy APIs.

Also like @gselltho said, having the option to have just date alone would be nice.

Thanks for this project!

[toddbaert]

Will this include predefined relative dates? As in "now", "two weeks ago", etc?

[pieniazek]

One more requirement (~ GTS):

• We'd need light and dark version

Nice to have:

• on mobile browsers -> fallback to native date/time picking controls

[thomaspink]

@toddbaert Apart from the global timeframe selector is this also a usecase for this general datepicker?

@pieniazek @areknow added to list

[ursula-wieshofer]

@thomaspink I think because of consistency reasons and to make the handling of the date picker easier for the user we should stick to the part of the global timeframe selector that also includes the calendar. The basic functionality and handling should be the same as well as the style.
This will support the user when dealing with it as he/she is used to the functionality already.

[toddbaert]

@thomaspink it wont be a deal-breaker for user, but we are exposing some UIs soon for which the predefined-relative dates could be useful.

[thomaspink]

@toddbaert do you have a list of the supported values? I will add it to the nice to have list if its ok for you

[thomaspink]

For the datepicker we would also need some kind of a service (similar to angular materials data-adapter) that provides us with the functionality and information so we can display the dates and the correct namings (including weekday names) on the one hand and calculate/work with native dates on the other hand. This "service" should then also be available to our consumers so they can work with dates the same way and we can share this functionality.

For that we have at least 2 options (if you have more ideas i would appreciate it if you would post them below):

1. Create a NativeDateAdapter which combines native date APIs (Intl, Date) and utility functions (such as addCalendarDays). This Adapter would be very similar to Angular Materials NativeDateAdapter. But for our usecases we do not need the fallbacks when Intl is not available, as all our supported browser have already Intl' built in. We would also not need the possibility to have DateAdapter for different libraries as we only work with the native Date` API.
2. Use an external library such as date-fns and wrap it into a service (DateAdapter) we then provide to our customers.

Right now i would tend more toward option 1 as it uses heavily the native APIs without the need for an additional library but please also post your ideas, findings and comments :)

[lukasholzer]

Moved to APM-266081