Angular-Material DateTime Picker Component

Question

I imported a date picker in a project and was wondering if there was any official recent component from angular and material to include time in the calendar as well  I ve seen plenty of time pickers in material documentation and researched a lot of third party ones  but they seem very complex

User · Answer

Angular Material 10 now includes a new date range picker.

To use the new date range picker, you can use the mat-date-range-input and mat-date-range-picker components.

Example

HTML

<mat-form-field>
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate matInput placeholder="Start date">
    <input matEndDate matInput placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

You can read and learn more about this in their official documentation.

Unfortunately, they still haven't build a timepicker on this release.

User · Answer

For as long as there is no official date and time picker from angular itself  I would advise to make a combination of the default angular date picker and this Angular Material Timepicker  I ve chosen that one because all the other ones I found at this time lack support for issues  are outdated or are not functioning well in the most recent angular versions  This guy seems to be very responsive   I ve wrapped them both in one component so that it looks like it is one unit  You just have to make sure to do a few things   When no input has been given yet  I would advise    On-click of the component  the datepicker should always be triggered first  After the datepicker closes  have the timepicker automatically popup  Use touchUi   true on the datepicker  so that both the datepicker and the timepicker come as a dialog after each other  Make sure the datepicker also shows up when clicking on the form  instead of only on the icon which is the default   Use this solution to use the timepicker also in a material form  when placing them behind each other  it looks like it is one form    After a value has been given  it is clear that one part contains the time and the other part contains the date  At that moment it is clear that the user has to click on the time to change the time  and on the date to change the date  But before that  so when both fields are empty  and  attached  to each other as one field  you should make sure the user cannot be confused by doing above recommendations   My component is not complete yet  I will try to remember myself to share the code later  Shoot a comment if this question is more then a month old or so   Edit  Result     lt div fxLayout  row  gt     lt div  ngIf   dateOnly   formGroup   timeFormGroup  gt       lt mat-form-field gt         lt input matInput  ngxTimepicker   endTime   format   24   placeholder    placeholderTime    formControlName  endTime    gt       lt  mat-form-field gt       lt ngx-material-timepicker  endTime  timeSet   timeChange  event    minutesGap   10  gt  lt  ngx-material-timepicker gt     lt  div gt     lt div gt       lt mat-form-field gt         lt input id  pickerId  matInput  matDatepicker   datepicker  placeholder    placeholderDate     formControl   dateForm                min   config minDate   max   config maxDate   dateChange   dateChange  event   gt         lt mat-datepicker-toggle matSuffix  for   datepicker  gt  lt  mat-datepicker-toggle gt         lt mat-datepicker  datepicker  disabled   disabled   touchUi   config touchUi  startView    config startView    gt  lt  mat-datepicker gt       lt  mat-form-field gt     lt  div gt   lt  div gt    import   Component  OnInit  Input  EventEmitter  Output   from   angular core   import   FormControl  FormGroup   from   angular forms   import   DateAdapter  MatDatepickerInputEvent   from   angular material    import   as moment  from  moment    const moment   moment    import   MAT MOMENT DATE ADAPTER OPTIONS   from   angular material-moment-adapter    class DateConfig     startView   month     year     multi-year     touchUi  boolean    minDate  moment  Moment    maxDate  moment  Moment      Component     selector   cb-datetimepicker     templateUrl     cb-datetimepicker component html     styleUrls      cb-datetimepicker component scss       export class DatetimepickerComponent implements OnInit       Input   disabled  boolean     Input   placeholderDate  string     Input   placeholderTime  string     Input   model  Date     Input   purpose  string     Input   dateOnly  boolean      Output   dateUpdate   new EventEmitter lt Date gt        public pickerId  string         Math random   toString 36  substr 2  9      public dateForm  FormControl    public timeFormGroup  FormGroup    public endTime  FormControl     public momentDate  moment  Moment    public config  DateConfig       myGroup  FormGroup      constructor private adapter   DateAdapter lt any gt          ngOnInit          this adapter setLocale  nl-NL     todo  configurable     this config   new DateConfig        if  this purpose      birthday           this config startView    multi-year         this config maxDate   moment   add  year   -15         this config minDate   moment   add  year   -90         this dateOnly   true          add more configurations     else         this config startView    month         this config maxDate   moment   add  year   100         this config minDate   moment   add  year   -100               if  window screen width  lt  767          this config touchUi   true               if  this model          var mom   moment this model         if  mom isBefore moment  1900-01-01               this momentDate   moment            else           this momentDate   mom                else         this momentDate   moment               this dateForm   new FormControl this momentDate       if  this disabled          this dateForm disable              this endTime   new FormControl this momentDate format  HH mm          this timeFormGroup   new FormGroup         endTime  this endTime                   public dateChange date  MatDatepickerInputEvent lt any gt          if  moment isMoment date value           this momentDate   moment date value         if  this dateOnly            this momentDate   this momentDate utc true                  var newDate   this momentDate toDate          this model   newDate        this dateUpdate emit newDate              console log  datechange  date          public timeChange time  string         var splitted   time split           var hour   splitted 0       var minute   splitted 1        console log  time change   time      this momentDate   this momentDate set  hour   parseInt hour        this momentDate   this momentDate set  minute   parseInt minute         var newDate   this momentDate toDate        this model   newDate      this dateUpdate emit newDate           One important source  https   github com Agranom ngx-material-timepicker issues 126  I think it still deserves some tweaks  as I think it can work a bit better when I would have more time creating this  Most importantly I tried to solve the UTC issue as well  so all dates should be shown in local time but should be sent to the server in UTC format  or at least saved with the correct timezone added to it

User · Answer

I would suggest you to checkout https   vlio20 github io angular-datepicker

User · Answer

You can have a datetime picker when using matInput with type datetime-local like so      lt mat-form-field gt       lt input matInput type  datetime-local  placeholder  start date  gt     lt  mat-form-field gt    You can click on each part of the placeholder to set the day  month  year  hours minutes and whether its AM or PM

User · Answer

Unfortunately  the answer to your question of whether there is official Material support for selecting the time is  No   but it s currently an open issue on the official Material2 GitHub repo  https   github com angular material2 issues 5648  Hopefully this changes soon  in the mean time  you ll have to fight with the 3rd-party ones you ve already discovered  There are a few people in that GitHub issue that provide their self-made workarounds that you can try

User · Answer

I recommend you to checkout  angular-material-components datetime-picker  This is a DatetimePicker like  angular material Datepicker by adding support for choosing time

[angular] Angular-Material DateTime Picker Component?

Angular Material 10 now includes a new date range picker.

Examples related to angular

Examples related to datepicker

Examples related to angular-material2

Examples related to datetimepicker

Examples related to timepicker