-
Notifications
You must be signed in to change notification settings - Fork 78
Date Picker Component #894
Comments
@gselltho Thank you very much for opening this feature request! If they have already some mocks or designs, this issue would be a good starting point to collect all necessary information and API proposals. |
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. |
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. |
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 |
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 |
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. |
@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. 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 :) Right now the barista team needs help from contributors to add this component to the library. |
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 |
Requirements:General Requirements
Technical Requirements
Optional Requirements (Not sure if needed):
API ProposalWIP: 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 (
|
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. |
Please post below the requirements/feature the datepicker should provide. I will add them in the list of the previous comment. |
@thomaspink Thank you for taking care of this 👍 |
@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). |
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! |
Will this include predefined relative dates? As in "now", "two weeks ago", etc? |
One more requirement (~ GTS):
Nice to have:
|
@toddbaert Apart from the global timeframe selector is this also a usecase for this general datepicker? @pieniazek @areknow added to list |
@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. |
@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. |
@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 |
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):
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 :) |
Moved to APM-266081 |
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:
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:
The text was updated successfully, but these errors were encountered: