Question

我正在尝试为用户的出生日期创建一个带有日期选择器的输入框。我不需要日期范围-只是一个以yyyymmdd格式写日期的日期选择器。

有很多沉重的选择，但一个简单的选择也会使未来的搜索者受益。我尝试使用以下内容，但是许多具有诸如momentjs之类的外部依赖项，有些甚至不起作用

反应日选择器
反应日期选择器
react-flatpicker
rein-inifnite-calendar
..更多

我不想在我的react应用程序中包含jQuery，因此任何需要jQuery的选项都不是一种选择。我搜索了3个多小时，安装了许多库，但找不到任何轻量级的选项。我不在乎外观，因为我可以设置自己的CSS样式。

如何在react应用中实现简单的日期选择器，而无需使用momentjs之类的任何外部依赖项？

这是我的组件代码，因为我删除了已安装的所有选件，所以现在不包括日期选择器。

import React, { Component } from 'react'
...
...
import MyCustomDateInput from './date-input'
...
...
class EditProfile extends Component {
  state = {
...
...
date: '',
...
...

render() {
let {
...
...
date
} = this.state

....
....
  return (
      <div>
        <Title
          value="Edit profile"
          desc="Edit your profile, add tags and information"
        />
...
...
<MyCustomDateInput/>
...
...

Answer 1

我希望这足够轻巧：） 没有图书馆。利用JS的同时，只是一个简单的HTML5函数。旁注，有效日期为yyyy/mm/dd，这就是您在此处看到的内容。有关更多info的信息。
但是，您将获得日期选择器，并且可以随心所欲地使用该值。希望这会有所帮助。

<!DOCTYPE html>
<html>
<body>

<h3>A demonstration of how to access a Date field</h3>

<input type="date" id="myDate" value="mm-dd-yyyy">

<button onclick="datePicker()">Try it</button>

<p id="demo"></p>

<script>
function datePicker() {
    let d = document.getElementById("myDate").value;
    document.getElementById("demo").innerHTML = d;
}
</script>

</body>
</html>

React js简单轻便的日期选择器

1 个答案: