coachcare / npm-datepicker Goto Github PK

The colon size (between hours & minutes) is quite large as it inherits 32px:

I can fix this with:

.mat-calendar-header-time-hour {
    font-size: 12px!important;
}

Using

<mat-datepicker (selectedChanged)="changeDate($event)" type="datetime" [twelveHour]="twelveHour" clockStep="1" #datepicker></mat-datepicker>

Doet not trigger changeDate method.

Hi.
You've made a great job with the datetime picker! I'm creating multilanguage application and it is rather expected to use locale settings as default for twelveHour property. DatePicker does that with a date format.
Could You make the changes in the behaviour?

Here's a bonus one: there's a typo in readme

clockStep: interval to use in the clock view. defailt: 1

Hello...I noticed a strange behavior today. If after selecting a date with the datepicker, you clear the input value. The next time you open the datepicker, it appears the previous date is still selected in the datepicker popup. If you select the same date again it appears it doesn't think anything has been changed and therefore doesn't emit the value back to the input. You have to select a different date, then you can open the datepicker popup again and select the original date. This behavior does not occur with the normal Angular Material datepicker.

Just thought I would let you know...thanks

ERROR TypeError: Cannot read property 'type' of undefined
at MatDatepickerInput.push../node_modules/@coachcare/datepicker/fesm5/coachcare-datepicker.js.MatDatepickerInput._formatValue (coachcare-datepicker.js:5269)
at MatDatepickerInput.set [as value] (coachcare-datepicker.js:4957)
at MatDatepickerInput.push../node_modules/@coachcare/datepicker/fesm5/coachcare-datepicker.js.MatDatepickerInput.writeValue (coachcare-datepicker.js:5145)
at setUpControl (forms.js:1645)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:4454)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:4959)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:4909)
at checkAndUpdateDirectiveInline (core.js:9246)
at checkAndUpdateNodeInline (core.js:10514)
at checkAndUpdateNode (core.js:10476)

As a result renders this

"dependencies": {
"@angular/animations": "^6.1.7",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/fire": "^5.0.0",
"@angular/flex-layout": "^6.0.0-beta.18",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"@coachcare/datepicker": "^1.0.0",
"@ncstate/sat-popover": "^2.1.1",
"@types/googlemaps": "^3.30.13",
"core-js": "^2.5.4",
"firebase": "^5.5.1",
"geofirestore": "^2.2.1",
"hammerjs": "^2.0.8",
"moment": "^2.22.2",
"moment-timezone": "^0.5.21",
"ngx-moment": "^3.1.0",
"rxjs": "~6.2.0",
"zone.js": "~0.8.26"
},

Original material datepicker supports option useUtc. This option allows to display/pick date/time in UTC timezone. I've found that here are no this feature.
Do i have any method to pick/display date/time in UTC timezone somehow?

Is there some configuration option currently to hide the complete footer or the buttons?

Regards.

When you attempt to drag the hour it is interpreted as selecting the current hour and goes immediately to the minutes dial. It would be better if it waited until mouse up before going the the minutes dial.

Bug Report

After upgrading to Angular material 7.0.0-beta.2 we encounter following exception when building the app:

ERROR in ./trainer/assets/material/material-theme.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./trainer/assets/material/material-theme.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
          ^
      Wrong number of arguments (3 for 1) for `mat-elevation'
      in c:\dev\FitRockApp\node_modules\@angular\material\_theming.scss (line 447, column 12)
ERROR in ./trainer/assets/theme/main.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./trainer/assets/theme/main.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
          ^
      Wrong number of arguments (3 for 1) for `mat-elevation'
      in c:\dev\FitRockApp\node_modules\@angular\material\_theming.scss (line 447, column 12)

This is caused by only importing covalent theme in our theming sass file:

@import '~@coachcare/datepicker/theming';

This is likely related to the fact that mat-elevation has been removed from the stylesheet as mentioned in release notes for 7.0.0-beta.2

Thank you!

I use ru-RU locale, which isn't has AM/PM selector, but it always visible even if i add twelveHour="false" to <mat-datepicker>

Angular version is 7.2.6

Here is part of my code

<mat-form-field fxFlex>
<input matInput [matDatepicker]="datepickerFrom" placeholder="Choose a date" formControlName="dateFrom"
                 required>
<mat-datepicker-toggle matSuffix [for]="datepickerFrom"></mat-datepicker-toggle>
<mat-datepicker #datepickerFrom type="datetime" clockStep="5" twelveHour="false"></mat-datepicker>
</mat-form-field>

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MomentDateAdapter } from '@coachcare/datepicker';
import { CUSTOM_DATE_FORMAT } from './customDateFormat';
[...]
providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMAT },
    { provide: MAT_DATE_LOCALE, useValue: 'ru-RU' }
  ]

import { MatDatepickerModule, MatMomentDateModule } from '@coachcare/datepicker';

import { MatDateFormats } from '@coachcare/datepicker';

export const CUSTOM_DATE_FORMAT: MatDateFormats = {
  parse: {
    date: ['YYYY-MM-DD', 'YYYY/MM/DD', 'll'],
    datetime: ['YYYY-MM-DD HH:mm', 'YYYY/MM/DD HH:mm', 'll HH:mm'],
    time: ['H:mm', 'HH:mm']
  },
  display: {
    date: 'DD.MM.YYYY',
    datetime: 'DD.MM.YYYY HH:mm',
    time: 'HH:mm',
    dateA11yLabel: 'HH:mm',
    monthDayLabel: 'MMM D',
    monthDayA11yLabel: 'MMMM D',
    monthYearLabel: 'MMMM YYYY',
    monthYearA11yLabel: 'MMMM YYYY',
    timeLabel: 'HH:mm'
  }
};

What am i doing wrong?

Hi

we updated to version 1.0.1 and the build failed because
@coachcare/datepicker/prebuilt-themes/deeppurple-amber.css
was not found.
we reverted back to 1.0.0 and the prebuilt-themes folder re-appears again.

i checked the node_packages folder (we are using pnpm but i think this should not matter) and the folder \prebuilt-themes is really missing.

Hello, I'm allowing me again a question / demand, for I was unable so far to bind the very nice looking timepicker to a reactive form where the time property is simply a string in format HH:mm:ss. I'm using moment as an adapter.

Here is my component html,

<mat-form-field>
<input id="timeFrom" name="timeFrom" formControlName="timeFrom" matInput [matDatepicker]="startTimePicker">
<mat-datepicker-toggle matSuffix [for]="startTimePicker"></mat-datepicker-toggle>
<mat-datepicker type="time" [twelveHour]="false" #startTimePicker></mat-datepicker>
</mat-form-field>

I configured the parsing so, or at least I think it does what I need, after our previous very interesting discussion,

export const MY_FORMATS: MatDateFormats = {
    parse: {
        datetime: ['DD.MM.YYYY HH:mm:ss', 'DD.MM.YYYY HH:mm'],
        date: 'DD.MM.YYYY',
        time: ['HH:mm:ss', 'HH:mm']
    },
    display: {
        datetime: 'DD.MM.YYYY HH:mm',
        date: 'DD.MM.YYYY',
        time: 'HH:mm',
        monthDayLabel: 'MMMM D',
        monthDayA11yLabel: 'MMMM D',
        monthYearLabel: 'MMMM YYYY',
        monthYearA11yLabel: 'MMMM YYYY',
        dateA11yLabel: 'LLLL',
        timeLabel: 'HH:mm'
    },
};

