HTML - How do I limit days to choose for date input?

Question

I have two date inputs to let users choose a range of date for searching. However, I need to limit that the date range should not be longer than 7 days. For example, if user choose date from 12/9/2018, the date to should not be more than 19/9/2018. How could I achieve it ? Thank you.

My codes:

<div class="container">
<div class="col-sm-12">
    <h1><span class="label label-danger">Report</span></h1><br><br>
      <div class="pull-right">
        <form class="form-inline" role="search" method = "post">
            <div class="form-group">
              <span class="label label-primary">Search and Sort</span>&nbsp; &nbsp;             
              <span class="label label-info">Date</span>&nbsp; &nbsp;
              <input type="date" class="form-control" placeholder="Order Date From" name = "searchDateFrom" >
              <input type="date" class="form-control" placeholder="Order Date To" name = "searchDateTo" >                    
            </div>
          <button class="btn btn-default " type="submit" name="submit" value = "search"><i class="glyphicon glyphicon-search"></i>
        </form>
      </div>
</div>

It can either prompting message to tell users to choose between the dates, or block the date from clicking. Please help, thanks.

Possible duplicate of [Jquery UI datepicker. Disable array of Dates](https://stackoverflow.com/questions/15400775/jquery-ui-datepicker-disable-array-of-dates) — Bilal Ahmed, Sep 12 '18 at 06:54
You can use the `min` and `max` attributes on a `` to limit available dates. — brombeer, Sep 12 '18 at 07:01
@BilalAhmed jquery UI isn't mentioned anywhere in this question — brombeer, Sep 12 '18 at 07:03
@kerbholz waoooo! then you should write html5 to disabled particular date — Bilal Ahmed, Sep 12 '18 at 07:04
i'm not trying to use `min` and `max` , or to disable particular dates, what I need is when user choose a from date, then the to date to choose must not be more than 7 days @kerbholz — , Sep 12 '18 at 07:11
Do that via Javascript once the first date is chosen. Then set the `max` of your second input to that date. — brombeer, Sep 12 '18 at 07:13
@kerbholz can u teach me how to do it ? or are there examples ? — , Sep 12 '18 at 07:23
I'm afraid I can't, total Javascript noob, sorry. Search the webs for something like "javascript onchange" — brombeer, Sep 12 '18 at 07:34

Francesco G. · Answer 1 · 2018-09-12T09:52:05.763

Here it is in plain JavaScript without jQuery or any other external dependencies. Note that I'v added ID's to the inputs. Also, you could shorten the code further, I've left it as it is to show you the process.

document.querySelector('#searchDateFrom').onchange = function(){
  let dtFrom = document.querySelector('#searchDateFrom').value;
  let dtTo = new Date(dtFrom);
  dtTo.setDate(dtTo.getDate() + 7);
  let sMonthTo = ((dtTo.getMonth() + 1) < 10 ? '0' + (dtTo.getMonth() + 1) : (dtTo.getMonth() + 1));
  let sDayTo = (dtTo.getDate() < 10 ? '0' + dtTo.getDate() : dtTo.getDate());
  document.querySelector('#searchDateTo').setAttribute('max', dtTo.getFullYear() + '-' + sMonthTo + '-' + sDayTo);
};

<form class="form-inline" role="search" method = "post">
    <div class="form-group">
      <span class="label label-primary">Search and Sort</span>&nbsp; &nbsp;             
      <span class="label label-info">Date</span>&nbsp; &nbsp;
      <input type="date" class="form-control" placeholder="Order Date From" name = "searchDateFrom" id="searchDateFrom">
      <input type="date" class="form-control" placeholder="Order Date To" name = "searchDateTo" id="searchDateTo">                    
    </div>
  <button class="btn btn-default " type="submit" name="submit" value = "search"><i class="glyphicon glyphicon-search"></i>
</form>

it works on your snippet, but i'm not sure why it doesn't work on my side :( — , Sep 13 '18 at 03:01
@J.Corchillene can you show some updated code? Is JavaScript source correctly included? Have you set the right IDs on the inputs? — Francesco G., Sep 13 '18 at 09:08

score 0 · Answer 2 · answered Sep 12 '18 at 07:58

HTML:

<p>Date:
<input id="txtDate" type="text" />
</p>
<p>
<input type="button" onclick="getdate()" value="Fill Follow Date" />
</p>
<p>Follow Date:
<input id="follow_Date" type="text" />
</p>

Add this jquery code

<script>
$(document).ready(function () {
$('#txtDate').datepicker();
$('#follow_Date').datepicker();
});

function getdate() {
var tt = document.getElementById('txtDate').value;

var date = new Date(tt);
var newdate = new Date(date);

newdate.setDate(newdate.getDate() + 3);

var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();

var someFormattedDate = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date').value = someFormattedDate;
}
</script>

HTML - How do I limit days to choose for date input?

2 Answers2