I have created a calendar and i am currently trying to make the "Add Event" form as user friendly as possible. Like any normal calendar add page i have two input boxes for Date and two for times. Both using jquery Pickers.
So obviously i cant use this all the time unless the dates are the same, so i have wrote some functions to assess that, if they are the same it will show the duration if not it wont, this all works but it wont change the picker properties to turn the duration of once the dates have been changes, but if i try to remove a ID it works so its just a case of remove this property. No idea how to do it though..
<script>/* Time + Date picker */
/* Getting current date + setting input values to that date */
$(document).ready( function() {
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var output = d.getFullYear() + '-' + ((''+month).length<2 ? '0' : '') + month + '-'+ ((''+day).length<2 ? '0' : '') + day;
$('#id_start_0').val(output);
$('#id_end_0').val(output);
/* Setting time + date format types */
$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) );
$( "#id_start_0" ).datepicker({ dateFormat: 'yy-mm-dd' });
$( "#id_end_0" ).datepicker({ dateFormat: 'yy-mm-dd' });
$('#id_start_1').timepicker({ 'timeFormat': 'H:i' });
$('#id_end_1').timepicker({ 'timeFormat': 'H:i'});
/*setTimes function, controls both times*/
function setTimes() {
$('#id_start_1').timepicker('setTime', new Date());
var add = new Date();
var hour = add.getHours()+1;
var minutes = add.getMinutes();
var timeOut = ((''+hour).length<2 ? '0' : '') + hour + ':' + ((''+minutes).length<2 ? '0' : '') + minutes;
$('#id_end_1').val(timeOut);
};
/* Duration function - Add the minutes of how long the event will be to the select options */
function dateCompare() {
if ( $('#id_end_0').val() === $('#id_start_0').val()){
/* Dates Match, Allow */
alert("They are the same!");
$('#id_end_1').timepicker({
'timeFormat': 'H:i',
'minTime': $('#id_start_1').val(),
'maxTime': '23:30',
'showDuration': true
});
}else{
/* Date do not match, Dont Allow Duration */
alert("They are not the same!");
$('#id_end_1').timepicker({
'timeFormat': 'H:i',
'showDuration': false,
});
}
};
/*Run function when ready and when clicked.*/
setTimes();
$('#get_time').click(setTimes);
dateCompare();
$('#id_end_0').change(dateCompare);
$('#id_start_0').change(dateCompare);
});
</script>