feat: Add DateTimePicker component

[edcarroll]

One of the major missing components in Semantic UI is a datepicker component.

There is currently a module available that adds this functionality to the library, making use of existing components (table, popup, label, icon) with limited extra CSS.

This looks to be the best candidate for porting this component, so this issue will track the progress of that.

[edcarroll]

TODO

Bugs / Features

• Create internal calendar component
• Create internal month picker component
• Create internal year picker component
• Create internal hour picker component
• Create internal minute interval picker component
• Create wrapping component, that can switch between internal components
• Add support for disabling date ranges
• Add support for limiting input to datetime, date or time
• Support native fallback on mobile
• Support for typing date in input box
• Support keyboard navigation
• Support ngModel
• Support for localization

Docs

• Standard example
• Date only example
• Time only example?
• ngModel example
• Disabled range example

[yavorskiy]

Edward, do you plan to create date range picker functionality in this component, like http://www.daterangepicker.com/

Solutions that are available today, use jQuery or too dull.

[edcarroll]

So this is something I've thought a lot about, but am not sure how to go about it.

The difficulty is that I would like there to be able to be a fallback to native on mobile, which means that it needs to be represented as two separate datetime inputs beside each other. Alternatively, it may be able to be added as a separate component (like select & multi-select) but without a fallback.

What are your thoughts on this?

[yavorskiy]

In my project I use Bootstrap daterangepicker. In addition, that I had to use jQuery and behavior of the calendar on mobile is not implemented in the best way. The bottlenecks that you describe really exist. I'm now inclined to wait for your calendar component and just use 2 separate inputs for daterange. I think it's will be the best solution, which will solve the problem of usability and get rid of jQuery.

I would like to propose you add one more feature to your todo list. For those who develop multilingual applications, the issue of localizing the calendar is very important.

For example, the names of months or time units can be stored in separate properties with access to them. I think you already know all this )

For localization I can advise locales from the moment.js.
Path to locales: node_modules -> locale. There perfectly translated all the time variables.

What do you think about this?

[evanmosby]

I am using the same module (Semantic-UI-Calendar) Ed mentioned and enjoy how it styled to plug right into Semantic's overall feel. It's the one UI element I still need JQuery for. Am absolutely loving the work put into ng2-semantic-ui and applaud the notion to add a date/time component! Before using Semantic-UI-Calendar, I was attempting to use HTML5 datetime-local and time inputs, however they are not cross browser and blow up on Firefox and Safari.

Would be so helpful to have support for reactive and template Angular forms too.

As for mobile fallback, perhaps that is up to the developer to display the appropriate input as needed?

[genuinefafa]

Hi there! Geting on the same roadblock here!

Datepicker is a "must" in the corporate app that i'm working on. Also, I second @evanmosby notion, mobile apps are one step further. I do know as @yavorskiy-web said, many components: I use to like AngularStrap datepicker much better than Angular bootstrap, specially with i18n.

[edcarroll]

Thanks all for your comments. I've been spending the last few days implementing this and I must say it's not been the easiest component to get working!!

Re localization, I've created a SuiLocalizationService that you can inject into a class and update the values there (provides functionality for defining multiple locales and swapping between them etc). Lets you change the month & date names (nothing else is used). The issue I found with the momentjs locales is that they're tied closely to moment (can't use them without it!) which is a shame, hence why I've created a separate service.

How it will work is you add an <input> component to the page, like so:

<div class="ui left icon input">
    <i class="calendar icon"></i>
    <input suiDatepicker [(ngModel)]="date" pickerMode="date" [pickerFirstDayOfWeek]="3" [pickerMaxDate]="maxDate">
</div>

Everything will be via a single [suiDatepicker] directive, you can control the granularity with pickerMode. Note the lack of a type attribute on the datepicker - this is very much on purpose and if you do add one it will be overridden (to something not date related, to disable native datepickers). The datepicker is contained within a popup, which is opened & closed on focus (so when you go to edit the date input).

The ngModel works (and reactive forms) with a pure JS Date object, no special objects for time e.t.c.. The way that it works is that if the picker allows a time selection, the output is in the local timezone. If it is a date only picker, the output will be a date that is exactly midnight on the selected date UTC (e.g. if you're in BST you'll get a date object at 1am). Let me know your thoughts on this - it feels like the safest way to implement, especially given that input[type=datetime] has been dropped for input[type=datetime-local].

Full keyboard navigation is supported, including stopping once dates are out of the min/max range etc.

Mobile fallback will be an optional property (defaulting to true) that essentially will detect when you're in a mobile browser, and will add the correct attributes to the <input> element, such that it seamlessly works on mobile.

Finally, range functionality is something that I'm going to delay to a separate release - I'm hoping to get this out over the weekend, but then won't have time to work on implementing anything major for a couple of weeks. Technically though it will be able to be done manually by setting the minimum date of the 'end' picker, just won't be styled e.t.c.

---

If you'd like to have a play, clone the repo and checkout the feat/datepicker-component branch, then run the demo and go to the hidden test page (#/test).

[genuinefafa]

I'm testing it (using a forced version of position, positioning.service.ts:160 with placement: "bottom-end", // was: placementToPopper(placement),. So, of course, the position is not that great.

But the calendar is working flawlessly. :)