Dates de début et de fin avec Datepicker jQuery et Gravity Forms

Question

J'ai un formulaire avec Gravity Forms dans WordPress, ce formulaire a 2 datepickers: Date d'arrivée et date de départ, mais je veux que lorsque le client sélectionne une date dans la date de check-in, automatiquement la date de départ mise à jour avec un jour après la date d'arrivée, donc, ce que j'ai fait sans résultat:

D'abord j'ai ajouté une fonction dans mon functions.php de mon thème :

/** 
* Gravity Forms Datepicker Changes 
*/ 
function my_scripts_method() { 
    wp_register_script('my-js-file', 
     get_template_directory_uri() . '/js/my-js.js', 
     array('jquery'), 
     '1.0', 
     false); 

    wp_enqueue_script('my-js-file'); 
} 

add_action('wp_enqueue_scripts', 'my_scripts_method'); 

Puis je crée un dossier dans mon thème appelé /js et aussi je crée un fichier appelé my-js.js , Dans lequel j'ai ce code:

jQuery.noConflict(); 

jQuery(document).ready(function ($)) { 
    $('#input_7_1').datepicker({ 
     changeMonth: true, 
     onSelect: function (selectedDate) { 
      $('#input_7_5').datepicker('option', 'minDate', selectedDate); 
     } 
    }); 

    $('#input_7_5').datepicker({ 
     changeMonth: true, 
     onSelect: function (selectedDate) { 
      $('#input_7_1').datepicker('option', 'maxDate', selectedDate); 
     } 
    }); 
}); 

Mais le problème est qu'il n'y a pas d'effet dans mes datepickers, rien ne change, aucune idée pourquoi est-ce qui se passe?

Il ya une autre chose étrange, si les formes de gravité ont ce fichier: datepicker.js et si je supprime tout là, rien ne change, ou si changer une valeur, il n'y a pas non plus de changements. c'est le code dans ce fichier:

jQuery(document).ready(gformInitDatepicker); 
function gformInitDatepicker(){ 
    jQuery('.datepicker').each(
     function(){ 
      var element = jQuery(this); 
      var format = "mm/dd/yy"; 

      if(element.hasClass("mdy")) 
       format = "mm/dd/yy"; 
      else if(element.hasClass("dmy")) 
       format = "dd/mm/yy"; 
      else if(element.hasClass("dmy_dash")) 
       format = "dd-mm-yy"; 
      else if(element.hasClass("dmy_dot")) 
       format = "dd.mm.yy"; 
      else if(element.hasClass("ymd_slash")) 
       format = "yy/mm/dd"; 
      else if(element.hasClass("ymd_dash")) 
       format = "yy-mm-dd"; 
      else if(element.hasClass("ymd_dot")) 
       format = "yy.mm.dd"; 

      var image = ""; 
      var showOn = "focus"; 
      if(element.hasClass("datepicker_with_icon")){ 
       showOn = "both"; 
       image = jQuery('#gforms_calendar_icon_' + this.id).val(); 
      } 

      element.datepicker({ yearRange: '-100:+20', minDate: +10, maxDate: "+24M +30D", showOn: showOn, buttonImage: image, buttonImageOnly: true, dateFormat: format, changeMonth: false, changeYear: false, showAnim: 'slideDown', duration: 'slow' }).attr('readonly','readonly'); 
     } 
    ); 
} 

Answer 1

je me suis dit à la fin, et je voudrais partager la solution:

Pour une raison que je n'étais pas en mesure d'utiliser le code de la manière je l'ai essayé, donc le code dans les fonctions ne fonctionne pas, mais j'ai essayé avec un autre code en insérant ceci sur mon page.php de mon thème, et cela a fonctionné, aussi j'ai dû changer chaque "$" en "jQuery", donc le code travaillé de cette façon, c'est le code que j'ai utilisé:

