kuhnroyal / mat-datetimepicker Goto Github PK

Hi I am tryng to use the last version 2.0.1 in production mode and seems that the calendar day are nor present

Is it possible to display the picker as an inline element?

If yes how?

i set this to true but no AM or PM option available

With "@angular/material": "^2.0.0-beta.12"

I have error when build

Hi, thank You for this great job!
I just would like to ask why dateFilter trigger only on a year and month views and not on a clock one? I try to filter also hours per day but without the dateFilter triggering I am not able to figure it out.

Please look at the material2 issue and specifically the comment from the link below:

angular/components#4137 (comment)

need to change the location of the date box, is in English, how to change this setting

If you use this just for the timepicker (I also use it for the datetimepicker of course), with Moment, it tries to convert input into the field into a date. So entering "12:35" will result in "null" because it's not a date.

This plugin seems great - I just wondered if someone had a working demo of this so I can determine at a glance if this is what I need for my next project? Thanks in advance

The initial value of the datetimepicker with type=time shows the date (i.e. '01/01/2000') instead of the time.
When the input is focus and blurred, the correct time value shows again (i.e. '13:37').

The time value was shown correctly with 1.0.4.

While writing the value into the associated text input, min / max validation does not take into account the time component.

Thank you for providing the great date/time picker. I've been able to include it in my project and have the basic functionality for it in place. I do have several questions about how to get it to display things in different formats though and don't really understand how to configure the adapters.

In my shared material module I've included the MatMomentDatetimeModule,
MatDatetimepickerModule. I have not yet set any providers to customize the format in this module, though from what I've read, I realize this may be required? I then created a component to wrap the datetimepicker. The component markup is the standard from your examples:

<form [formGroup]="group">
  <mat-form-field>
    <mat-placeholder>Start Date and Time</mat-placeholder>
    <mat-datetimepicker-toggle
      [for]="datetimePicker"
      matSuffix></mat-datetimepicker-toggle>
    <mat-datetimepicker
      #datetimePicker
      type="datetime"
      openOnFocus="true"
      timeInterval="5"></mat-datetimepicker>
    <input
      matInput
      formControlName="starttime"
      [matDatetimepicker]="datetimePicker"
      required
      autocomplete="false" />
  </mat-form-field>
</form>

and the .ts file is fairly standard as well:

import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { InvestigateTrafficRequestModel } from '../../../shared/models/investigate-traffic-request.model';
import { FormControl, FormGroup } from '@angular/forms';
import { Moment } from 'moment';
import * as moment from 'moment';
import { MatDatetimepicker } from '@mat-datetimepicker/core';


@Component({
  selector: 'app-traffic-filter-controls',
  templateUrl: './traffic-filter-controls.component.html',
  styleUrls: ['./traffic-filter-controls.component.css']
})
export class TrafficFilterControlsComponent implements OnInit, OnChanges, AfterViewInit {
  @Input() filterObject: InvestigateTrafficRequestModel = new InvestigateTrafficRequestModel();
  @ViewChild(MatDatetimepicker) datetimePicker: MatDatetimepicker<Moment>;
  public group: FormGroup;
  public isValidMoment = false;

  constructor() {
  }

  ngOnInit() {
    this.group = new FormGroup({
      starttime: new FormControl(moment(this.filterObject.timeRange.start))
    });
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);

  }

  ngAfterViewInit(){
    this.datetimePicker.selectedChanged.subscribe(
      (newDate: Moment) => {
        this.isValidMoment = moment.isMoment(newDate);
      },
      (error) => {
        throw Error(error);
      }
    );
  }
}

Here are my questions... If I want to customize the way the input displays the selected datetime, what changes would I need to make to have it appear in the same format as the angular date pipe medium format (MMM d, y, h:mm:ss a)?

Similarly, the datetimepicker popup currently displays the time in a 24 hour clock format. If I wanted it to display a 12 hour clock format with AM/PM selectors how would I change my code to make that happen?

Thanks in advance for any suggestions.

I would like to use time in UTC but I didn't find this functionality.

Could you add such possibility, please?

I use Angular 6.0.7 and Angular Material 6.3.3.

To get this Issue I use @mat-datetimepicker/moment version 2.0.1.

FYI: I'm upgrading my angularJS project to Angular 6.

When I add the package without theming, I can not see any of the selected items on the left side of the panel, all the texts are set color: white. When I try to add the SCSS file, in an app without custom theming, an error is thrown during build time. (I'm currently using a pre-built theme from Angular material)

Could the SCSS file be created without a call to theming, or default texts to black?

When setting [min]="1/11/2018 3:00 AM", the UI shows 1:00 AM and 2:00 AM as disabled on the same date. Even in disabled state, you can click and select times before 3:00 AM even though [min] shows 3:00 AM as minimum time.

Attached is a screen shot.

I have not found any material design datetimepicker which allows to input seconds as well. Will it be possible to add this functionality?

Also, is there an online demo for this component I can try?

Could you please add support for Angular 7?

Hi,

running this in IE11 works, but the dialog cannot be closed anymore, also on selecting a date the popup does not close. Any chance this can be easily fixed?

Thanks!

Thanks for the great component! 👍

Will it work with angular 4 and material 2.0.0.12-beta?

As stated on the home page of the repository, I couldn't find moment datetime adatper. Can it be made available?

It would be nice to be able to set a minimum date for mat-datetimepicker with a moment date

Thank you.

Its possible to add a functionality to choose year ?
Thanks

I'm using Angular 6.1.0 & Angular material 6.4.6 and I've imported MatDatepickerModule,MatDatetimepickerModule and MatMomentDatetimeModule in app.module.ts file

But I get this error message
ERROR Error: Uncaught (in promise): TypeError: _super.prototype.createDate.call(...).format is not a function
TypeError: _super.prototype.createDate.call(...).format is not a function
at mat-datetimepicker-moment.js:52
at range (mat-datetimepicker-moment.js:24)
at MomentDatetimeAdapter.push../node_modules/@mat-datetimepicker/moment/fesm5/mat-datetimepicker-moment.js.MomentDatetimeAdapter.setLocale (mat-datetimepicker-moment.js:52)
at new MomentDatetimeAdapter (mat-datetimepicker-moment.js:32)
at createClass (core.js:8424)
at createProviderInstance (core.js:8394)
at resolveNgModuleDep (core.js:8357)
at NgModuleRef.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef.get (core.js:9065)
at resolveDep (core.js:9430)
at createClass (core.js:9310)
at mat-datetimepicker-moment.js:52
at range (mat-datetimepicker-moment.js:24)
at MomentDatetimeAdapter.push../node_modules/@mat-datetimepicker/moment/fesm5/mat-datetimepicker-moment.js.MomentDatetimeAdapter.setLocale (mat-datetimepicker-moment.js:52)
at new MomentDatetimeAdapter (mat-datetimepicker-moment.js:32)
at createClass (core.js:8424)
at createProviderInstance (core.js:8394)
at resolveNgModuleDep (core.js:8357)
at NgModuleRef.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef.get (core.js:9065)
at resolveDep (core.js:9430)
at createClass (core.js:9310)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3816)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)
So What's wrong?

Did you commit your npm package ?

Would be nice to be able to change the format of the mat-datetimepicker-calendar-header-date with a moment format for example.
I'm using localised formats and the date is kind of 'americanised'.
Thanks

//class MyService
constructor(protected dateAdapter: DateAdapter<any>, protected datetimeAdapter: DatetimeAdapter<any>) {}

setLocale(locale) {
    this.dateAdapter.setLocale(locale);
    this.datetimeAdapter.setLocale(locale);
}

//later
myService.setLocale("it");
//later still
myService.setLocale("en");

Observed effect: regular Material date picker switches from DD/MM to MM/DD. Date-time picker doesn't. However, in the popup the names of months and days do change.

When I open my datetimepicker and configures it so, that I can only choose the month, the month is not in the format I set.

@mat-datetimepicker/moment defines a peerDependency to "@mat-datetimepicker/core": "2.0.0".

The npm-blog suggests using semver for peerDependencies: E.g.: "@mat-datetimepicker/core": "^2.0.0"

According to the official Android timepicker, the hour label for displaying midnight should be 00.
It's currently 12, this can be disturbing for users to find out which hour to select, as noon and midnight are displayed with the same value.

When change detection is set to OnPush inside the component showing the datetimepicker, and a value is filled (prefilled or selected from the calendar), the placeholder does not move up like the normal material inputs. You can see this behaviour by running the demo and setting the chagnedetection on 1 of the components (native or moment).

After the field is clicked, the placeholder moves up and all is fine.

When i set the value into my form, the minutes and seconds are not displayed.. Any reason ?

View:

Code;

Code inline

const startDate = new Date(delegation.StartDate);
const endDate = new Date(delegation.EndDate);
console.log(startDate, endDate);
this.delegationForm.get('startDate').setValue(startDate);
this.delegationForm.get('endDate').setValue(endDate);
this.delegationForm.get('sendEmail').setValue(delegation.SendEmail);
this.delegationForm.get('sendEmailToSignatory').setValue(delegation.SendEmailToSignatory);

Console:

When testing the component in an Angular 6 library I get the following error when running ng-packagr:

Directive MatDatetimepickerInput, Property '_dateAdapter' is private and only accessible within class 'MatDatetimepickerInput'

I think it might be related to AoT and the use of the property in a directive with host.

In order to enable the user to enter seconds, "format: 'y-mm-dd HH:MM:ss'" is set on "mat-datetimepicker" , but the setting has no effect.

<mat-form-field style="width: 100%">
    <input matInput [matDatetimepicker]="datetimePicker" name="outTime" [(ngModel)]="form.outTime" autocomplete="false" [max]="curTime"  placeholder="Date time" >
    <mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
    <mat-datetimepicker #datetimePicker type="datetime" openOnFocus="true" timeInterval="1" format="y-mm-dd HH:MM:ss"></mat-datetimepicker>
