HTML5 - End date less than start date

Asked

Viewed 1,092 times

2

I own two camps:

<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 and set as disabled. The second field, I have the open date.

Note: I am only using HTML5 type date, I am not using any type of validator.

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

html5

2 answers

3


Just use the attribute min:

<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 final date is always higher than the initial one, just add one 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 ?>">

Heed: It is worth remembering that if the form is submitted, the field data_inicial will not be sent as it is defined as disabled. If the intention is to submit it together, set it to readonly, so the edition of the value will also not be possible, but will be sent along with the form.

  • This would be correct, however, we can add +1 on the date, so that it is the next day, and not the same day. But I see no need... Your answer was exact to what I need.

  • @Andersoncarloswoss, how would I make the current date +1? To leave for the next day? Can you add in your reply? Thank you.

  • @Andrébaill made.

  • About the disabled, that’s right, because I treat it differently when I get the post :) More to more, that’s right Anderson, grateful.

  • Already tested on all browsers?

  • No, but HTML 5 support is already well consolidated. I don’t think there should be any more serious problems with this. Link Can I Use.

  • I have IE11, Edge 14, Firefox 54, and it doesn’t work. Are my browsers bugged? Yours do work?

  • here only Chrome and Opera

  • I tried this, but it doesn’t work. Even assigning via js, the field is not filled with the date of the day.

Show 4 more comments

2

With HTML5, the life of developers has probably become simpler through the introduction of new input types. However, like all other HTML5 features, the support is still very limited by the browsers. That’s why we should be cautious when using these new features. For example, input type date only works in Chrome and Opera.

This exposed I find useful to present an alternative that works in all current Browsers.

Alternative that works in 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>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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

OBS

  1. Date format is dd/mm/yyyy and can be set on line dateFormat: dd/mm/yy
  2. The acceptance of dates from the day following the current one is set on that line minDate: 1 Zero to accept from current date inclusive. Accept negative values.

While Chrome largely dominates the most commonly used Internet Browser statistics with 75.7% in April/2017 we should not overlook the remaining portion. Source

Documentation:

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.