I need to add two date pickers with different dates blocked out. Does any one have any ideas how this can be done using dynamic fill option?
I need to add two date pickers with different dates blocked out. Does any one have any ideas how this can be done using dynamic fill option?
You can easily add two date fields, and using JQuery, you can control which dates are available. I am not sure how easy/difficult it is to dynamically populate a date field.
Here is the date picker script we use:
http://jqueryui.com/demos/datepicker/
thank you. populating the date is not necessary, but setting dates off is another issue. the sample is crude, but works for demo. i'll use ajax function in word press to get data or create my own if necessary. to populate the array with needed values.
jQuery(document).ready(gformInitDatepicker);
var unavailableDates = ["28-7-2012","29-7-2012","30-7-2012"];
function gformInitDatepicker(){
jQuery('.datepicker').each(
function (){
var element = jQuery(this);
var format = "mm/dd/yy";
var mDays = 2;
var image = "";
var showOn = "focus";
if(element.hasClass("datepicker_with_icon")){
showOn = "both";
image = jQuery('#gforms_calendar_icon_' + this.id).val();
}
var opts = ttgSetDateOptions(element);
opts.beforeShowDay = unavailable;
element.datepicker(opts );
}
);
}
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if (jQuery.inArray(dmy, unavailableDates) < 0) {
return [true,"","out"];
} else {
return [false,"","in"];
}
}
function ttgSetDateOptions(date) {
var image = "";
var showOn = "focus";
var thsoptions = {
duration: "slow",
hideIfNoPrevNext: true,
yearRange: '-0:+0',
minDate: +2,
maxDate: 30,
gotoCurrent: false,
defaultDate: +2,
showOn: showOn,
buttonImage: image,
buttonImageOnly: false,
dateFormat: "mm/dd/yy"
}
return thsoptions;
}
David, i'm not sure where the jquery int for date picker should or how it can know which datepicker is which. Can i look for the named css class at pre-render then call a queued script to reset the datpicker with passed in values?
And thank you for answering it is apprecuated!!
Kim
You can set CSS classes on those fields so you can target things. The javascript code should go in your theme's header.php or in your functions.php file and hook into the wp_head call.