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">
Is there any way to change input type=date format?
It is impossible to change the format
We have to differentiate between the over the wire format and the browser's presentation format.
Wire format
The HTML5 date input specification refers to the RFC 3339 specification, which specifies a full-date format equal to: yyyy-mm-dd
. See section 5.6 of the RFC 3339 specification for more details.
This format is used by the value
HTML attribute and DOM property and is the one used when doing an ordinary form submission.
Presentation format
Browsers are unrestricted in how they present a date input. At the time of writing Chrome, Edge, Firefox, and Opera have date support (see here). They all display a date picker and format the text in the input field.
Desktop devices
For Chrome, Firefox, and Opera, the formatting of the input field's text is based on the browser's language setting. For Edge, it is based on the Windows language setting. Sadly, all web browsers ignore the date formatting configured in the operating system. To me this is very strange behaviour, and something to consider when using this input type. For example, Dutch users that have their operating system or browser language set to en-us
will be shown 01/30/2019
instead of the format they are accustomed to: 30-01-2019
.
Internet Explorer 9, 10, and 11 display a text input field with the wire format.
Mobile devices
Specifically for Chrome on Android, the formatting is based on the Android display language. I suspect that the same is true for other browsers, though I've not been able to verify this.
How to set date in html (input type date) and javascript with conditions?
Is this the sort of thing that you were trying to implement? Set the initial state of the dropoffdate
element and then assign an event listener to the pickup element - when there is a change you edit the dropoff value and attributes as per your needs.
const pad=function(i) {
return ( parseInt(i)<10 ) ? '0' + parseInt(i) : parseInt(i);
};
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
PickUpDate = yyyy + '-' + pad(mm) + '-' + pad(dd);
document.getElementById("PickUpDate").setAttribute("min", PickUpDate);
// set initial minimum date for dropoff
DropOffDate = yyyy + '-' + pad(mm) + '-' + pad( dd + 2 );
document.getElementById("DropOffDate").setAttribute("min", DropOffDate);
// add event listener to the pickup - change properties & value of droppoff
// when this changes.
document.getElementById("PickUpDate").addEventListener('change',function(e){
let dropoff=new Date( this.value );
dropoff.setDate( dropoff.getDate() + 2 );
dropoff=[ dropoff.getFullYear(), pad( dropoff.getMonth() + 1 ), pad( dropoff.getDate() ) ].join('-');
let input=document.getElementById("DropOffDate");
input.setAttribute('min', dropoff );
input.value=dropoff;
});
label{display:block;padding:0.25rem;margin:1rem;width:50%;}
label input{float:right}
<label for="inputState" class="form-label">
Pick-Up Date
<input type="date" id="PickUpDate" class="form-select" />
</label>
<label for="inputState" class="form-label">
Drop-Off Date
<input type="date" id="DropOffDate" class="form-select" />
</label>
Set date in input type date
Fiddle link : http://jsfiddle.net/7LXPq/93/
Two problems in this:
- Date control in HTML 5 accepts in the format of Year - month - day as we use in SQL
- If the month is 9, it needs to be set as 09 not 9 simply. So it applies for day field also.
Please follow the fiddle link for demo:
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
$('#datePicker').val(today);
set input of type date value from a string
You will have to format the date into YYYY-MM-DD
before passing it to the date input.
To do this, you can use:
const str = "29/11/2020";
const [day, month, year] = str.split('/');
const date = `${year}-${month}-${day}`;
<input type="date" value={date} />
how to set date from javascript to html input type=date/ element
I did it in an other way:
document.getElementById('1').addEventListener('change', function() { var date1 = document.getElementById('1'); var dateSplit = document.getElementById('1').value.split("-"); dateSplit[0] = parseInt(dateSplit[0]); dateSplit[0] = dateSplit[0] + 1; dateSplit[0] = dateSplit[0].toString(); var date2 = document.getElementById('2').value = dateSplit[0] + "-" + dateSplit[1] + "-" + dateSplit[2];});
<!doctype html><html> <body> <input type="date" id="1"> <input type="date" id="2"> </body></html>
Related Topics
How to Make a Radio Button Unchecked by Clicking It
How to Detect Overflow in Div Element
Detecting Flex-Wrap Support in Browsers
How to Increase the Font Size Based on the Window Width
How to Remove Imported CSS in Reactjs
JSON Datetime Between Python and JavaScript
Is There an Equivalent of the _Nosuchmethod_ Feature for Properties, or a Way to Implement It in Js
Javascript: Collision Detection
How to Import Jquery Using Es6 Syntax
Sequelize Model Association Won't Create a New Column
Cannot Use Attr with an Object in D3 V4
How to Display a Modal Dialog in Redux That Performs Asynchronous Actions
Check If Element Exists in Jquery
JavaScript Promises - Reject VS. Throw
Correct Way to Convert Size in Bytes to Kb, Mb, Gb in JavaScript