reactjs - React js 简单轻量的日期选择器
问题描述
我正在尝试为用户的出生日期创建一个带有日期选择器的输入框。我不需要日期范围 - 只是一个以 yyyymmdd 格式写入日期的日期选择器。
有很多选项很重,但轻的选项也会使未来的搜索者受益。我尝试使用以下内容,但许多都具有外部依赖项,例如 momentjs,有些甚至无法正常工作
- 反应日选择器
- 反应日期选择器
- 反应扁平选择器
- 反应无限日历
- .. 更多的
我不想在我的反应应用程序中包含 jQuery,所以任何需要 jQuery 的东西都不是一个选项。我搜索了 3 个多小时,安装了许多库,但找不到任何轻量级选项。我不关心外观,因为我可以设计自己的 CSS。
如何在不使用任何外部依赖项(例如 momentjs)的情况下在 react 应用程序中实现简单的日期选择器?
这是我现在不包括日期选择器的组件代码,因为我删除了我安装的所有选项。
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/>
...
...
解决方案
我希望这足够轻:)没有图书馆。只是一个简单的JS
功能,同时利用HTML5
. 旁注,有效日期是yyyy/mm/dd
,这就是您在此处显示的内容。欲了解更多信息。
但是你得到你的日期选择器,你可以随心所欲地使用价值。希望这会有所帮助。
<!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>
推荐阅读
- python - 如何返回一个numpy数组,其值来自相同形状的不同数组的最大值的源数组
- c# - 如何将 linq 查询转换为 lambda 表达式
- typescript - 在泛型中使用递归类型别名会导致错误
- python - 模块上的 __getattr__ 的行为与 PEP 建议的方式不同
- apache-spark - 在 parquet 中添加新列并导入 HBase
- c# - 有没有办法使用 WPF xaml 代码创建数字文本框?
- batch-file - *.bat 将路径文件夹保存为变量
- angular - Angular 8:问题查找通过多个 ng-content 嵌套的组件
- c++ - 'const std ::? 类型的引用的 C++ 无效初始化
- python - Celery 未将消息发布到基于非任务的 RabbitMQ 队列