HTML5 - Final date less than the starting date

Question

HTML5 - Final date less than the starting date

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

I have two fields:

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

The first field, I have the initial date filled in and set to disabled. The second field, I have the date open.

Note: I'm just using HTML5's date type, I'm not using any kind of validator.

How do I make the second field always GREATER than the first? Is there a rule I can add to the field to fetch the date from the start date only?

html5

asked by anonymous 03.07.2017 / 22:54

2 answers

2

With HTML5, developers' lives have probably gotten simpler through the introduction of new types of inputs. However, like all other HTML5 features, support is still very limited by browsers. So we must exercise caution when using these new features. For example, the input type date only works in Chrome and Opera.

This is what I found useful to present an alternative that works on all current browsers.

Alternative that works on all browsers

$(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><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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

OBS

The date format is dd / mm / yyyy and can be set to line dateFormat: dd/mm/yy

Date acceptance from the day after the current date is set on this line minDate: 1 Zero to accept from the current date inclusive. Accepts negative values.

Although Chrome dominates widely used Internet Browser statistics with 75.7% in April / 2017, we should not overlook the remaining portion. Font

Documentation:

04.07.2017 / 06:37

foreach - Moving CSV file What is the good solution to replace alert?

score 3 · Accepted Answer

Just use the min attribute:

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

See the example below:

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

As commented, if the need is that the end date is always greater than the initial date, just add a day to it:

<?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 ?>">

Warning: Note that if the form is submitted, the data_inicial field will not be sent because it is set to disabled . If the intention is to submit it together, set it to readonly , so editing the value will not be possible either, but it will be sent along with the form.