JQuery UI Datepicker hash href misinterpreted by AngularJs Routing

This is actually my own mistake. I incorrectly initialized the model for datepicker. When the date picker is properly initialized, the jQuery user interface prevents the navigation event from triggering. If you also experience this problem, then, like me, you are doing something else wrong. I will leave it here as a warning story.


History:

I am trying to use the jQuery UI datepicker plugin in an AngularJs application.

This is a one-page application using Angular client-side routing ( this is a critical detail ).

I am using jQuery UI v1.8.24 and AngularJs v1.2.2

Problem:

To select a date, you must click the day in the calendar. Each day on the calendar is basically a stylized anchor tag with the href attribute set to a hash tag. For example, HTML for day 17 on the calendar looks something like this:

<a class="ui-state-default" href="#">17</a>

When a user clicks this date, Angular will think that they are trying to follow the link to the page found on the "# /" route, and dutifully try to get this page using AJAX. If he exists, he will show it. If this is not the case, the user gets a nice blank page. Obviously, I do not want this. I want Angular to do nothing but update the model when the user clicks a date.

Attempted Solution:

HTML5 (, -), : Angular , .

jQuery UI datepicker, - href. Angular, . hashtag datepicker . , , jQuery, .

+4
1

, . Angular UI Bootstrap. Angular UI Angular ( Angular ) jQuery.

Angular UI Bootstrap, # , Angular, jQueryUI.

Bootstrap CSS href ( , ..). AngularJS href . href , , .

+2

Source: https://habr.com/ru/post/1533166/


All Articles