4

I have JQuery UI's datepicker working in my angular 2 application, however it is not updating my ngModel. I have a variable called SeasonStartDate, which I want to update to whatever date the user inputs. When I select a date in my date picker, so October 31st for example, my input will fill with 10/31/2016, as I would expect, but ngModel isn't successfully updating.

Here is my input:

<input [ngModel]="SeasonStartDate" (ngModelChange)="updateSeasonStartDate($event)" class="form-control date-picker" id="SeasonStartDate" name="SeasonStartDate" type="text" autocomplete="off">
Date: {{SeasonStartDate}}

I added Date: {{SeasonStartDate}} below the input so I can test whether or not the value is updating.

Here is the code in my component that updates the value:

updateSeasonStartDate(updateSeasonStartDate: any) {
    console.log(updateSeasonStartDate);
    this.SeasonStartDate = updateSeasonStartDate;
}

If I remove the date-picker class (which is needed to initiate the date picker) and I just manually type in the input, SeasonStartDate will update as expected, so I know the rest of my code works, it's just the date picker that ends up breaking it. How can I get ngModel and JQuery UI Datepicker to work together? Is this possible? I know there are other date pickers out there specifically for Angular 2, but I prefer JQuery's version if possible.

Improve this question

4 Answers 4

Reset to default
10

This may not be the most elegant solution, but I did find a way to make this work.

First, I updated my input to look like the following:

<input [(ngModel)]="SeasonStartDate" #startDate (click)="updateSeasonStartDate(startDate.value)" class="form-control date-picker" id="SeasonStartDate" name="SeasonStartDate" tabindex="5" type="text" autocomplete="off">

The important changes are the additions of #startDate and (click)="updateSeasonStartDate(startDate.value)"

This says, when you click this input, invoke updateSeasonStartDate() and pass in whatever the current value of the input is. Now that alone won't give me the desired results, because I want to bind the value of the input to my SeasonStartDate variable anytime a new date is entered, not just when the input is clicked, which is why I also added the following code to the ngOnInit function:

$('body').on('change', '#SeasonStartDate', function() {    
    $('#SeasonStartDate').trigger('click');
});

Now anytime the value of that input changes, updateSeasonStartDate() will be invoked and change SeasonStartDate just like I want. This is definitely a hacky work around, and you might be wondering why I didn't simply put (change) instead of (click) in my input. That's because for whatever reason, the (change) event wouldn't register when the value of the input changed while using JQuery Date Picker. I don't know if this is a bug with Angular 2, or if it is intended behavior, but it's the only way I could get it to work.

If anyone has better solutions, please let me know and I will accept your answer instead.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

If you're using JqueryUI datepicker, you can tell the datepicker what to do in the event onSelect. Give it a fuction that assigns the selected date to the model.

     $('#SeasonStartDate').datepicker({
         onSelect: (selectedDate, inst) => {
             this.SeasonStartDate= selectedDate;
         }
     });
Improve this answer

1 Comment

Straightest solution!
1

If you don't really need to detect the change of the input and instead need the value when an event occurs you could use ViewChild to update the value of your date variable when that event happens.

For example in my case, when I submit the form I set the value of the date.

My input:

<input type="text" id="date-picker-example" #dateclass="form-control pickadate" #date>

I use ViewChild and this is my input declaration:

@ViewChild('date')
dateVariable: any;

Then when submit occurs:

submit(){
   this.myRealDateVariable = this.resolveDate(this.dateVariable.nativeElement.value);
   //Rest of the code here calling an http service
}
Improve this answer

Comments

0

This may be a late answer, but I found a way to make it work without "hacky" methods. Just import jquery before angular! The ngModel will instantly recognize the date picked in jQuery's datepicker.

It worked for me in angularJS (1.6.4).

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.