javascript - set input of type date value from a string - Stack Overflow

admin管理员组

文章数量:1426058

I have an API that returns the dates in a string format as shown below. How to set the value of the input type date to this value?

let str = "2020-1-1"

<input type= "date" value = {value} />

I have an API that returns the dates in a string format as shown below. How to set the value of the input type date to this value?

let str = "2020-1-1"

<input type= "date" value = {value} />

• javascript
• html

Share Improve this question Follow edited Sep 23, 2021 at 8:23 nour asked Sep 23, 2021 at 8:12 nournour 16311 gold badge99 silver badges1717 bronze badges 7

• value={str.split('/').reverse().join('-')}? – Yevhen Horbunkov Commented Sep 23, 2021 at 8:16
• @YevgenGorbunkov it didn't work – nour Commented Sep 23, 2021 at 8:18
• @YevgenGorbunkov not a great solution as it will not take locale's into consideration. Would be best to convert into a javascript Date() object first, then set the value. See stackoverflow./questions/28729634/… – Polymer Commented Sep 23, 2021 at 8:18
• @Polymer : > ...Would be best to... No. It wouldn't. (Mind note section). > ..it will not take locale's into consideration.. and it shouldn't, because, you get this string format from API. – Yevhen Horbunkov Commented Sep 23, 2021 at 8:24
• @nour : of course, it didn't when you changed input date format – Yevhen Horbunkov Commented Sep 23, 2021 at 8:30

 |  Show 2 more ments

5 Answers 5

Sorted by: Reset to default 4

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} />

To provide a value to the input field of type date you pass value in this format yyyy-mm-dd so regarding you question you should update your date value like this 2021-11-29

let str = "29/11/2021";
let dateEl = document.getElementById("date");
let value = str.split('/').reverse().join('-');

dateEl.value = value;

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

That will one possible solution:

const str = "29/11/2020";
const [day, month, year] = str.split('/');
document.getElementById('date').value = `${year}-${month}-${day}`

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

if you use simple HTML and JavaScript than provide id attribute to input element and assign value on time when you receive data from api

<input id='some_unique_id' type= "date" />

and on Javascript side use document methods to get element and set value of element

const element = document.getElementById('some_unique_id');
element.value = 'your date value'

and if you are using React with functions ponents than use useState hook

import React, { useState } from 'react'

const [value, setValue] = useState(null);

and for html side

<input value={value} />

you can call

setValue('any value you want')

to set value from where you get api response.

or if you use classes in React bcz hooks only work in functional ponents.

class Example extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
     dateValue: new Date()
   };
  }

  render() {
    return (
      <div>
        <input value={this.state.dateValue} />
      </div>
    );
  }
}

you can update state from where you call api and get data like

this.setState({ dateValue: 'your api date value' })

本文标签： javascriptset input of type date value from a stringStack Overflow