jQuery datepicker – 2 inputs / checkboxs de texto e intervalo de restrição

Estou usando o widget jQuery DatePicker com duas checkboxs de input, uma para a data “De” e a segunda com a data “Para” . Eu estou usando o demo funcional jQuery Datepicker como base para obter as duas checkboxs de input para trabalhar uns com os outros, mas eu preciso ser capaz de adicionar essas restrições adicionais:

  1. O período não pode ser anterior a 01 de dezembro de 2008

  2. “Até” data não pode ser posterior a hoje

  3. Quando uma data “De” é selecionada, a data “Para” só pode estar dentro de um intervalo de 7 dias após a data “De” .

  4. Se uma data “Para” for selecionada primeiro, a data “De” só poderá estar no intervalo de 7 dias antes da data “Para” (com o limite de 01 de dezembro sendo a primeira data selecionável)

Eu não consigo colocar todos os itens acima trabalhando juntos.

Em resumo, gostaria de poder selecionar um intervalo de até 7 dias entre 01 de dezembro e hoje (percebo que estou postando isso em 1º de dezembro, portanto, só receberei hoje por enquanto).

Meu código até agora

$(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) }; } 

Eu estou perdendo a restrição de intervalo de 7 dias e também impedindo uma seleção de data “To” antes de 01 de dezembro de 2008 ou depois de hoje. Qualquer ajuda seria muito apreciada, obrigado.

Muito obrigado pela sua ajuda Ben, eu construí sobre as suas mensagens e descobri isso. Agora está completo e funciona shinymente!

Aqui está uma demonstração de trabalho . Adicionar / editar na URL para ver o código

Código Completo abaixo

 $(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 }; } 

Tudo bem, que tal isso:

 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 }; } 

Este é o melhor que eu consegui encontrar que satisfez todas as suas necessidades (eu acho ...)

Eu percebo que estou um pouco atrasado para a festa, mas aqui está como eu modifiquei o código de exemplo de trabalho. Não precisei definir uma data máxima e mínima específica, apenas não queria que a faixa de datas se sobrepusesse, por isso deixei que eles configurassem um ao outro:

 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") }; } } 

(Meus datepickers já foram inicializados em um script mais acima, mas são apenas configurações padrão.)

Parece fazer o que eu preciso para 🙂

Veja aqui meu exemplo.

Considere usar rangeSelect para ter um controle em vez de dois.

Para conseguir o que você está depois, suponho que você precisa adicionar um ouvinte onSelect e, em seguida, chamar datepicker( "option", settings ) para alterar as configurações.

Sua data de início para txtStartDate não está funcionando porque sua segunda minDate está sendo definida como null quando verifica a input.id pela segunda vez. Além disso, maxDate deve estar verificando txtEndDate, não txtStartDate. Tente isto:

  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) }; } 

Eu não sei porque o ‘+ 5’ em vez de ‘+ 7’, mas se eu adicionar 0, recebo um intervalo de datas selecionável do dia que escolhi mais o próximo.

Aqui está uma solução que eu criei depois de muita procura de uma solução para o que eu acho que é um problema comum. Isso efetivamente “salta” as inputs em torno de um intervalo de input compartilhado de dias compatíveis. Significado – se eu tiver dois campos, qualquer um pode ser usado para restringir o outro, e o outro poderia redefinir o original, se necessário. O objective disso é sempre garantir que haja apenas um intervalo finito de dias (ou meses ou qualquer outro) entre os dois campos. Este exemplo específico também limita a quantidade de tempo no futuro que algo poderia ser selecionado em qualquer campo (por exemplo, 3 meses).

$("#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); } }); 

é assim que eu 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) }; } 

Foi assim que eu fiz isso. Eu peguei a fonte do site da IU do Jquery e modifiquei para adicionar suas restrições.

 $(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); } }); }); 

Ideia inicial de: http://jqueryui.com/demos/datepicker/#date-range

Nota: Você também precisaria de uma opção para redefinir / limpar as datas (ou seja, se um usuário escolher um ‘De data’, o ‘Até a data’ ficará limitado. Depois de escolher um ‘De data’ se o usuário agora escolher ‘Data ‘, a data de também é limitada. Você precisa ter uma opção clara para permitir que o usuário escolha uma data diferente “A partir de agora”.