<script type="text/javascript"> 
jQuery(document).bind('gform_post_render', function(){ 
     // destroy default Gravity Form datepicker 
jQuery("#input_7_1").datepicker('destroy'); 
     // create new custom datepicker 
jQuery('#input_7_1').datepicker({ 
    minDate: 1, 
    defaultDate: 0, 
    dateFormat: "m/d/yy", 
    changeMonth: true, 
    changeYear: true, 
    onClose: function (dateText, inst) { 
     var d = jQuery.datepicker.parseDate(inst.settings.dateFormat, dateText); 
     d.setDate(d.getDate() + 1); 
     jQuery('#input_7_5').val(jQuery.datepicker.formatDate(inst.settings.dateFormat, d)); 
     jQuery('#input_7_5').datepicker('option', { 
      minDate: jQuery.datepicker.formatDate(inst.settings.dateFormat, d) 
     }); 
    } 
}); 
// destroy default Gravity Form datepicker 
jQuery('#input_7_5').datepicker('destroy'); 
jQuery('#input_7_5').datepicker({ 
    minDate: "d", 
    defaultDate: "d", 
    dateFormat: "m/d/yy", 
    changeMonth: true, 
    changeYear: false, 
}); 
}) 
</script> 

Espérons que cela aide quelqu'un d'autre qui essaie de changer quelque chose de la j requête datepicker de formes de gravité.

Meilleures salutations

Answer 2

Vous pouvez le faire en utilisant setDate, voir ce Fiddle.

$(function() { 
    $("#from").datepicker({ 
    onSelect: function() { 
     var newDate = $(this).datepicker('getDate'); 
     newDate.setDate(newDate.getDate()+7); 
     $('#to').datepicker('setDate', newDate); 
    } 
    }); 

    $("#to").datepicker(); 
}); 

Answer 3

Votre code fonctionne et je l'utilise sur mon site, mais j'avais une question que je trouve un moyen de le réparer.

Le problème était que lorsque vous cliquez sur le champ de saisie la première fois, le programme datepicker s'affiche très bien. Mais si vous ne choisissez pas une date et cliquez ailleurs sur la page, lorsque vous cliquez de nouveau sur le champ de saisie, le programme datepicker n'apparaît plus. Le correctif pour cela était de changer l'événement onClose en surSelect. Je suis un noob alors je ne sais pas ce qui cause le problème mais je l'ai fait fonctionner maintenant.

<script type="text/javascript"> 
jQuery(document).bind('gform_post_render', function(){ 
jQuery(".event_date_value input").datepicker('destroy'); 
jQuery('.event_date_value input').datepicker({ 
    minDate: 1, 
    defaultDate: 0, 
    dateFormat: "m/d/yy", 
    changeMonth: true, 
    changeYear: true, 
    onSelect: function (dateText, inst) { 
     var d = jQuery.datepicker.parseDate(inst.settings.dateFormat, dateText); 
     d.setDate(d.getDate() - 30); 
     jQuery('.balance_date_value input').val(jQuery.datepicker.formatDate(inst.settings.dateFormat, d)); 
    jQuery('.balance_date_value input').datepicker('option', { 
     minDate: jQuery.datepicker.formatDate(inst.settings.dateFormat, d) 
    }); 
} 
}); 

jQuery('.balance_date_value input').datepicker('destroy'); 
jQuery('.balance_date_value input').datepicker({ 
    minDate: "d", 
    defaultDate: "d", 
    dateFormat: "m/d/yy", 
    changeMonth: true, 
    changeYear: false, 
}); 
}) 
</script>` 

Answer 4

Je sais que c'est un peu ancien poste, mais pour ceux qui trébuche sur la même question, la question ne nécessite pas une telle solution complexe - tout ce qui manquait était le « rafraichissement

jQuery.noConflict(); 

jQuery(document).ready(function ($)) { 
    $('#input_7_1').datepicker({ 
     changeMonth: true, 
     onSelect: function (selectedDate) { 
      $('#input_7_5').datepicker('option', 'minDate', selectedDate); 
      $('#input_7_5').datepicker('refresh'); 
     } 
    }); 

    $('#input_7_5').datepicker({ 
     changeMonth: true, 
     onSelect: function (selectedDate) { 
      $('#input_7_1').datepicker('option', 'maxDate', selectedDate); 
      $('#input_7_1').datepicker('refresh'); 
     } 
    }); 
}); 

Answer 5

Si vous ne voulez pas vous tracasser avec le code, j'ai écrit un plugin qui va gérer cela à partir de l'interface utilisateur de Gravity Forms.

http://gravitywiz.com/how-to-restrict-dates-in-second-date-field-based-on-date-selected-in-first-date-field-with-gravity-forms/