CODEWITHSUNDEEP
javascripthtml
Jack Johnson
Jack Johnson

Reputation: 1525

Set date input field's max date to today

I just have a simple line of code like this:

<input type='date' min='1899-01-01' max='2000-01-01'>

Is there a simple way to set the max date to "today" instead of 2000-01-01? Or do I have to use Javascript to do this?

Upvotes: 130

Views: 515222

Answers (19)

ZC13
ZC13

Reputation: 60

Just like this:

<input type='date' min='1899-01-01' max='today'>

Upvotes: 0

jefferyleo
jefferyleo

Reputation: 650

PHP Base

<input type="date" name="date1" max="<?= date('Y-m-d'); ?>">

C# Base

<input type="date" name="date1" max="@DateTime.Now.ToString("yyyy-MM-dd")">

Upvotes: 1

Mina
Mina

Reputation: 17019

First, you need to get today's date by

const [today] = new Date().toISOString().split('T')

Then get the max date

  const maxDate = new Date();
  maxDate.setDate(maxDate.getDate() + 30);
  const [maxDateFormatted] = maxDate.toISOString().split('T');

Then set the min and max attributes.

  const dateInput = document.getElementById('myDateInput');
  dateInput.setAttribute('min', today);
  dateInput.setAttribute('max', maxDateFormatted);

This is working example

const [today] = new Date().toISOString().split('T');

const maxDate = new Date();
maxDate.setDate(maxDate.getDate() + 30);
const [maxDateFormatted] = maxDate.toISOString().split('T');

const dateInput = document.getElementById('myDateInput');
dateInput.setAttribute('min', today);
dateInput.setAttribute('max', maxDateFormatted);
<input type="date" id="myDateInput"></input>

Upvotes: 0

Lahiru Jayakody
Lahiru Jayakody

Reputation: 5400

JavaScript only simple solution

datePickerId.max = new Date().toISOString().split("T")[0];
<input type="date" id="datePickerId" />

// below trick also works! Thanks jymbob for the comment.
datePickerId.max = new Date().toLocaleDateString('fr-ca')

Upvotes: 157

Mohammed Agboola
Mohammed Agboola

Reputation: 37

Example with React

import Input from "./components/Input";

const DateInput = () => {
  const today = new Date().toISOString().split("T")[0];
  return <Input type="date" max={today} />
}

export default DateInput;

Upvotes: 2

Nowdeen
Nowdeen

Reputation: 1440

Yes... you have to use Javascript. My solution below is just yet another option which you can pick up.

var today = new Date().toJSON().slice(0, 10);
var date = $('#date-picker');
date.attr('max', today);

Upvotes: 2

Federico Ba&#249;
Federico Ba&#249;

Reputation: 7636

Template: ejs

Using Node.js, express.js and template System ejs:

<input id="picOfDayDate" type="date"  name="date-today"
    value="<%= new Date().toISOString().split("T")[0] %>" 
    min='1995-06-16' 
    max="<%= new Date().toISOString().split("T")[0] %>" 
    class="datepicker" 
>

Upvotes: 0

Badmous
Badmous

Reputation: 135

Examples with jQuery and JavaScript:

$('#arrival_date').attr('min', new Date().toISOString().split('T')[0])
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="date" name="arrival_date" id="arrival_date" class="form-control" aria-label="...">

document.getElementById('arrival_date').setAttribute('min', new Date().toISOString().split('T')[0])
<input type="date" name="arrival_date" id="arrival_date" class="form-control" aria-label="...">

Upvotes: 3

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

You will need Javascript to do this:

HTML

<input id="datefield" type='date' min='1899-01-01' max='2000-13-13'></input>

JS

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();

if (dd < 10) {
   dd = '0' + dd;
}

if (mm < 10) {
   mm = '0' + mm;
} 
    
today = yyyy + '-' + mm + '-' + dd;
document.getElementById("datefield").setAttribute("max", today);

JSFiddle demo

Upvotes: 124

rauf
rauf

Reputation: 573

In lieu of Javascript, a shorter PHP-based solution could be:

 <input type="date" name="date1" max="<?= date('Y-m-d'); ?>">

Upvotes: 54

vsync
vsync

Reputation: 130065

Is you don't want to use external scripts, but rather set the max limit right in the HTML input element, inline as so:

<input type="date" max="3000-01-01" onfocus="this.max=new Date().toISOString().split('T')[0]" />

I've intentionally added the max attribute with a date far into the future, because it seems Chrome browser change the width of the field once a max attribute is set, so to avoid that, I had it pre-set.

See live demo

Upvotes: 10

T J
T J

Reputation: 43156

An alternative to .split("T")[0] without creating a string array in memory, using String.slice():

new Date().toISOString().slice(0, -14)


datePickerId.max = new Date().toISOString().slice(0, -14);
<input type="date" id="datePickerId" />

Upvotes: 6

Strabek
Strabek

Reputation: 2511

I am using Laravel 7.x with blade templating and I use:

<input ... max="{{ now()->toDateString('Y-m-d') }}">

Upvotes: 6

C.C.
C.C.

Reputation: 575

Yes, and no. There are min and max attributes in HTML 5, but

The max attribute will not work for dates and time in Internet Explorer 10+ or Firefox, since IE 10+ and Firefox does not support these input types.

EDIT: Firefox now does support it

So if you are confused by the documentation of that attributes, yet it doesn't work, that's why.
See the W3 page for the versions.

I find it easiest to use Javascript, s the other answers say, since you can just use a pre-made module. Also, many Javascript date picker libraries have a min/max setting and have that nice calendar look.

Upvotes: 3

Kiril Dobrev
Kiril Dobrev

Reputation: 851

A short but may be less readable version of one of the previous answers.

   <script type="text/javascript">
    $(document).ready(DOM_Load);

    function DOM_Load (e) {
        $("#datefield").on("click", dateOfBirth_Click);
    }

    function dateOfBirth_Click(e) {
        let today = new Date();
        $("#datefield").prop("max", `${today.getUTCFullYear()}-${(today.getUTCMonth() + 1).toString().padStart(2, "0")}-${today.getUTCDate().toString().padStart(2, "0")}`);
    }

</script>

Upvotes: 1

jafarbtech
jafarbtech

Reputation: 7015

toISOString() will give current UTC Date. So to get the current local time we have to get getTimezoneOffset() and subtract it from current time

document.getElementById('dt').max = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().split("T")[0];
<input type="date" min='1899-01-01' id="dt" />

Upvotes: 9

Guillaume Harari
Guillaume Harari

Reputation: 505

it can be useful : If you want to do it with Symfony forms :

 $today = new DateTime('now');
 $formBuilder->add('startDate', DateType::class, array(
                   'widget' => 'single_text',
                   'data'   => new \DateTime(),
                   'attr'   => ['min' => $today->format('Y-m-d')]
                   ));

Upvotes: 2

Susampath
Susampath

Reputation: 716

I also had same issue .I build it trough this way.I used struts 2 framework.

  <script type="text/javascript">

  $(document).ready(function () {
  var year = (new Date).getFullYear();
  $( "#effectiveDateId" ).datepicker({dateFormat: "mm/dd/yy", maxDate: 
  0});

  });


  </script>

        <s:textfield name="effectiveDate" cssClass="input-large" 
   key="label.warrantRateMappingToPropertyTypeForm.effectiveDate" 
   id="effectiveDateId" required="true"/>

This worked for me.

Upvotes: -1

vmkcom
vmkcom

Reputation: 1668

Javascript will be required; for example:

$(function(){
    $('[type="date"]').prop('max', function(){
        return new Date().toJSON().split('T')[0];
    });
});

JSFiddle demo

Upvotes: 19

Related Questions