Existe-t-il un moyen de définir maxDate ou minDate avec une fonction dans bootstrap datapicker?

Question

Je suis à la recherche de quelque chose de très simple pour moi mais je ne l'ai pas trouvé ici et dans les documentations bootstrap datetimepicker aussi.

L'idée est très simple. J'ai deux champs datetime qui auront actuellement des valeurs à la page_load récupérée du serveur.

Maintenant je veux m'assurer que le maxDate de la première date est la deuxième valeur de date et le minDate de la deuxième date est la date du premier champ.

Voici mon code:

$(document).ready(function() { 
$('[id^="datetimepickerStartDate"]').datetimepicker({ 
    useCurrent: false, 
    format: applicationDateTimeFormat, 
    ignoreReadonly: true, 
    //maxDate: function() { 
    // var id = $(this).attr('id'); 
    // var str = id.split("_"); 
    // if (str.length <= 1) { 
    //  var secondDateTimePicker1 = $('#datetimepickerFinishDate').data("DateTimePicker").date(); 
    //  if (secondDateTimePicker1.length) { 
    //   return secondDateTimePicker1; 
    //  } 
    //  return null; 
    // } else { 
    //  var secondDateTimePicker2 = $("#datetimepickerFinishDate_" + str[1]).data("DateTimePicker").date(); 
    //  if (secondDateTimePicker2.length) { 
    //   return secondDateTimePicker2; 
    //  } 
    //  return null; 
    // } 
    //}, 
    locale: locale 
}); 
$('[id^="datetimepickerFinishDate"]').datetimepicker({ 
    useCurrent: false, 
    format: applicationDateTimeFormat, 
    ignoreReadonly: true, 
    //minDate: function() { 
    // var id = $(this).attr('id'); 
    // var str = id.split("_"); 
    // if (str.length <= 1) { 
    //  var secondDateTimePicker1 = $('#datetimepickerStartDate').data("DateTimePicker").date(); 
    //  if (secondDateTimePicker1.length) { 
    //   return secondDateTimePicker1; 
    //  } 
    //  return null; 
    // } else { 
    //  var secondDateTimePicker2 = $("#datetimepickerStartDate_" + str[1]).data("DateTimePicker").date(); 
    //  if (secondDateTimePicker2.length) { 
    //   return secondDateTimePicker2; 
    //  } 
    //  return null; 
    // } 
    //}, 
    //minDate: new Date().setHours(0, 0, 0, 0), 
    locale: locale 
}); 
$('[id^="datetimepickerStartDate"]') 
    .on("dp.change", 
    function (e) { 
     var id = $(this).attr('id'); 
     var str = id.split("_"); 
     if (str.length <= 1) { 
      $('#datetimepickerFinishDate').data("DateTimePicker").minDate(e.date); 
     } else { 
      $("#datetimepickerFinishDate_" + str[1]).data("DateTimePicker").minDate(e.date); 
      $(id).datetimepicker('hide'); 
     } 
    }); 

$('[id^="datetimepickerFinishDate"]') 
    .on("dp.change", 
    function (e) { 
     var id = $(this).attr('id'); 
     var str = id.split("_"); 
     if (str.length <= 1) { 
      $('#datetimepickerStartDate').data("DateTimePicker").maxDate(e.date); 
     } else { 
      $("#datetimepickerStartDate_" + str[1]).data("DateTimePicker").maxDate(e.date); 
      $(id).datetimepicker('hide'); 
     } 
     $(id).datetimepicker('hide'); 
    }); 
}); 

Son beaucoup de code, mais ce que je cherche est une façon comment puis-je mettre ces règles à la première ouverture du DateTimePicker. Donc, j'ai pensé à exécuter la fonction e sur la propriété maxDate et minDate mais semblait ne pas fonctionner!

Une idée de comment résoudre ce problème?

L'événement dp.change ne fonctionne que lorsque la date est changée pour la première fois ...

Answer 1

vous avez plus complexant cela, ce que vous cherchez est essentiellement: 1) Le maxDate pour le premier sélecteur est celui sélectionné sur le second sélecteur. 2) La minDate à sélectionner sur le second sélecteur est celle qui a le premier sélecteur.

Donc, il y a un exemple sur la page officielle: http://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

Mais comme vous avez des valeurs de la charge de votre page, j'ai ce script général:

function AplicarLinkedDatePicker() { 
    var $Min = $('.datetimepickerMin'); 
    var $Max = $('.datetimepickerMax'); 

    var valInputMax = $Max.children(':input').val(); 
    var valInputMin = $Min.children(':input').val(); 

    var format = 'DD/MM/YYYY'; 

    $Min.datetimepicker({ 
     format: format, 
     useCurrent: false, 

    }); 

    $Max.datetimepicker({ 
     format: format, 
     useCurrent: false, 
    }); 

    $Min.on("dp.change", function (e) { 
     $Max.data("DateTimePicker").minDate(e.date); 
    }); 

    $Max.on("dp.change", function (e) { 
     $Min.data("DateTimePicker").maxDate(e.date); 
    }); 

    if (valInputMin != null) { 
     $Max.data("DateTimePicker").minDate(moment(valInputMin, format).startOf('day')); 
    } 

    if (valInputMax != null) { 
     $Min.data("DateTimePicker").maxDate(moment(valInputMax, format).endOf('day')); 
    } 


} 

Alors qu'est-ce que tous les ci-dessus? Il vérifie si does a une valeur l'entrée liée au sélecteur et définit les minDate et maxDate respectifs, et sinon il sera ignoré et laissé par défaut.