Question

Hi I am making a form in expression engine using safecracker and one of my fields called “date of birth” uses the date field type. The jQuery datapicker is being automatically added by expression engine but I can’t see how to add any of the options or formatting I would normally add to datepicker when making a field of this type.

My normal code:

 $(function() {
    $( "#datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd/mm/yy',
        maxDate: new Date()
    });
 });

The only option I can think of is to make this field a text input and add the datepicker myself in the template but this would remove EE’s date validation that it performs on this field type.

Is there anyway to add additional datepicker options to this field type?

Answer 1

Well, you can set datepicker="no" in your Safecracker tag, then add your javascript manually. However: you can’t use your custom format as you show above – for the input to validate as a native EE date field, it must use the datePicker format yy-mm-dd, plus the current time in the format HH:MM AM/PM – which the datePicker doesn’t do natively. (See this post by one of EE’s developers for how they do this.)

An alternative would be to instead use the EEvent Helper date field, because it does not require the time portion to validate (though it too requires yy-mm-dd). However, datepicker="no"only affects native date fields, so you’d instead have to set safecracker_head="no" – but then you’ll also lose any javascript or CSS required by other fieldtypes in your form.

Re: using a plain text field: in addition to the validation issue, your data would then be stored as whatever is input (mm/dd/yy), instead being converted a timestamp, which is far more useful and portable.

The only true solution is to write your own date fieldtype for this. Wouldn’t be very difficult.