React js 简单轻量的日期选择器答案

【问题标题】：React js simple and light weight Date PickerReact js 简单轻量的日期选择器
【发布时间】：2023-03-05 00:56:01
【问题描述】：

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

有许多重的选项，但轻的选项也会使未来的搜索者受益。我尝试使用以下内容，但许多都具有外部依赖项，例如 momentjs，有些甚至不起作用

react-day-picker
反应日期选择器
react-flatpicker
反应无限日历
.. 更多

我不想在我的 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/>
...
...

【问题讨论】：

npmjs.com/package/react-datepicker
@Bigga_HD - 正如我的问题中提到的 - react-datepicker 使用了非常重的 momentjs。仅对于一个输入日期选择器，我不会安装如此庞大的库。
github.com/coderhaoxin/react-flatpickr

标签： reactjs

【解决方案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>

【讨论】：

是的 - 太棒了，.. 没有库，没有垃圾.. 只是需要的东西。，你介意我给它设计样式，美化它，创建一个反应组件并免费在 Githhub 上发布吗？
没有人，当然不是。做你的事；）我很高兴它有帮助。干杯。
谢谢。快速提问 - TryIt 按钮应该起作用吗？它什么都不做。
我明白了。我以为那是弹出日历..那更像是一个提交按钮..谢谢。