jQuery datepicker: 2 input / caselle di testo e intervallo limitato

Sto usando il widget jQuery Datepicker con due caselle di immissione, una per la data “Da” e la seconda con la data “A” . Sto usando la demo funzionale di jQuery Datepicker come base per far funzionare le due caselle di input, ma devo essere in grado di aggiungere queste restrizioni aggiuntive:

  1. L’intervallo di date può essere non prima del 01 dicembre 2008

  2. “Per” data può essere entro e non oltre oggi

  3. Una volta selezionata la data “Da”, la data “A” può essere solo entro un intervallo di 7 giorni dopo la data “Da”

  4. Se una data “A” è selezionata per prima, la data “Da” può essere solo entro l’intervallo di 7 giorni prima della data “A” (con il limite del 01 dicembre come prima data selezionabile)

Non riesco a far funzionare tutto insieme.

In sintesi, mi piacerebbe poter selezionare un intervallo di massimo 7 giorni tra il 1 ° dicembre e oggi (mi rendo conto che lo sto pubblicando il 1 ° dicembre, quindi per il momento arriverò solo per il momento).

Il mio codice finora

$(function () { $('#txtStartDate, #txtEndDate').datepicker( { showOn: "both", beforeShow: customRange, dateFormat: "dd M yy", firstDay: 1, changeFirstDay: false }); }); function customRange(input) { return { minDate: (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : null), minDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null), maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null) }; } 

Mi manca la restrizione del range di 7 giorni e impedisco anche una selezione di data “A” prima del 01 dicembre 2008 o dopo oggi. Qualsiasi aiuto sarebbe molto apprezzato, grazie.

Molte grazie per il tuo aiuto Ben, ho costruito i tuoi post e sono arrivato a questo. Ora è completo e funziona brillantemente!

Ecco una demo di lavoro . Aggiungi / modifica all’URL per vedere il codice

