Giter VIP home page Giter VIP logo

npm-datepicker's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

npm-datepicker's Issues

Dynamically Changing Disabled Attribute Fails to Visually Update Toggle Button on First Load

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):
image

TypeError: Cannot read property 'type' of undefined

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
image

"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"
},

Get rid of moment

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.

Incorrect colon size

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

bb
I can fix this with:

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

Feat. Angular Material 7 Compatibility

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.

UTC date

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?

[major] Picker 'almost' always picks 'pm' values instead of 'am'

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:

incorrect_date

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?

usage without SCSS

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.

Custom days of the week labels

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:

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!

Supports for Custom DateFormat / DateTimeFormat

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)

Selecting seconds

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?

Wrong number of argument for theme in Angular material 7.0.0-beta.2

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!

Custom theme not applied

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);
}

Timepicker Example / Parsing 'HH:mm:ss'

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.

Cannot re-select date once cleared

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

selectedChanged is not emitted

Using

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

Doet not trigger changeDate method.

BUG: Colors not rendering in IE

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.

image
image

Time issue

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.

Failing production build with fullTemplateTypeCheck & strictNullChecks

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'.

b2

AM/PM selector always shown

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?

image

Animation Error

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.

Custom translations

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.

mat-datepicker not a known element

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

Twelve hour clock setting should be detected from locales

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

prebuilt-themes folder mising in 1.0.1

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.