Q:

Issue with my datepicker while using .on()

Ok, so I am using a datepicker with FuelCMS and have run into an odd issue and am hoping I can get some help.
I have a admin area that includes a date picker for adding events, but it needs to have the ability to add an unlimited number of events. The code that I have works, but only in an odd way. When the system is loaded it automatically creates one date field, but the datepicker will only come up after you have clicked to add a second field. At this point it will work in either field perfectly fine.
This obviously creates some usability issues so I am hoping that somebody might be able to see where I went wrong.
$("body").on("click", ".datepick", (function () {
$(this).datepick({
    dateFormat: "yyyy-mm-dd",
    rangeSelect: true
});

}))

A:

You need to use focus instead of click. Using click means you have to click in the input field, then it activates, so you will have to click out of the field and back into it for this to work. You also had $(this).datepick instead of $(this).datepicker.
$("body").on("focus", ".datepick", function () {
    $(this).datepicker({
        dateFormat: "yyyy-mm-dd",
        rangeSelect: true
    });
});

JSFiddle

