Overview

Angular DateTime Picker/Angular Material DateTime Picker is a lightweight and mobile-friendly component that allows end users to enter or select date and time values from a pop-up calendar and drop-down time list. It provides month, year, and decade views for quick navigation to the desired date. Date-time pickers are all over the web and have been gradually evolving as developers and UX people work their magic. However, they can still be a frustrating experience, especially given that pickers are difficult to implement once for mobile and desktop.

What Is The Issue ?

  • Disabled DateTimePicker
  • Read-only DateTimePicker
  • Date and time ranges
  • Disabled dates
  • Formats
  • Placeholders
  • Incremental steps
  • Calendar options
  • Popup options
  • Forms support
  • Integration with JSON
  • Globalization
  • Keyboard navigation

Note : Most important issue Process of pick date/time not including many clicks.

Solutions Applied 

Angular 8+ Bootstrap Date & Time Picker

https://dalelotts.github.io/angular-bootstrap-datetimepicker/

npm install angular-bootstrap-datetimepicker@3.1.0

Peer Dependencies:

  • Angular 8.x or higher (1.x will not work)
  • moment.js 2.22.2 or higher for date parsing and formatting
  • bootstrap 4.x for css/layout
  • open-iconic for the default icon’s (you can use any icon library you like)

Display of year, month, day, hour, am/pm, and minute formats

Benefits Of It

Our goal in creating the Angular 8+ bootstrap date & time picker is to create a datepicker that adheres to Design principles and is flexible enough to work across different applications and in different locales. The datepicker is still a relatively new component and there is plenty more work to be done, but we believe that the current design is a solid foundation to build on.

On the desktop this isn’t a great experience:

  • You get no interface beyond the tiny inputs for entering the hours and minutes portion of the time.
  • The up/down arrow buttons are tiny and clicking them from a trackpad is a pain.
  • When the picker is open, it’s not obvious what the button with the dot does and there are no tooltips.

References Available

https://www.npmjs.com/package/ng-pick-datetime
https://dalelotts.github.io/angular-bootstrap-datetimepicker/
https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/
https://www.syncfusion.com/angular-ui-components/angular-datetime-picker