PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

add second date (might have been posted twice)

  1. 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?

    Posted 11 years ago on Friday July 27, 2012 | Permalink
  2. David Peralty

    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/

    Posted 11 years ago on Friday July 27, 2012 | Permalink
  3. 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;
    }
    Posted 11 years ago on Friday July 27, 2012 | Permalink
  4. 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

    Posted 11 years ago on Friday July 27, 2012 | Permalink
  5. David Peralty

    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.

    Posted 11 years ago on Friday July 27, 2012 | Permalink