Codice completo sotto-

 $(function () { $('#txtStartDate, #txtEndDate').datepicker({ showOn: "both", beforeShow: customRange, dateFormat: "dd M yy", firstDay: 1, changeFirstDay: false }); }); function customRange(input) { var min = new Date(2008, 11 - 1, 1), //Set this to your absolute minimum date dateMin = min, dateMax = null, dayRange = 6; // Set this to the range of days you want to restrict to if (input.id === "txtStartDate") { if ($("#txtEndDate").datepicker("getDate") != null) { dateMax = $("#txtEndDate").datepicker("getDate"); dateMin = $("#txtEndDate").datepicker("getDate"); dateMin.setDate(dateMin.getDate() - dayRange); if (dateMin < min) { dateMin = min; } } else { dateMax = new Date; //Set this to your absolute maximum date } } else if (input.id === "txtEndDate") { dateMax = new Date; //Set this to your absolute maximum date if ($("#txtStartDate").datepicker("getDate") != null) { dateMin = $("#txtStartDate").datepicker("getDate"); var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + dayRange); if(rangeMax < dateMax) { dateMax = rangeMax; } } } return { minDate: dateMin, maxDate: dateMax }; } 

Bene, che ne dici di questo:

 function customRange(input) { var min = new Date(2008, 12 - 1, 1); var dateMin = min; var dateMax = null; if (input.id == "txtStartDate" && $("#txtEndDate").datepicker("getDate") != null) { dateMax = $("#txtEndDate").datepicker("getDate"); dateMin = $("#txtEndDate").datepicker("getDate"); dateMin.setDate(dateMin.getDate() - 7); if (dateMin < min) { dateMin = min; } } else if (input.id == "txtEndDate") { dateMax = new Date(); if ($("#txtStartDate").datepicker("getDate") != null) { dateMin = $("#txtStartDate").datepicker("getDate"); dateMax = $("#txtStartDate").datepicker("getDate"); dateMax.setDate(dateMax.getDate() + 7); } } return { minDate: dateMin, maxDate: dateMax }; } 

Questo è il meglio che ho potuto trovare per soddisfare tutte le tue esigenze (penso ...)

Mi rendo conto che sono un po ‘in ritardo per la festa, ma ecco come ho modificato il codice di esempio di lavoro. Non avevo bisogno di impostare una data massima e minima specifica, semplicemente non volevo che un intervallo di date si sovrapponesse, quindi li lascio semplicemente impostare tra loro:

 jQuery(function() { jQuery('#calendardatetime_required_to, #calendardatetime_required_from').datepicker('option', { beforeShow: customRange }); }); function customRange(input) { if (input.id == 'calendardatetime_required_to') { return { minDate: jQuery('#calendardatetime_required_from').datepicker("getDate") }; } else if (input.id == 'calendardatetime_required_from') { return { maxDate: jQuery('#calendardatetime_required_to').datepicker("getDate") }; } } 

(I miei datepicker erano già inizializzati in uno script più avanti, ma sono solo impostazioni predefinite.)

Sembra fare quello che mi serve per 🙂

Vedi qui per il mio esempio.

Prendi in considerazione l’utilizzo di rangeSelect per avere un controllo anziché due.

Per ottenere ciò che si sta cercando, suppongo sia necessario aggiungere un listener onSelect e quindi chiamare datepicker( "option", settings ) per modificare le impostazioni.

La tua data di inizio per txtStartDate non funziona perché il tuo secondo minDate viene impostato su null quando controlla input.id la seconda volta. Inoltre, maxDate dovrebbe verificare txtEndDate, non txtStartDate. Prova questo:

  function customRange(input) { var mDate = (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : $("#txtStartDate").datepicker("getDate")); return { minDate: mDate, maxDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate").getDate() + 5 : null) }; } 

Non so perché il ‘+ 5’ invece di ‘+ 7’, ma se aggiungo 0, ottengo un intervallo di date selezionabile del giorno che ho scelto più il successivo.

Ecco una soluzione che ho trovato dopo un sacco di ricerca di una soluzione a quello che penso sia un problema comune. In questo modo si “rimbalzano” gli input attorno a un intervallo di input condiviso di giorni compatibili. Significato: se ho due campi, uno può essere usato per vincolare l’altro, e l’altro potrebbe ridefinire l’originale se necessario. L’objective di questo è di garantire sempre che ci sia solo una gamma limitata di giorni (o mesi o qualsiasi altra cosa) tra i due campi. Questo esempio specifico limita anche la quantità di tempo nel futuro che potrebbe essere selezionato qualcosa in entrambi i campi (ad es. 3 mesi).

$("#startdate").datepicker({ minDate: '+5', maxDate: '+3M', changeMonth: true, showAnim: 'blind', onSelect: function(dateText, inst){ // Capture the Date from User Selection var oldDate = new Date(dateText); var newDate = new Date(dateText); // Compute the Future Limiting Date newDate.setDate(newDate.getDate()+5); // Set the Widget Properties $("#enddate").datepicker('option', 'minDate', oldDate); $("#enddate").datepicker('option', 'maxDate', newDate); } }); $("#enddate").datepicker({ minDate: '+5', maxDate: '+3M', changeMonth: true, showAnim: 'blind', onSelect: function(dateText, inst){ // Capture the Date from User Selection var endDate = new Date(dateText); var startDate = new Date(dateText); // Compute the Future Limiting Date startDate.setDate(startDate.getDate()-5); // Set the Widget Properties $("#startdate").datepicker('option', 'minDate', startDate); $("#startdate").datepicker('option', 'maxDate', endDate); } });
$("#startdate").datepicker({ minDate: '+5', maxDate: '+3M', changeMonth: true, showAnim: 'blind', onSelect: function(dateText, inst){ // Capture the Date from User Selection var oldDate = new Date(dateText); var newDate = new Date(dateText); // Compute the Future Limiting Date newDate.setDate(newDate.getDate()+5); // Set the Widget Properties $("#enddate").datepicker('option', 'minDate', oldDate); $("#enddate").datepicker('option', 'maxDate', newDate); } }); $("#enddate").datepicker({ minDate: '+5', maxDate: '+3M', changeMonth: true, showAnim: 'blind', onSelect: function(dateText, inst){ // Capture the Date from User Selection var endDate = new Date(dateText); var startDate = new Date(dateText); // Compute the Future Limiting Date startDate.setDate(startDate.getDate()-5); // Set the Widget Properties $("#startdate").datepicker('option', 'minDate', startDate); $("#startdate").datepicker('option', 'maxDate', endDate); } }); 

questo è il modo in cui lo uso:

 function customRange(input) { var min = new Date(); return { minDate: ((input.id == "txtStartDate") ? min : (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null)), maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null) }; } 

Questo è come l’ho fatto. Ho preso la fonte dal sito web di Jquery UI e l’ho modificata per aggiungere i tuoi vincoli.

 $(document).ready(function () { var dates = $('#StartDate, #EndDate').datepicker({ minDate: new Date(2008, 11, 1), maxDate: "+0D", dateFormat: "dd M yy", changeMonth: true, changeYear: true, onSelect: function (selectedDate) { var option = this.id == "StartDate" ? "minDate" : "maxDate", instance = $(this).data("datepicker"), date = $.datepicker.parseDate( instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); var edate; var otherOption; var d; if (option == "minDate") { otherOption = "maxDate"; d = date.getDate() + 7; } else if (option == "maxDate") { otherOption = "minDate"; d = date.getDate() - 7; } var m = date.getMonth(); var y = date.getFullYear(); edate = new Date(y, m, d); dates.not(this).datepicker("option", option, date); dates.not(this).datepicker("option", otherOption, edate); } }); }); 

Idea iniziale da: http://jqueryui.com/demos/datepicker/#date-range

Nota: Avresti anche bisogno di un’opzione per reimpostare / cancellare le date (cioè se un utente sceglie una “Data di inizio”, la “Data di fine” diventa limitata. Dopo aver scelto una “Data di inizio” se l’utente sceglie ora “A data ‘, anche la data From viene limitata. È necessario disporre di un’opzione chiara per consentire all’utente di scegliere una diversa data “Da” ora.)