Jquery datepicker channel form

Question

I'm trying to get a Jquery datepicker working with Channel form, but it's only partially working. In my form I have:

<label>Event Start</label>
<input name="event_start_date" id="start_date" value="" type="text">

<label>Event End</label>
<input name="event_end_date" id="end_date" type="text">

In my footer I have:

$(document).ready(function(){
        $("#start_date").datepicker({
            numberOfMonths: 2,
            dateFormat: "dd M yy",
            minDate: 0,
            onSelect: function(dateText, inst) {
                $("#end_date").datepicker("option","minDate", dateText)
                var epoch = $.datepicker.formatDate('@', $(this).datepicker('getDate')) / 1000;
                $('input[name="event_start_date"]').val(epoch);
            }
        });
        $("#end_date").datepicker({ 
            numberOfMonths: 2,
            dateFormat: "dd M yy",
            minDate: 0,
            onSelect: function(dateText, inst) {
                $("#start_date").datepicker("option","maxDate", dateText)
                var epoch = ($.datepicker.formatDate('@', $(this).datepicker('getDate')) / 1000)+(60*60*24);
                $('input[name="event_start_date"]').val(epoch);
            }
        });  
    });

The date picker works fine on another (event search) page, but in Channel Form (event input page) I get a single month instead of two, and selecting a date in the calendar gives me something like:

2015-03-05un5efine5

I'm sure I had this working on an earlier version of EE with Safecracker.

Answer 1

Are you including the jQuery datepicker file manually? Because channel form includes one as well. To disable channel form's datepicker file and initialization, include the include_assets="no" parameter.

Answer 2

My problem is similar. I'm including my own newer jQuery and jQueryUI on every page, but these conflict with the jQuery loaded by Channel Forms.

So I set these Channel Forms parameters:

datepicker="no" include_jquery="no" include_assets="yes"

But the datepicker parameter doesn't seem to do anything, the datepicker is still being loaded, and it's old enough to be incompatible with the newer jQuery and jQueryUI actually running on the page -- or at least conflicting with new jQueryUI's datepicker code.

My solution is a hack, but I went into /themes/javascript/compressed/jquery/ui and renamed jquery.ui.datepicker.js to jquery.ui.datepicker-NO.js. I now have a datepicker, and the form's other assets (ie, for 3rd-party fields) run fine (for now...).