1

我想在我的Wordpress聯繫表中有兩個日期字段7.開始日期和結束日期。這些字段將是「Contact Form 7 Datepicker」插件的日期選擇器。 當訪客選擇了開始日期時,他應該只能選擇4天后和開始日期的結束日期。聯繫表7 Datepicker,日期範圍2日期

如何通過僅使用「聯繫表單7」表單創建者來實現此目的?

回答

3

這是語法我加入了「聯繫表格7」。

Start date charter*: 
[date* date-start date-format:MM_d_yy] 

End date charter*: 
[date* date-end date-format:MM_d_yy] 

而且我將此代碼添加到Wordpress主題的函數文件的末尾。

function calendar_js(){ 
    ?> 
    <script> 
    jQuery(function($){ 
      var start = $('.date-start input').first(); 
      var end = $('.date-end input').first(); 

      start.on('change', function() { 
        var start_date = $(this).datepicker('getDate'); 
        start_date.setDate(start_date.getDate() + 3); 
        end.datepicker('option', 'minDate', start_date); 
      }); 
    }); 
    </script> 
    <?php 
    } 
    add_action('wp_footer', 'calendar_js'); 

現在第二個日期選擇器必須至少4天后,然後第一個日期選擇器。

1

可能是這個插件會幫助你。這個插件的工作原理以及CF 7

http://wordpress.org/plugins/contact-form-7-datepicker/

而且你可以在CF中添加日期選擇器後添加自己的日期操縱的JavaScript 7.

例子:

jQuery(document).ready(function($) { 
    $(".from").datepicker({ 
     onClose: function(selectedDate) { 
      $("#to").datepicker("option", "minDate", selectedDate); 
     } 
    }); 
    $(".to").datepicker({ 
     onClose: function(selectedDate) { 
      $("#from").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 
}); 
+0

我已經安裝了插件。我想知道我下一步應該做什麼。 – SiteHopper

+0

我想你正在使用'contact-form-7'插件。我給你的鏈接是'contact-form-7-DATEPICKER'。 –

+0

是的,我也安裝了'contact-form-7-DATEPICKER'。 – SiteHopper