And in my component typescript, timeFrom contains the value '09:00:00'. But moment display a warning, as it apparently don't make use of my parsing formats, and nothing is displayed in the input field nor is selected when I open the clock view. I would somehow expect it to convert on the fly to today 09:00:00 and never display day infos.
moment.js:293 Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info. Arguments: [0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 09:00:00, _f: undefined, _strict: undefined, _locale: [object Object]

Thxs again for making our apps easier to develop.

Hi,

Is there any way to change the label of the buttons based on locale?

Regards

Hi, this is quite a major issue as in my culture with 24 hour format ('cs' - though it likely behaves like this in all of them) the picker almost always picks 'pm' value (i.e. 3pm) instead of 'am' (i.e. 3am) even though I'm clicking on 'am' values. See example:

In the first case, I'm selecting '2' and in properly selects '2' am. However, if I go back to hour selection and select '3' it selects '3' pm instead of am. Subsequent cases behave the same.

This is a major showstopper, could you please look into this?

RxJs 6 Support, without rxjs-compat is suggested.
Shouldn't be too big of a change, or?
Thanks in advance

I managed to include your datepicker into my angular 6 project (after some necessary modifications in your source files due to new rxjs behaviour; refer to https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md, but the stylesheets seem to be missing:

The package @coachcare/datepicker includes the file "_theming.scss". I added this file to the styles array in angular.json, but without success... Any advice?

Is there a way to change the days of the week labels displayed in the datepicker?

For example, using the pt locale, I get "2, 3, 4, 5, 6, S, D", as seen in the image:

I would like to change these labels to something more familiar to the Brazilian locale, something like "S, T, Q, Q, S, S, D".

I'm already using a custom set of formats and injecting them to the MAT_DATE_FORMATS, but I can't find the configurarion that changes this, if there is any.

Thanks for the plugin!

how i can set another locale please?

Presently when trying to use custom MAT_DATE_FORMATS as documented in angular material reference, , I'm still unable to have the date displayed properly...

I'm using following import
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatDatepickerModule, MomentDateModule, MomentDateAdapter} from '@coachcare/datepicker';

As well as following Config

export` const MY_FORMATS = {
    parse: {
        dateInput: 'DD.MM.YYYY',
    },
    display: {
        dateInput: 'DD.MM.YYYY',
        monthYearLabel: 'MM YYYY',
        dateA11yLabel: 'DD.MM.YYYY',
        monthYearA11yLabel: 'MM YYYY',
    },
};

And following Providers

providers: [
      {provide: MAT_DATE_LOCALE, useValue: 'de'},
      {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
      {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
],

Might be related to an issue in angular material itself (see stackoverlow https://stackoverflow.com/questions/51019574/angular-material-datepicker-dd-mm-yyyy)

Hey guys.
I have some trouble to get this package to work.

I have some lazy loaded modules in which I want to use the datepicker.
I added the imports of the modules into the core module.
Do I have to add something also in the Lazy modules to get this to work?

The error says that ERROR in : 'mat-datepicker' is not a known element:.

Any help very appreciated

This one might a bit tricky - the problem is that if you use your version of mat-datepicker, the validation of this field will fail if its used inside mat-form-field and if the field is required. This is likely connected to angular/components#9619 and using custom validation might be a solution in this case.

See snapshot:

Thanks!

Currently your time only allows for the use of hours and minutes and I was hoping there was an easy way to add seconds to the selection/display?

When setting the [disabled]="myBoolean" attribute on the <input> item, the input is successfully disabled, but the <mat-datepicker-toggle> appears to still be a clickable item. If I toggle the myBoolean variable from true, to false, and back to true, the toggle will realize it's supposed to be disabled and will render correctly.

Example code below:

<!-- Expire on Change -->
<mat-checkbox [(ngModel)]="expireOnChange">Expire on Status Change</mat-checkbox>
<!-- Date Input -->
<mat-form-field style="margin-top:1em" appearance="outline" color="accent">
   <mat-label>Expiration Date & Time</mat-label>
  <input [disabled]="expireOnChange" matInput readonly type="datetime" [matDatepicker]="picker" [(ngModel)]="expiration" />
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker type="datetime" clockStep="5" #picker></mat-datepicker>
</mat-form-field>

Image from when Dialog appears (notice the toggle is white instead of gray):

I have to stop using this library because of the fact it depends on Moment.js. Moment.js is a good library, but its incredibly bulky and easily adds 1MB to angular bundle size which is just unacceptable. Team behind moment is currently working on Luxon which is much better alternative.

Hello,

I'm getting the following error after updating to the latest release (0.9.6).

Unable to process animations due to the following failed trigger transitions @transformPanel has failed due to: - `query("@fadeInCalendar")` returned zero elements. (Use `query("@fadeInCalendar", { optional: true })` if you wish to allow this.)

Any ideas if this is something I can handle through configuration? Thanks.

Hello
I'm testing this component but when I save my date and time through the calendar only date appear in my form input, time is missing.

Title

Hi, another one :-)

Production build with with ts.config option:

"strictNullChecks": true

and Angular specific:

 "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
  },

Fails with: ERROR in node_modules\@coachcare\datepicker\coachcare-datepicker.d.ts.MatYearsView.html(3,3): : Object is possibly 'null'.

it would be ideal to replace the 12 of 24:00 by 00

Disregard..

Hi, is there a way to translate 'OK' & 'CANCEL' buttons?

On a sidenote - The buttons don't have any margin between them, you might want to add some.

Is your awsome Datepicker compatible / synched with the official Datepicker in Angular Material 7? If not, do you intend to do it relatively soon? Thanks again for your work.

This module doesn't render in IE and older browsers that do not support CSS variables. I was able to create a workaround by creating fallback CSS values for the colors that were using variables. Ideally we shouldn't have to do this.

I can post the fix I used if anyone needs it.

When I choose date and time, I want to close dialog by final choice of minute and delete buttons OK and CANCEL from dialog, is it possible to do?

I'm trying to add my custom theme, but it isn't applied. it seems that the problem is that the official material theme has a mixin with the same name @mixin mat-datepicker-theme($theme)

@import '~@angular/material/theming';
@import '~@coachcare/datepicker/theming';

@mixin theme($theme) {
  @include angular-material-theme($theme);
  @include mat-datepicker-theme($theme);
}

Hello!

I am a begginer in Angular.

Can I use this date picker without SCSS in my angular project?

All style files are CSS, not SCSS

Thanks and regards.