Figured it out at the end using a bit of Jquery, JS and OOTB functionality from Gravity Forms.
Created another field called Day Of The Week, but made it readonly prior to setting the value and post setting the value of the input field.
Day Of The Week is then filled in based on selected date. See below.
// Array for the name of the Weekday
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
// set Day Of The Week field to readonly prior to picking a date
jQuery("#input_1_18").attr("readonly", true);
// On select of a date in datepicker move value to Day Of The Week
jQuery("#input_1_7").change(function(){
var date = jQuery("#input_1_7").datepicker('getDate');
var dayOfWeek = weekday[date.getUTCDay()];
// Make Day Of The Week editable
jQuery("#input_1_18").attr("readonly", false);
// Set Day Of The Week but emulate keyup
jQuery("#input_1_18").val(dayOfWeek).keyup();
// Make Day Of The Week readonly again so users cant change it
jQuery("#input_1_18").attr("readonly", true);
});
I just used the OOTB gravity forms functionality to then show the required Appointment Time dropdown list based on value of Day Of The Week (Mon-Thu vs Fri-Sat). The trick is to emulate a user entering the Day Of The Week, otherwise, Gravity Forms won't trigger the condition. Hence, added .keyup after setting the field value and Voila! It works great!
Might be an easier way and more efficient way of doing this, but ho-hum.
Posted 11 years ago on Friday December 21, 2012 |
Permalink
