如何在反应功能组件的网页上显示时间时更改反应 DateTimePicker 的格式

Question

我是新来的，你能通过这个做出反应吗？

日期和时间的图像 output如果您看到我得到的图像 output 或显示的日期和时间为2023-01-13T22:54:00.000Z 。 但我想以这种格式显示日期和时间20 Jan,5:25 PM 。 <DateTimePicker onChange={(value)=>setValue(value)} value={value} /> const [value, setValue] = useState(new Date()); 我上面有使用日期时间选择器。 我面临的另一个问题是当我尝试 select 日期时 make onChange={e=>setValue(e.target.value)} 我得到空白页所以我没有使用它。 有时在某些情况下我无法选择日期。

我想要一个日期和时间选择器，用户可以在其中选择自己的日期和时间，但只需一次输入即可保存并按照格式显示在屏幕上。

const [value, setValue] = useState(new Date());

const months = ["Jan","Feb","Mar","Apr","May","June","July","Aug","Sep","Oct","Nov","Dec"];

   `var day=value.getDate();
// let name = months[value.getMonth()];
// var string = day + ' ' + name;
// var hours=value.getHours();
// var minutes=value.getMinutes();
// var ampm = hours >= 12 ? 'PM' : 'AM';
// var string2 = hours + ':' + minutes + ' ' + ampm;
// const clock=string+','+string2;`

我试过了，但它显示的是当前日期和时间，并随着时间的变化不断更新。 所以我认为可能是值尚未更新以查看此变化。

  `<p><span style={{fontSize:12}}>{item.value}</span></p>`

我正在使用映射 function 来显示元素。 我尝试在上面添加像getdate和getmonth这样的方法

标签，但它不工作，我得到一个空白页。

您能否帮我解决这个问题，以便我可以获得上述格式并显示仅由用户选择的日期时间。

我还尝试使用 HTML 日期和时间选择器，但我无法格式化为20 Jan,5:25 PM 。

我想要的主要功能是能够通过一个输入选择日期和时间，并以上面提到的用户选择的格式显示它并且不更新。

你能帮我这个吗？

Answer 1

您可以使用 moment.js 来格式化数据和时间。

import moment from 'moment'

function MyApp() {
  const [value, setValue] = useState(new Date());

  return (
    <div>
      <DateTimePicker onChange={setValue} value={value} />

     <p><span style={{fontSize:12}}>{moment(value).format('d MMM,h:mm A')}</span></p>
   </div>
 );
}

希望这能解决您的问题。 您可以将所需的格式作为参数传递给格式 function。您可以在此处找到更多详细信息。 https://momentjs.com/docs/#/displaying/