Well, this one bugged me down for hours. I thought the problem was Bootstrap’s form-control CSS class since removing it shows the Jquery UI DatePicker widget but the input field styling is gone.

User lastoneisbearfood in the StackOverflow forum provided 2 easy solutions of your preference: either adding a css attribute or doing it Javascript style.

on-JS Just add z-index:1051; to the style attribute of your input element. This is based on the observation that bootstrap .modal class uses a z-index of 1050.

Dynamic solution using JS When declaring your datepicker, add a beforeShow handler that retrieves the z-index of .modal and set datepicker’s z-index to 1 higher than that:

This took me a bit to deduce that got me confused why form.$valid always returns false even though there is already a date chosen from JQuery’s DatePicker.

The date input text field was set to required so even though I chose a date from the date picker, the value is not assigned to the ng-model of that input text field.

So it does not work with Angular JS. At least unless you do something about it. From Abequar.net, bema managed to make an Angular directive for JQuery’s date picker using this code.

And the HTML code will look something like this:

So a big thank you to bema who made it easier for developers to still use JQuery’s date picker rather than other Angular JS custom date pickers.

An important thing to note is that the Javascript libraries should be added in the following order:
1 – Jquery
2 – Jquery-ui
3 – angularjs

else, it won’t work.

This happens because when you call $this.datepicker() it only initializes the date picker without ever showing it up.

So if you click it again, that will be the time that the date picker will show itself since it was already initialized.

What you can do to show the date picker right away on first click is to call it like this:

That should do it.

Related Posts Plugin for WordPress, Blogger...