</mat-form-field>

Hi,

Do you have any plans on updating this to angular 6?
I'm able to use this in my angular 6 project with rxjs-compat, but would be nice to skip that package.

Thanks

The time format reported is for example (for en-US local) like "12:58 AM". This format is not recognized by the native date format obviously.
Using the momentjs format, it should work, but there is a limitation in the code that don't select a correct momentjs parsing format string for time only.

I will propose a PR to fix that issue.

npm WARN @mat-datetimepicker/[email protected] requires a peer of @mat-datetimepicker/[email protected] but none is installed.

I have @mat-datetimepicker/[email protected] and @mat-datetimepicker/[email protected] installed. It seems there is a inconsistency in the dependency versions. Or is this intended?

We have the following html code:

<mat-datetimepicker-toggle [for]="datePicker" [disabled]="isDisabled" matSuffix>
<mat-datetimepicker #datePicker type="date" openOnFocus="true">
<input matInput #dueDate [matDatetimepicker]="datePicker" formControlName="dueDate" [min]="today" [placeholder]="'APP.IDEAS.IDEA_FORM.DUE_DATE.PLACEHOLDER' | translate"/>

In our reactive form, we will set the value like that:

this.formGroup = this.formBuilder.group({
dueDate: [""],
});
const dueDate: Date = new Date(this.idea.due_date);
this.formGroup.get("dueDate").setValue(dueDate.toISOString());

but the input field is empty and the given date isn't used as preselection in the date calendar.

Version 1.0.4

Hello, there is some possibility of changing the format of the date?

Hi, thanks for the great lib!

Any chance there could be another type added, where the user can just select a year?

Cheers.

I am using Angular 6.X. I noticed that when I use mat-form-field with an outline as appearance (check below), the datetimepicker popup opens at the very left top corner of the browser.

After going through the datetimepicker code, I realized that it uses underlineRef property to determine position. The property has been deprecated in Angular 6 (https://v6.material.angular.io/components/form-field/api)

Thanks for great lib,
Is there any way to put pre-defined date?
dueDate is not empty value and but it always show empty.

<mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle> <mat-datetimepicker #datetimePicker type="datetime" openOnFocus="true" timeInterval="5"></mat-datetimepicker> <input matInput formControlName="dueDate" [matDatetimepicker]="datetimePicker" required autocomplete="false" placeholder="Due Date">

Calendar and clock pop up not showing , no error shown in console

Steps to reproduce:

1. Choose some date which is last day of month (e.g. 31 days long months - January, March, etc.)
2. Now try to change the selected month to a month with less days in total (like February).
3. Error appears due to this line.

Expected result:

Month is properly set with no error and user must reselect the day to complete the change.

Hello,

I'm using a specific localization for my datetime picker, the display is correct and if I'm using the picker it works well. However, if I'm trying to modify directly the date, the input is invalid while the date entered is correct in its localization format.

App.component.ts

import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';
import {DateAdapter, NativeDateAdapter} from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup;
  constructor(private adapter: DateAdapter<NativeDateAdapter>) {
    this.adapter.setLocale('fr-FR');
  }

  ngOnInit() {
    this.form = new FormGroup({
      start: new FormControl(new Date())
    });
  }
}

App.component.html

<form [formGroup]="form">
  <mat-form-field>
    <mat-placeholder>Start DateTime</mat-placeholder>
    <mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
    <mat-datetimepicker #datetimePicker type="datetime" openOnFocus="true" timeInterval="5"></mat-datetimepicker>
    <input matInput formControlName="start" [matDatetimepicker]="datetimePicker" required autocomplete="false">
  </mat-form-field>
</form>

App.module.ts

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    FormsModule,
    MatInputModule,
    ReactiveFormsModule,
    // use this if you want to use native javascript dates and INTL API if available
    // MatNativeDatetimeModule,
    MatNativeDatetimeModule,
    MatDatetimepickerModule
  ]

Great job @kuhnroyal !!
Please, is there any way how to get some change event while the View "clock" | "month" | "year" switched by user?
It would be probably good for the date filtering. Now it is so that the year and month views trigger the time with the current hours and minutes. Which is, for sure, absolutely right, but what about the case I need to filter date only on the clock view?

I am using latest version 1.0.2 , I am facing one issue in the ie 11, when click in the text box, instead of clicking on the calendar icon , Calendar popup comes up but after choosing the date popup close and open again, keep happening like this.Can't close totally. Even though I call datetimepicker.close() function, behaviour still the same. When I called datetimepicker.close(), calendar popup close and open back again.Please advise me what to do.It already took 3 hours to fix it but can't.
Thanks.

Hello!

I am very interested in this component, looks really interesting, but I can't find it on Yarn as the Readme file specifies... is there any other way I can import this component in my project?

    <mat-datetimepicker #datetimePickerEnd type="datetime" [min]='minDate' openOnFocus="true" timeInterval="5" ></mat-datetimepicker>

Min date not working, however it works on md2. How am I able to get this to work?

Thanks