How to Set Current Date as Default Value of an Input

How to set default value to the input[type=date]

The date should take the format YYYY-MM-DD. Single digit days and months should be padded with a 0. January is 01.

From the documentation:

A string representing a date.

Value: A valid full-date as defined in [RFC 3339], with the additional qualification that the year component is four or more digits representing a number greater than 0.

Your code should be altered to:

<input type="date" value="2013-01-08">

How to set current date as default value of an input?

You are providing the date in the wrong format - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Value:

One thing to note is that the displayed date format differs from the actual value — the displayed date format will be chosen based on the set locale of the user's browser, whereas the date value is always formatted yyyy-mm-dd.


(And if(foo) { … } else if(!foo) { … } is unnecessary redundant, you don’t need that second if that checks for the exact opposite of the first one - else alone provides the same functionality here already.)

Set date input type default value to Today, Tomorrow, Anydate?

Like any HTML input field, the browser will leave it empty unless a default value is specified with the value attribute.

Unfortunately HTML5 doesn't provide a way of specifying 'today' in the value attribute (that I can see), only a RFC3339 valid date like 2011-09-29.

source: Tak's answer on "HTML5 Input Type Date — Default Value to Today?"

In that instance, you could potentially write a script to simply +1 to find tomorrow's date, but you would first have to add a default value to your input id for today's date.

As far as anydate? Not entirely sure what you mean there. Like a datepicker?

The question was a bit unclear, but I figured I'd help as much as I could with the info provided.


To assign a date via jQuery, you could always do something like this...

http://jsfiddle.net/SinisterSystems/4XkVE/4/

HTML:

<input type="date" id="theDate">

jQuery:

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 = mm+'/'+dd+'/'+yyyy;

$('#theDate').attr('value', today);

alert($('#theDate').attr('value'));


EDIT:

Furthermore, to find both of today's date, and tomorrow's date, but ensure the end of the month or end of the year won't affect it, use this instead:

http://jsfiddle.net/SinisterSystems/4XkVE/6/

HTML:

<input type="date" id="theDate">
<input type="date" id="tomorrowDate">

jQuery

var today = new Date();
var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
var tomday = tomorrow.getDate();
var tommonth = tomorrow.getMonth() + 1;
var tomyear = tomorrow.getFullYear();
if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = mm+'/'+dd+'/'+yyyy;
if(tomday<10){tomday='0'+tomday} if(tommonth<10){tommonth='0'+tommonth} tomorrow = tommonth+'/'+tomday+'/'+tomyear;
$('#theDate').attr('value', today);
$('#tomorrowDate').attr('value', tomorrow);

Setting default value for a datetime-local input field in Blade

The format of datetime-local value format isn't similar to what we see on the browser by default.

... the displayed date and time formats differ from the actual value; the displayed date and time are formatted according to the user's locale as reported by their operating system, whereas the date/time value is always formatted YYYY-MM-DDThh:mm.


I'll replace your $slider->run_to with the valid datetime '2022-03-17 23:59:26' to provide my solution

<input type="datetime-local" value="{{ substr(date('c', strtotime('2022-03-17 23:59:26')), 0, 16) }}">
  1. I used to format character c that stands for ISO 8601 date which outputs '2022-03-17T23:59:26+01:00'.
  2. I did cutout the seconds and the UTC offset ':26+01:00'
  • Note that allowing the seconds with substr $length of 19 wouldn't break the element.

Sample Image

Sample Image

Demo: https://3v4l.org/aMpMN


Another alternative solution that includes seconds:

<input type="datetime-local" value="{{ str_replace(' ', 'T', '2022-03-17 23:59:26') }}">

Sample Image

Demo: https://3v4l.org/710EN



Related Topics



Leave a reply



Submit