CODEWITHSUNDEEP
htmliphoneipaddateresponsive-design
karthik
karthik

Reputation: 459

Html 5 [input type=Date] control, MAX date is not working in iPhone/Ipad

Greetings.

Working with html date input control.

input type="date" max="2014-13-11"

In chrome its recognizing 'max'attribute hence restricting and disabling all future date

But, the same is not working in iPad/iphone. Instead its allowing to select future date in iPad.

Googled and came to know that ipad is not yet supporting Max attribute of date control.

Is there any work around? or any points / direction will be really help for me.

Many thanks. Karthik

Upvotes: 20

Views: 16324

Answers (1)

Edmundo Santos
Edmundo Santos

Reputation: 613

Safari on iOS does not support the attributes max and min for input="date".

You could use a JavaScript datapicker like Pikaday for this. See demo below:

var today = new Date();
var lastMonth = new Date().getMonth() - 1;

var picker = new Pikaday({
  field: document.getElementById('datepicker'),
  maxDate: today,  // maximum/latest date set to today
  // demo only
  position: 'top left',
  reposition: false
});
<!-- Pikaday Library -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

<!-- Datepicker Input -->
<label for="datepicker">Date</label>
<input type="text" id="datepicker">

For more info, please refer to the documentation on GitHub.

Upvotes: 3

Related Questions