ng2-ui / datetime-picker

Angular2 DateTime Picker
https://ng2-ui.github.io/#/datetime-picker
MIT License
121 stars 62 forks source link

How to override daysOfWeek #108

Closed youngzkyz closed 7 years ago

youngzkyz commented 7 years ago

Thanks before, I need make weeken only for Sunday, so I want to override dayOfWeek.

I have been use code like this example for my component

import {Ng2DatetimePickerModule,Ng2Datetime} from "ng2-datetime-picker";

Ng2Datetime.daysOfWeek = [
    {fullName: 'Sunday', shortName: 'Su', weekend: true},
    {fullName: 'Monday', shortName: 'Mo'},
    {fullName: 'Tuesday', shortName: 'Tu'},
    {fullName: 'Wednesday', shortName: 'We'},
    {fullName: 'Thursday', shortName: 'Th'},
    {fullName: 'Friday', shortName: 'Fr'},
    {fullName: 'Saturday', shortName: 'Sa'}
];

but the output still default with value weekend sunday and saturday.

how excactly to override daysOfWeek?

thx,

CNorris724 commented 7 years ago

Getting a similar thing, the short names are not greyed out anymore, but the columns are still not greyed out (although you can select them).

Ng2Datetime.daysOfWeek = [ {fullName: 'Sunday', shortName: 'Su'}, {fullName: 'Monday', shortName: 'Mo'}, {fullName: 'Tuesday', shortName: 'Tu'}, {fullName: 'Wednesday', shortName: 'We'}, {fullName: 'Thursday', shortName: 'Th'}, {fullName: 'Friday', shortName: 'Fr'}, {fullName: 'Saturday', shortName: 'Sa'} ];

image

Is this intended functionality? How do you disabled the greyed out weekend columns?

You mentioned before how to override this behavior with a higher priority CSS selector, would you be able to provide an example please?

allenhwkim commented 7 years ago

fixed and released 0.12.5.

Please update weekends info with as Ng2Datetime.weekends = [0,6] instead of updating Ng2Datetime.daysOfWeek

CNorris724 commented 7 years ago

Looks fantastic!

image

disabledDates = [new Date(2017, 0, 20), new Date(2017, 0, 17), new Date(2017, 0, 21), new Date(2017, 0, 22)];
minDate = new Date(2017, 0, 1);
maxDate = new Date(2017, 11, 31);
<input id="icondatepicker" [(ngModel)]="myDate" ng2-datetime-picker [disabled-dates]="disabledDates" date-only="true" [min-date]="minDate" [max-date]="maxDate" />

EDIT: Forgot to add this

  constructor() {
    Ng2Datetime.weekends = [];
  }