Disclaimer: I am a long time CI user but a novice when it comes to EE.
I want visitors to book appointments which involves selecting a day and time. Since the times depend on the day (different hours on different days), I broke this operation up into two fields:
appt_date with field type Date.
time with field type Text.
On submit I use javascript to combine the date (formated YYYY-MM-DD) with the time (formated hh:mm PM). I then store the result in appt_date and this works beautifully.
My issue arises when there are any field errors and the form must be repopulated. Even though I’m using inline error handling, appt_date gets messed up and returns something like “1969-12-31 07:33 PM”. If I change appt_date from field type Date to Text, it repopulates properly.
Some snippets of my code are below but more can be found here: http://pastebin.com/Ym5nfeVk
If you are adventurous, all of the code can be found here: http://pastebin.com/BvydP6bN
{exp:safecracker
id = "appointment-form"
return = "appointment/success"
channel = "appointments"
datepicker = "no"
error_handling = "inline"}
<!-- This is a datepicker that does displays the select date nicely to the user -->
<label for="datepicker">Appointment Date</label>
<input type="text" name="datepicker" id="datepicker" value="{appt_date}"/>
<!-- Hidden input which is the actual appointment data/time. On submit, this get the correct format of YYYY-MM-DD hh:mm PM -->
<input type="hidden" name="appt_date" id="appt_date" value="{appt_date}" />
<!-- This will get its options for a JS function once a date has been selected using the date picker -->
<label for="time">Time</label>
<select name="time" id="time">
<option>Select a date first</option>
</select>
{/exp:safecracker}Relevant JS:
$( "#datepicker" ).datepicker({
dateFormat: 'MM d, yy (DD)', // Nicer looking date for users
altField: '#appt_date', // The real date
altFormat: 'yy-mm-dd', // YYYY-MM-DD
onSelect: function(dateText,insta){
// Give time select its options
changeHours(dateText);
}
});
$('#submit').bind('click', function(e){
// If a date has been picked (this will have a value)
if ($('#appt_date').val()){
// YYYY-MM-DD
var day = $('#appt_date').val();
// hh:mm PM
var time = $('#time option:selected').text();
// Combine them
$('#appt_date').val( day + ' ' + time );
}
// Submit the form
$('#appointment-form').submit();
});I’ve been stuck on this for a while, any guidance would be greatly appreciated!
- Justin