CODEWITHSUNDEEP
angular
Progs
Progs

Reputation: 737

Angular2 mydatepicker disableSince option not working

I'm working with mydatepicker with angular2, i'm using the datepicker for my website to make a petition within the range of the 2 dates. However i need to do a few validations, like the initial date is not after the final date, and viceversa the final date can't be before the initial day.

so reading the documentation, i found that in the options object i can set those attributes, the thing is that they don't work, at least not in real time, if i fix them from the begginning they work, but that's no useful for my site.

This is the html template:

<div class="col-md-5" style="float: right">

    <my-date-picker name="mydate" placeholder="Fecha final" [(options)]="optionsFechaFinal" (dateChanged)="onDateChanged($event,1)" required></my-date-picker>

</div>

<div class="col-md-5" style="float: right">

    <my-date-picker name="mydate2" placeholder="Fecha inicial" [(options)]="optionsFechaInicial" (dateChanged)="onDateChanged($event,0)" required></my-date-picker>

</div>

and the angular code:

 private optionsFechaInicial: IMyOptions = {
    // other options...
    dayLabels: { su: "Do", mo: "Lu", tu: "Ma", we: "Mi", th: "Ju", fr: "Vi", sa: "Sa" },
    monthLabels: { 1: "Ene", 2: "Feb", 3: "Mar", 4: "Abr", 5: "May", 6: "Jun", 7: "Jul", 8: "Ago", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Dic" },
    todayBtnTxt: "Hoy",
    firstDayOfWeek: "mo",
    sunHighlight: true,
    dateFormat: 'dd/mm/yyyy',
    selectionTxtFontSize: '13px',
    height: '30px'
  };

  private optionsFechaFinal: IMyOptions = {
    // other options...
    dayLabels: { su: "Do", mo: "Lu", tu: "Ma", we: "Mi", th: "Ju", fr: "Vi", sa: "Sa" },
    monthLabels: { 1: "Ene", 2: "Feb", 3: "Mar", 4: "Abr", 5: "May", 6: "Jun", 7: "Jul", 8: "Ago", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Dic" },
    todayBtnTxt: "Hoy",
    firstDayOfWeek: "mo",
    sunHighlight: true,
    dateFormat: 'dd/mm/yyyy',
    selectionTxtFontSize: '13px',
    height: '30px'
  };

/*some code not relevant*/


  onDateChanged(event: IMyDateModel, datepicker: number) {

    //datepicker inicial
    if (datepicker == 0) {
      this.optionsFechaFinal.disableUntil = event.date;
      this.initialDate = Date.parse(event.date.year + '-' + event.date.month + '-' + event.date.day) / 1000;
      console.log(this.optionsFechaFinal.disableUntil);
      //datepicker final
    } else if (datepicker == 1) {

      this.optionsFechaInicial.disableSince = event.date;
      this.finalDate = Date.parse(event.date.year + '-' + event.date.month + '-' + event.date.day) / 1000;
    }


  }

i not sure what did i missed, what's wrong with the code?

Upvotes: 2

Views: 1894

Answers (2)

sainu
sainu

Reputation: 2701

there is an option for disable the datepicker before and after some date using disableSince and disableUntil options

onDateChanged(event: IMyDateModel, datepicker: number) {
    if (datepicker == 0) {
      this.optionsFechaFinal = {
            disableUntil : {year:event.date.year,month:event.date.month,day:event.date.day
           };
      this.initialDate = Date.parse(event.date.year + '-' + event.date.month + '-' + event.date.day) / 1000;}
    } else if (datepicker == 1) {

      this.optionsFechaInicial{
            disableSince : {year:event.date.year,month:event.date.month,day:event.date.day
          };
        };
      this.finalDate = Date.parse(event.date.year + '-' + event.date.month + '-' + event.date.day) / 1000;
    }
  }

Upvotes: 0

Tomasz Nast
Tomasz Nast

Reputation: 104

you have to change the reference to whole Options Object, like this:

if (datepicker == 0) {
    this.optionsFechaFinal = {
    // other options...
      disableUntil = event.date;
    };
...
}

you cannot mutate object options.

of course it's not correct solution. firstly you have to copy the object Options without reference for avoiding code duplication, and then add the neccessary property.

Upvotes: 1

Related Questions