CODEWITHSUNDEEP
javascripthtml
Cleber Castiglioni
Cleber Castiglioni

Reputation: 53

How setattribute value input date?

How would you set the value adding day+1 from the current date in JavaScript?

I have this:

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

try to set value:

    var datedft = document.getElementById('mycalendar').value;

    var date = new Date(datedft);
    var newdate = new Date(date);
    newdate.setDate(newdate.getDate());  
    var dd = newdate.getDate();
    var mm = newdate.getMonth() + 2;
    var y = newdate.getFullYear(); 

    var newformat =y+'-'+mm+'-'+dd ;
    document.getElementById('mycalendar').value = newformat

In my console Browser I got:

The specified value "2020-10-1" does not conform to the required format, "yyyy-MM-dd".

Upvotes: 0

Views: 1812

Answers (5)

SridharKritha
SridharKritha

Reputation: 9611

The below code will set the next day date in "mycalendar"

const today = new Date(); // today's date
const tomorrow = new Date(today.setDate(today.getDate() + 1)); // tomorrow's date

document.getElementById('mycalendar').value = tomorrow.toISOString().split('T')[0];
<input type="date" id="mycalendar" >

Upvotes: 0

sandeep joshi
sandeep joshi

Reputation: 2141

I think you want to add one day to the date which user has selected. please check the code snippet.

function onChangeDate() {
  var datedft = document.getElementById('mycalendar').value;

  var date = new Date(datedft);
  date.setDate(date.getDate() + 1)
  var newformat = date.toISOString().substr(0, 10)
  document.getElementById('mycalendar').value = newformat
}
<input type="date" id="mycalendar" onchange='onChangeDate()'>

Upvotes: 0

mmason33
mmason33

Reputation: 998

I believe you're asking how to get the correct format when the day(getDate()) is less than 10.

    var datedft = document.getElementById('mycalendar').value;

    var date = new Date(datedft);
    var newdate = new Date(date);
    newdate.setDate(newdate.getDate());  
    var dd = newdate.getDate();
    var updatedDD = dd >= 10 ? dd : `0${dd}`; // updated line
    var mm = newdate.getMonth() + 2;
    var y = newdate.getFullYear(); 

    var newformat =y+'-'+mm+'-'+updatedDD ; // updated line
    document.getElementById('mycalendar').value = newformat

Upvotes: 0

Guilherme Meinlschmiedt Abdo
Guilherme Meinlschmiedt Abdo

Reputation: 731

The required format is "yyyy-MM-dd", so your date string value should be "2020-10-01".

var newFormat = y.toString().padStart(4, '0') + '-' + mm.toString().padStart(2, '0') + '-' + dd.toString().padStart(2, '0');

Upvotes: 1

user14325562
user14325562

Reputation:

If the date format is absolutely critical to the functioning of the webpage, then we will need to make that choice. Below is a code snippet with the date format altered to the YYYY-MM-DD format.

<input type="text" name="input" placeholder="YYYY-MM-DD" required 
pattern="(?:19|20)\[0-9\]{2}-(?:(?:0\[1-9\]|1\[0-2\])-(?:0\[1-9\]|1\[0-9\]|2\[0-9\])|(?:(?!02)(?:0\[1-9\]|1\[0-2\])-(?:30))|(?:(?:0\[13578\]|1\[02\])-31))" />

Upvotes: 0

Related Questions