jQuery datepicker- 2 entradas / caixas de texto e gama restringindo

https://stackoverflow.com/questions/330737

11-07-2019
|

Pergunta

Eu estou usando o jQuery DatePicker widget com duas caixas de entrada, um para o "De" data e o segundo com o "para" data. Eu estou usando o jQuery Datepicker demonstração funcional como uma base para obter as duas caixas de entrada para o trabalho uns com os outros, mas Eu preciso ser capaz de adicionar estas restrições adicionais:

O intervalo de datas pode haver mais cedo do que 01 de dezembro de 2008
"para" data não pode ser mais tarde do que hoje
Uma vez que um "De" data é selecionado, o "para" data só pode estar dentro de um intervalo de 7 dias depois "De" data
Se a "para" data é selecionado pela primeira vez, em seguida, o "De" data só pode estar dentro do intervalo de 7 dias antes do "para" data (com o limite de 01 de dezembro sendo o primeiro data selecionável)

Eu não consigo obter todos os itens acima trabalhar juntos.

Em resumo, eu gostaria de ser capaz de selecionar um intervalo de 7 dias entre 01 de dezembro e hoje (eu percebo que eu estou postando isso no dia 1º de dezembro, portanto só vai ficar hoje para o momento).

O 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 faltando a restrição de faixa 7 dias e também prevenir a seleção "Para" data anterior a 01 de dezembro de 2008 ou depois de hoje. Qualquer ajuda seria muito apreciada, obrigado.

Solução

Muito obrigado pela vossa ajuda Ben, tenho construído sobre as suas mensagens e vêm-se com isso. Ele está agora completa e funciona de forma brilhante!

Aqui está um de Trabalho Demonstração . Adicionar / editar para a URL para ver o código

completa código 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
    };     
}

Outras dicas

Tudo bem, como sobre isto:

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 poderia vir acima com que atendeu a todas as suas necessidades (eu acho ...)

Eu percebo que estou um pouco atrasado para a festa, mas aqui está como eu modificado o código de exemplo de trabalho. Eu não tinha necessidade de definir uma data mínima específica máxima e, só não queria uma sobreposição de intervalo de datas, então eu apenas deixá-los definir o 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 foram já inicializado em um script mais acima, mas é configurações apenas padrão.)

Parece que fazer o que eu preciso que ele:)

aqui para o meu exemplo.

Considere o uso de rangeSelect ter um controle em vez de dois.

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

A sua data de início para txtStartDate não está funcionando porque o seu segundo minDate está sendo definido como nulo quando se verifica a input.id pela segunda vez. Além disso, MaxDate deve verificar para 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 por que o '+ 5' em vez de '+ 7', mas se eu adicionar 0, recebo um intervalo de datas selecionável do dia eu peguei mais a seguir.

Aqui está uma solução que eu vim com depois de um monte de cavar de uma solução para o que eu acho que é um problema comum. Isso efetivamente 'saltos' as entradas em torno de uma faixa de entrada compartilhada de dias compatíveis. Significado - se eu tiver dois campos, qualquer um pode ser usado para restringir o outro, eo outro poderia redefinir o original, se necessário. O objetivo deste é garantir sempre que há 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 de que algo poderia ser selecionada no 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);

    }

  });

isto é como eu usá-lo:

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

Isto é como eu ter feito isso. Tomei a fonte do site da jQuery UI e modificado 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);
        }
    });
});

idéia inicial de: http://jqueryui.com/demos/datepicker/#date- gama

Nota:. Você também precisa uma opção para redefinir / limpar as datas (ou seja, se um usuário escolhe um 'From date', o 'Até à data' ser limitado após a escolha de um 'From data 'Se o usuário agora escolhe um 'até à data', a data a partir da também fica limitada. Você precisa ter uma clara opção para permitir que o usuário escolha um diferente 'de' data de agora.)

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow