Adding dates to the [(ngModel)] property

[Viiinc]

I've been playing around with the multiple-date-picker for the last few hours, and I couldn't get it to accept new dates added with anything other than regular mouseclicks.

I've declared it in html as

<multiple-date-picker [disallowBackPastMonths]="true"
                      [disableDaysBefore]="true"
                      [(ngModel)]="selectedDays">
</multiple-date-picker>

which works beautifully. However, I tried adding days to the selectedDays property from somewhere else, and it never showed up in the calendar.

It would be very useful to have a function to "select entire month", so I was wondering if you could help me out.

Either way: Merry christmas 🎄

[xtianus79]

Hi @Viiinc do you want a function to select the entire month? I can see the utility in that. something like February 2018...

as per your question... when you say "other than mouse clicks" are you referring to a button or something? Let me know what you're trying to do exactly.

[Viiinc]

Yes the feature to 'add entire month' would be useful as you've described. It's currently a bit tedius to select lots of dates.

That's also why I wanted to introduce a feature "add range", which would have provided two date entries and then selected all dates between those in the date picker. However, as previously mentioned, I could not get the date picker to accept these externally entered dates.

[xtianus79]

interesting... i like the idea... I will start working on this.

Still I want to investigate what you mean by externally entered dates... is this a parameter the plugin takes currently or would need to be added?

[xtianus79]

wait, are you sure you can't do a date range? what format are you putting the date in. i thought this was a parameter.

[Viiinc]

Well, I may have failed to use it properly then ^^ I tried regular Dates and MomentJS dates. But simply adding them to the selectedDays array used as the ngModel property didn't make them selected in the date-picker.

Specifically, I wanted a multiple-date-picker, but also two regular date entries below, signifying 'from' and 'until'. When selecting January 1st in the 'from' and January 7th in the 'until' calendar, I wanted all dates in between to be marked in the multiple-date picker.

[xtianus79]

@Viiinc yes go back to the documentation and see how the date range picker works. Let Me Know If You have a specific issue with that

[xtianus79]

@Viiinc and make sure you don't have the single day parameter set

[comn-nl]

I have to say that I also would like to be able to fill the model from external components. For example loading the previously selected dates from the database and fill the model with the dates onInit. Now the model should be initialized with an empty array.

It would be a nice feature to be able to add a moment object to the model from any click.

[xtianus79]

@comn-nl I am trying to understand what you are referring to exacty... Can you explain the request from an end user point of view.... i.e. i click here and do this and this happens as a result

[arunw3]

I tried to highlight the day's in the calendar, but days are not highlighted. Below is my code. Is there any punkar project available ? Please help.

<multiple-date-picker [highlightDays]="highlightDays">
    </multiple-date-picker>

ngOnInit() 
  {
    this.highlightDays = [
      {date: moment().date(12).valueOf(), css: 'holiday', selectable: false, title: 'Holiday time !'},
      {date: moment().date(25).valueOf(), css: 'off', selectable: false, title: 'We don\'t work today'},
      {date: moment().date(30).valueOf(), css: 'birthday', selectable: true, title: 'I\'m thir... i\'m 28, seriously, I mean ...'}
   ];
  }

[xtianus79]

@arunw3 make a new issue and post the results and any errors so that I know what to look for. Some error has to be omitting from the console.

[xtianus79]

@Viiinc have you tryied importing this component?

 import { MultipleDatePicker, DateRangeHelper } from '../multiple-date-picker/index';

[comn-nl]

Ok, so I have a page where people can make reservations for a room. The room detail page contains the MultipleDatePicker to show on which dates the room is taken and free. And by clicking they can either reserve a date or cancel a date.

Now when opening the room detail component loads the dates that were reserved all ready from the database. These are being added to the array of the model. However the MultipleDatePicker shows empty on load. However when I navigate to the next month and then navigate back the dates appear.

Somehow the Moment objects that are added to the array by the room detail component are not showing immediately in the date picker.

(this felt like a similar problem to what @Viiinc was saying with adding dates from other code)

[arunw3]

Try to add the dates I'm ngAfterViewInit life cycle hook or in the setTimeOut function. Even I had the same issue

[xtianus79]

@comn-nl I am reading what you are saying and this sounds like a state or store problem not the date-picker. The date picker is going to follow the values in ngmodel... if those values are there I.e. you can debug them... they will be on the date picker...

You say, "When I navigate to the next month and then navigate back the dates appear." That tells me the mechanism you have for those dates existing is by a call to the db and thus they appear but you don't have an intermediary state that holds the values while choosing them on the page.

Does that help? Let me know more and perhaps lets track this down. but from my gut, and I may be wrong, this sounds like a design issue of your app.

Also, what exact version are you using @comn-nl

[fazilbinzaid]

I too am facing the same problem. The moment objects are there in ngModel, but on the initial loading, the dates are not highlighted. If the month is changed back and forth, then the date becomes highlighted. Also, if I change the value (say, push or pop from the array) in ngModel from outside the datepicker, it is not reflected in the datepicker.

[xtianus79]

@fazilbinzaid are you doing these things regarding ng-onit? we have this working in production and you have to have the values set in your debugging and it will reflect in the array. What exactly is your array set to when you say there are no values?

[comn-nl]

Hi all, I want to inform you that I figured out my problem.

I added some console logging to the MultipleDatePickerComponent.prototype.writeValue = function and found that the moment check "d.date.isSame(day)" was returned as false. After some further inspecting of the two moment objects I noticed that one date was at 01:00 while the other was at 00:00, probably caused by the timezone I am in (+1) . The easy workaround for me was to subtract(1, 'hours') before adding the moment object to the array.

Apparently the writeValue check differs from the check when using the navigation. Since navigating did trigger the dates to be selected.

[xtianus79]

@comn-nl I am glad you worked out your issue. Is there anything else I can do from this part of the issue? I think I am going to close this issue and add the op's original question as a feature request.

@fazilbinzaid were you able to work out your issue?

[fazilbinzaid]

@xtianus79 Actually I never got to figure out what the problem was due to the tight schedules and all. So, I managed to include the component itself (and only the component alone) into my project, then noticed the same issue @comn-nl speculated. Then, as a workaround I moved the entire ngOnInit function into an ngDoCheck... I know!! It's a nasty one and doesn't help the actual problem. But, for me its not raising any issue for the sake of time. Let me look at the code more carefully, (also some of it are a bit out of my league). Anyway, if anything comes up, I'll be more than sure to notify everyone.

[xtianus79]

@comn-nl and @fazilbinzaid I am going to close this issue for now. timezone issues are a common programatic headache. Believe I know. However, the application should be timezone agnostic and therefore issues relating to them should be "coded" for.

Unless, there is something i am missing or haven't thought of. I am going to close this ticket.

[Viiinc]

Seems I missed the discussion a bit, I've been busy.

I've recently come back to my project, and I still can't figure out how adding dates to the array being used as the NgModel property actually updates the calendar. Like @comn-nl wrote, changing the month does actually then add the property to the calendar. To be precise the following happens:

• I try to add a date to the array
• It doesn't show up in the date picker, and when debugging isn't in the NgModel array anymore.
• I change month forward, then back again (back to the original month)
• The date is now marked in the calendar and in the array I added it to

I've also not found the workaround used by @comn-nl to work for me. Any help would be very much appreciated.