2

Possuo dois campos:

<input type="date" id="data_inicial" value="<?php echo date("Y-m-d"); ?>" disabled>
<input type="date" id="data_final">

O primeiro campo, tenho a data inicial preenchida e setada como desabilitado. O segundo campo, tenho a data em aberto.

Nota: Estou usando apenas type date do HTML5, não estou usando nenhum tipo de validador.

Como faço para que o segundo campo, sempre seja MAIOR do que o primeiro? Há alguma regra que eu possa acrescentar ao campo para buscar a data a partir somente da data de inicio?

2 Respostas 2

3

Basta utilizar o atributo min:

<input type="date" id="data_final" min="<?= date("Y-m-d") ?>">

Veja o exemplo abaixo:

<input type="date" id="data_final" min="2017-07-01">

Como comentado, se a necessidade for que a data final seja sempre maior que a inicial, basta adicionar um dia à mesma:

<?php

$data_inicial = date("Y-m-d");
$data_final = date('Y-m-d', strtotime($data_inicial . ' +1 day'));

?>

<input type="date" id="data_inicial" value="<?= $data_inicial ?>" disabled>
<input type="date" id="data_final" min="<?= $data_final ?>">

Atenção: Vale lembrar que se o formulário for submetido, o campo data_inicial não será enviado, pois está definido como disabled. Se a intenção é submetê-lo junto, configure-o como readonly, assim a edição do valor também não será possível, mas será enviado junto com o formulário.

9
  • Isto seria o correto, porém, podemos adicionar +1 na data, para que seja o próximo dia, e não o mesmo dia. Mas não vejo necessidade... Sua resposta foi exata ao que preciso. Commented 3/07/2017 às 21:02
  • @AndersonCarlosWoss, como eu faria a data atual +1? Para deixarmos para o próximo dia? Pode acrescentar em sua resposta? Obrigado. Commented 3/07/2017 às 21:07
  • @AndréBaill feito.
    – Woss
    Commented 3/07/2017 às 21:11
  • Sobre o disabled, é isso mesmo, porque eu trato de outra forma quando eu recebo o post :) De mais a mais, é isso mesmo Anderson, grato. Commented 3/07/2017 às 21:12
  • Já testou em todos os navegadores?
    – user60252
    Commented 4/07/2017 às 2:57
2

Com a HTML5 a vida dos desenvolvedores provavelmente ficou mais simples através das introduções dos novos tipos de inputs. Porém, como todos os outros recursos da HTML5, o suporte ainda é muito limitado pela parte dos browsers. Por isso devemos ter cautelas ao usar esse novos recursos. Por exemplo, o input type date só funciona no Chrome e Opera.

Isto exposto acho útil apresentar uma alternativa que funcione em todos os Navegadores atuais.

Alternativa que funciona em todos os Navegadores

$(document).ready(function(){
$("#data_final").datepicker({
	dateFormat: 'dd/mm/yy',
	dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
	dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
	dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
	monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
	monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
	nextText: 'Próximo',
	prevText: 'Anterior',
	minDate: 1 

	});

});
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="date" id="data_final" />

OBS

  1. O formato da data é dd/mm/aaaa e pode ser setada na linha dateFormat: dd/mm/yy
  2. A aceitação de datas a partir do dia seguinte ao atual é setado nessa linha minDate: 1 Zero para aceitar a partir da data atual inclusive. Aceita valores negativos.

Embora o Chrome domine amplamente as estatísticas de Navegadores de Internet mais usados com 75.7% em abril/2017 não devemos desprezar a parcela restante. Fonte

Documentação:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .