将datepicker的类名设置为用作Redux表单域中的组件
是为了在Redux表单中使用datepicker组件来选择日期。通过将datepicker的类名设置为表单域的组件，可以方便地在Redux表单中管理和获取日期的值。
datepicker是一种日期选择器组件，它允许用户从一个可视化的日历界面中选择日期。它通常用于需要用户选择日期的表单场景，例如预约、活动日期选择等。
在Redux表单中使用datepicker组件有以下优势：
- 统一状态管理：Redux表单可以集中管理所有表单字段的状态，包括datepicker选择的日期。这样可以方便地获取和更新日期的值，以及进行表单验证和提交。
- 表单数据持久化：Redux表单可以将表单数据保存在应用的状态树中，即使用户刷新页面或导航到其他页面，表单数据也可以得到保留。这样可以避免用户重新选择日期的麻烦。
- 表单字段联动：通过Redux的状态管理机制，可以实现表单字段之间的联动效果。例如，当选择了一个日期后，可以根据该日期自动更新其他相关字段的值或可选项。
在腾讯云的产品中，推荐使用Ant Design组件库中的DatePicker组件作为Redux表单中的datepicker组件。Ant Design是一套企业级的UI设计语言和React组件库，提供了丰富的UI组件和交互模式。
Ant Design的DatePicker组件具有丰富的功能和灵活的配置选项，可以满足各种日期选择的需求。您可以通过以下链接了解更多关于Ant Design DatePicker组件的信息和使用方法：
https://ant.design/components/date-picker/
在使用Ant Design DatePicker组件时，您可以根据具体需求设置其类名为"datepicker"，以便在Redux表单中标识该组件。同时，您还需要在Redux表单的相关代码中定义该字段，并与Ant Design DatePicker组件进行绑定，以实现日期选择和状态管理的功能。
总结：将datepicker的类名设置为用作Redux表单域中的组件是为了方便在Redux表单中管理和获取日期的值。推荐使用Ant Design组件库中的DatePicker组件，并通过设置类名为"datepicker"来标识该组件。
相关·内容
在解决了一些问题之后，我坚持将DatePicker数据发送到表单。
我找到了两种使用redux-form创建DatePicker组件的方法。
<Field
name="startDate"
autoOk={true}
floatingLabelText="startDate"
component={(startDate) => {
return <DatePicker {...startDate} />;
}}
onChange={(event, date) => {console.log(date)
浏览 0提问于2016-06-09得票数 6
2回答
如何使反应-数据报警器与还原形式绑定？
我有一个redux表单字段：
<Field name="due_date" component={props =>
<DatePicker
{...props}
readOnly={true}
selected={this.state.due_date}
value={this.state.due_date}
onChange={this.handleDueDate}
/>
} />
每当我提交redux表单时，返回一个空对象，而不是绑定datepicker
浏览 1提问于2017-09-21得票数 0
回答已采纳
我从redux表单中使用DatePicker作为字段的组件。现在，每当我专注于字段时，日期选择器就会打开。我无法自己将日期写入keyboadrd的输入(或者粘贴它)。我想结合这两者-使用户能够粘贴/输入日期从键盘或从日期选择器选择它.我怎样才能做到这一点？
import { Field, reduxForm } from 'redux-form';
import { DatePicker } from 'redux-form-material-ui';
……
<Field
name="dateOfBirth"
type="t
浏览 1提问于2018-07-04得票数 1
我想知道如何动态地向表单部分添加一个名称，而不是像这个中那样有一个静态名称。我试过这样的方法：
class Address extends FormSection {
render() {
return <div>
<Field name="streetName" component="input" type="text"/>
<Field name="number" component="input" type
浏览 1提问于2019-01-30得票数 3
回答已采纳
我最近弹出了我的创建-反应-应用程序，我收到了一个错误的ReduxForm，这是阻止webpack编译。这里有一个错误："error 'NewComplaintModal‘是一个没有类分配的类“。它似乎与底部的redux表单装饰器相关联，但我在redux表单文档中找不到任何其他实现。知道怎么解决这个问题吗？
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from '
浏览 1提问于2017-02-23得票数 3
回答已采纳
1回答
我试图在组件中实现限制或验证。我使用redux表单进行验证和规范化(以实现限制)。
问题:我观察到，当我们试图在字段中输入某些内容时，既不会调用redux-form的规范化函数，也不会调用redux-form的验证函数。
虽然在提交表单时没有提交此值，但我需要显示一些验证错误或限制用户键入无效字符。
我为日期选择器组件做了一个包装器，并通过redux字段以我的形式使用它。
我的日期选择器组件:-
return (
<div className={"render-date-picker "}>
<div className
浏览 12提问于2017-12-01得票数 11
回答已采纳
在我的代码中，试图通过一个名为<DatePicker>的函数在Redux表单的<Field>组件中呈现一个renderDatePicker()。此函数链接到handleClick()函数，其中状态变量isOpen设置为true。
因此，理想情况下，onClick应该在设置为可见时呈现<DatePicker>。但是代码不会更新任何东西。我在哪里做错了？
注意:在没有<DatePicker>帮助的情况下直接呈现<Field component=...>，效果很好。
为了进行调试，完整的代码在CodeSandbox中，
Simpl
浏览 1提问于2019-08-07得票数 1
回答已采纳
3回答
我想用DatePicker在redux表格中选择日期。我创建了这个：
import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
export default field => (
<div>
<DatePicker
onChange={field.value}
selected={field.valu
浏览 1提问于2017-02-24得票数 7
回答已采纳
不知道我到底做错了什么？？
在一个简单的react-redux web应用中，我无法设置新的日期。
onChange是否应将选择设置为“purchase_date”的新状态？？
这是我的代码。
import React, { Component } from 'react';
import { connect } from 'react-redux';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 're
浏览 0提问于2018-05-12得票数 0
1回答
当用户提交表单时，我希望捕获表单值。React教程显示了以下内容：
var CommentForm = React.createClass({
handleAuthorChange: function(e) {
this.setState({author: e.target.value});
},
handleTextChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
va
浏览 0提问于2016-04-07得票数 3
回答已采纳
在我的Next.js应用程序中集成了react-datepicker之后，我面临着这个错误。无法修复。
下面是我的应用程序文件的代码：
package.json
"dependencies": {
"axios": "^0.21.1",
"bootstrap": "^5.0.0",
"i18next": "^20.2.2",
"i18next-browser-languagedetector": "^6.1.1&
浏览 2提问于2021-05-27得票数 1
回答已采纳
2回答
我正在使用mat-datepicker在我的角度版本12项目。数据选择器日历视图显示1998年1月至1月的错误日期。
1998年1月1日是从星期四开始的，但它是在星期天举行的.只有3天是错误的显示。
这是表单字段。
<mat-form-field appearance="outline" fxFlex="100" fxFlex.gt-sm="15" fxFlex.sm="50" class="p-1">
<mat-label>Da
浏览 14提问于2022-03-06得票数 0
回答已采纳
我在ReduxForm中使用DatePicker。但是，当我点击submit按钮时，来自Date Picker的输入值没有传递到Redux表单。 我到处搜索，发现了this的答案(我的renderDatePicker代码来自那里)，但它仍然不能为我工作。 我在模拟器上的表单演示： ? 下面是我的代码： import React, { Component } from 'react';
import {
View, Text, Button, Icon, Container, Item,
Input, Label, Content, Form, Picker
浏览 9提问于2019-01-26得票数 0
我必须用内部状态绑定自定义datepicker组件：
this.state = {
selectedDate: null,
dateText: ""
};
到redux表单字段组件。规则很简单-来自自定义组件外部的值将通过带有道具的redux表单传递给它：
{input: {value: "10-10-2010"} }
如您所见，我的自定义组件将不会反映这个新值，因为它的内部字段绑定到它的状态：
<TextField
value={this.state.dateText}
onChange={this.handleDateInputChan
浏览 0提问于2019-08-21得票数 1
回答已采纳
我目前正在尝试使用以下代码从我的后端获取数据。我希望将每个事件项分解为一个eventIndexItem组件，但在useEffect之后事件仍然是未定义的。
import React, { useState, useEffect } from 'react'
import EventIndexItem from './event_index_item'
import 'react-modern-calendar-datepicker/lib/DatePicker.css';
import { Calendar, utils } from '
浏览 1提问于2020-06-15得票数 0
import React, { Component } from "react";
import { connect } from "react-redux";
import "react-datepicker/dist/react-datepicker.css";
import DatePicker from "react-datepicker";
class Date extends Component {
constructor(props) {
super(props);
this.handleCh
浏览 42提问于2021-08-07得票数 0
我正在尝试在redux form material ui中设置DatePicker组件的className。
我的自定义组件是这样的：
import React from 'react';
import { DatePicker } from 'redux-form-material-ui'
const CustomDatePicker = props => (
<DatePicker
{...props}
/>
)
export default CustomDatePicker;
我尝试使用它，如下所示：
var dat
浏览 3提问于2018-01-11得票数 0
我在我的laravel应用程序中使用包，在从数据报警器中选择日期后，我可以在vue developer tools pickedValue中看到带有所选日期的日期。目前，我的代码很简单：
<datepicker></datepicker>
但我想知道，pickedValue是否是在表单中提交此文件时使用的正确语法？我需要一个onChange事件，还是可以只使用datepicker.pickedValue或类似的东西？我只想将选定的日期设置为axios的变量。
更新：
<div v-cloak v-if="isScheduledTask">
浏览 2提问于2019-08-23得票数 1
回答已采纳
我不能用DatePicker作为控制单元。我打算从一开始就产生今天的日期。这是我的密码：
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { DatePicker } from 'redux-form-material-ui';
class PeriodForm extends React.Component {
constructor(props) {
super(props);
this.
浏览 6提问于2017-04-13得票数 0
回答已采纳
我有一个相当晦涩的问题，它确实可能是因为我自己这样做，如果是这样的话，请随时指出它。
我有一个promises链，我需要为后续的API调用访问中间值。一旦所有的承诺都被解析，我就会执行一个API调用，该API调用利用了各种中间返回值。
最后，根据该调用的结果，我将对API进行最后一次调用。但是，此调用的结果用于更新Redux State，因此使用Redux Thunk作为中间件来完成，以促进异步操作。
挑战在于，我需要以设定的时间间隔轮询数据库，以检查Redux API调用是否执行了请求它的工作(这项工作包括将一些长时间运行的任务放在Redis任务队列中，然后在任务完成后让队列工作者更新数据库
浏览 0提问于2019-10-26得票数 0
2回答
我有一个名为AvailabiltyCalender的组件，它还有一个名为DatePicker的子组件。智利组件有一个名为focusedInput的状态。我需要从AvailabiltyCalender组件访问该状态并获取该状态值。我怎么能做到这一点。
AvailabiltyCalender组件
import React, { Component } from 'react';
import './AvailabilityCalender.css';
import backArrow from '../../../assets/images/back.png
浏览 3提问于2018-02-18得票数 0
1回答
我使用Redux Form和React，但是表单字段需要硬编码。有没有从父组件动态传入字段的方法？
/* form.jsx */
import React, { PropTypes } from 'react';
import { Field, reduxForm } from 'redux-form';
export const formFields = [
'firstname',
'lastname',
'password'
]
class RegForm extends Component
浏览 3提问于2016-08-30得票数 0
回答已采纳
我使用redux-form将表单值作为JSON对象提交给POST服务。但是redux-form字段(<Field />)不支持onChange、onBlur等事件。所以我想使用默认的组件，比如<select><option></select>，<input type="text" />，但是如果我使用普通的html组件，像onChange这样的事件就可以工作了。但是在这里，如果没有redux-form，我无法将表单值作为对象提交到服务中。请引导..。
谢谢你，沙什
浏览 7提问于2017-04-05得票数 0
编辑过的。人们建议将值传递给我的动作创建者，但我已经尝试了所有我能想到的方法，但它都不起作用。
我现在第一次尝到了Redux的滋味，并试图让我的mapDispatchToProps调用在点击按钮时读取表单中的信息，但我不清楚如何让它做到这一点。表单组件是由React呈现的，所以当Redux可用时是否能够进行绑定是一个问题，但Redux是一个我还不知道如何补偿的问题。基本上，我的组件是这样的：
import React from 'react';
import { connect } from 'react-redux';
import { action } fr
浏览 1提问于2020-06-23得票数 1
2回答
如何正确延迟渲染
、、、、
//offline.js
import { offline } from '@redux-offline/redux-offline';
import offlineConfig from '@redux-offline/redux-offline/lib/defaults';
const config = params => ({
...offlineConfig,
persistCallback: params.persistCallback
});
export default params => offline(config(pa
浏览 6提问于2018-09-18得票数 2
2回答
在斯威夫特，我有一个var datePicker = UIDatePicker()。我试图将datePicker设置为最小值为11920年1月1日(我想要一个从1920年1月1日到当前日期的范围)。我阅读了如何设置maximumDate of UIDatePicker，这很容易，但我无法找到如何将最小值设置为特定日期。我读到它应该是datePicker.minimumDate，但我不知道如何从上面设置确切的日期。有什么建议吗？
浏览 3提问于2017-07-07得票数 1
回答已采纳
我在Wicket页面的以下代码中遇到了Wiquery的问题(使用CompundPropertyModel，DatePicker属性的类型为java.util.Date)：
DatePicker<Date> datePicker = new DatePicker<Date>("date"){
@Override
public boolean isVisible() {
return selectedType.hasDate();
}
};
datePicker.setDateFormat(DateUtil.DATE_
浏览 3提问于2011-11-04得票数 3
我对日期选择器的实现有问题。我正在使用这个日期选择器：我也在使用redux-form。
有人可以检查我的代码，并给我一些提示，可能是错误的。
它什么也没做。没有错误，什么都没有发生。
import { Field } from 'redux-form';
import DatePicker from 'react-mobile-datepicker';
renderDatePicker = () => <DatePicker dateConfig={dateConfig} showCaption={true} />
<Field
浏览 11提问于2019-08-07得票数 1
4回答
Jest +酶:试验剩余形式
、、、、
我的应用程序有很多redux表单。我使用Jest和酶进行单元测试。但是，我没有测试redux表单。我的组件是一个登录表单，类似于：
import { login } from './actions';
export class LoginForm extends React.Component<any, any> {
onSubmit(values) {
this.props.login(values, this.props.redirectUrl);
}
render() {
const { handleSubmit, status
浏览 0提问于2018-04-05得票数 8
在提交之前，我正在尝试为数据格式定制DatePicker。我使用setFielsValue覆盖它的值，但它不起作用。
在提交之前，我需要找到一种自定义组件和数据格式的方法。
创建表单
import React, { useEffect } from 'react';
import { Form, Button, Input, Select } from 'antd';
import { t } from 'i18next';
import { connect } from 'react-redux';
import PropTyp
浏览 1提问于2019-08-19得票数 2
从反应-数据报警器：
为此：
datePicker.js
const { fields, input , meta } = this.props;
const { touched, error, warning } = meta || {}
...
return (
<DatePicker
selected={this.state.startDate ? this.state.startDate : undefined}
selectsStart
startDate={this.state.startDate}
endDate={this.
浏览 1提问于2018-07-31得票数 0
回答已采纳
本质上，我有一个react日期选择器，作为redux表单字段合并到我的表单中。我允许用户使用redux-form reset prop清除整个表单。这很奇怪，因为datepicker在我的表单数据中是可以识别的，但是当我试图清除整个页面时，它是唯一没有清除的字段。
this.props.reset this.props.change
我的日期选择器：
const CustomInput = React.forwardRef((props, refs) => {
const inputProps = props.inputProps;
inputProps.input.on
浏览 8提问于2019-10-26得票数 0
1回答
我有两个日期第一次从DatePicker (self.datePicker.date)获得，另一个是手动设置NSDate (self.fireDate)。
我想将self.datePicker.date的时间添加到self.fireDate中。
我的逻辑是：
NSCalendar *currentCalender = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
NSDateComponents *timeComponents = [currentCalender components:(NSH
浏览 2提问于2013-10-16得票数 1
1回答
我遇到了，它让我达到了我想要的99%，但我在一个只有一个主题的多站点环境中使用它，并在其他6个站点上部署该主题。
你可以用输入日期字段(到达和出发时间)，你可以看到它工作得很好。然而..。
我希望在多站点网络中的多个站点之间部署它，但在这样做时，我需要考虑这样一个事实，即考虑到每个站点上的表单存在差异，每个站点的字段ID可能会有所不同。我可以阅读JS，所以我可以看到这里发生了什么，但我不知道如何编写条件来检查站点ids/urls并相应地调整#input_1_1标记……这个是可能的吗？如果是这样，它看起来会是什么样子？
这是我使用的代码...
jQuery(document).bind('
浏览 0提问于2015-01-02得票数 1
4回答
我查看了这个，以向我的项目中添加数据报警器。
<div class="startDate">
<datepicker
v-model="startDate"
format="YYYY-MM-DD"
name="startDate"
></datepicker>
</div>
从“vue-日期选择器”进口数据报警器；
<style scoped>
.startDate {
width: 150px;
}
浏览 8提问于2019-09-29得票数 6
回答已采纳
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
// import browserRoute
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'
// redux
import Todo from './todo/Todo';
import Login from '.
浏览 2提问于2019-10-23得票数 1
回答已采纳
填充select/dropdown from state的最佳实践是什么？
我填充了一个这样的redux-form。
import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import FormItem from '../FormItem.js';
import FormFooter from '../../components/FormFoot
浏览 4提问于2018-01-20得票数 2
我想在提交表单时在日期选择器上显示一条错误消息，但我发现没有办法做到这一点。 仅当字段失去空值的焦点时，isRequiredErrorMessage才起作用。 但是，如果用户从不关注日期选择器字段，那么我就无法将消息设置为错误标签。 我希望DatePicker可以有errorMessage，这样我就可以做类似这样的事情 render() {
return (
<DatePicker
label="Pick up date"
isRequired={true}
minDate={moment().toDate()}
浏览 34提问于2020-03-30得票数 1
我正在使用redux-form react-datepicker和moment创建一个表单，但是我得到了一个日期格式错误。 它在日期选择器中显示多个错误和无效的输入字段消息 下面是我的表单实用程序： import React from 'react'
import { Form, Label } from 'semantic-ui-react'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
浏览 11提问于2019-02-12得票数 0
5回答
我在一个页面中使用多个表单。所有表单都使用具有相同设置的datepicker。由于我不能在两个元素上使用相同的ID，所以我不得不复制代码。有更好的方法吗？
演示
$("#datepicker1").datepicker({
defaultDate: "+1w",
dateFormat: 'dd-mm-yy',
changeMonth: true,
minDate: 0,
numberOfMonths: 1,
onClose: function
浏览 6提问于2013-12-13得票数 0
回答已采纳
2回答
我正在使用私有继承，我惊讶地发现在派生类中不允许使用任何基对象。
class A;
class B : private A;
class C : public B;
C::method_1()
{
A* a; // Temporary "A" object for local computation
}
这与继承无关。我不想访问任何this->base method！
此配置在Visual Studio中提供了一个私有错误(“'A‘不可访问，因为'B’使用‘C2247’继承自'A‘")。
浏览 28提问于2017-11-28得票数 18
回答已采纳
1回答
我试图将自定义输入传递给react-redux-form控件组件，并将该新输入的值与标准输入的值一起传递。
我有一个关于这个问题的代码示例。
DatePicker：
import React, { Component } from 'react';
import 'react-datepicker/dist/react-datepicker.css';
import DatePicker from 'react-datepicker';
import moment from 'moment';
class DatePickerI
浏览 2提问于2017-06-07得票数 0
回答已采纳
我使用Redux-表单7.3.0。我正在尝试在另一个组件中获取我的表单的值。我在 of Redux表单中阅读了指令，但没有工作。
this is the code of my componenet:
import React from 'react'
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { formValueSelector } from 'redux-fo
浏览 1提问于2018-03-31得票数 4
回答已采纳
我想通过Chakra样式为我的Datepicker组件定义样式。
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { chakra } from '@chakra-ui/react';
const StyledDatepicker = chakra(DatePicker);
我使用chakra工厂函数可以通过支持为StyledDatepicker提供一些样式，如上面的代码所示，但是我想在一个
浏览 5提问于2022-02-15得票数 1
回答已采纳
3回答
我在react-redux应用程序中使用react-datepicker模块，并使其与redux表单兼容，如下所示：
const MyDatePicker = props => (
<div>
<DatePicker
{...props.input}
dateFormat="DD-MM-YYYY"
selected={props.input.value
? moment(props.input.value, 'DD-MM-YYYY')
: null}
浏览 5提问于2017-04-18得票数 2
回答已采纳
3回答
我使用的是ngx-引导数据报警器，它有日期选择器、单选择器和年度选择器作为内部组件。我想将css应用到一个表中，该表存在于摘日器中。
<custom-datepicker>
<datepicker> //ngx-bootstrap datepicker component
<daypicker>
<table>
//rows, want to apply some css to only this table
</table>
</daypicker>
浏览 1提问于2017-05-14得票数 1
我有一个带有材料的简单表单-ui DatePicker，例如：
<DatePicker name="startDate" autoOk={true} floatingLabelText="startDate" onChange={(x, event) => {console.log(arguments);}} />
但是，如果更改日期，则会将空数组打印到控制台。我希望就如何解决这一问题提出任何建议。
"material-ui": "0.15.0"
"react": "15.1.0"
浏览 3提问于2016-06-08得票数 3
回答已采纳
我正在使用react/redux实现一个客户编辑表单页面。我将在componentDidMount方法中获取与客户ID相关的客户详细信息，并将与客户相关的数据存储在redux存储中。
我希望将该数据集用作customer编辑表单页面中的模型，并希望使用存储在redux存储中的客户数据初始化本地状态。
我想知道，我应该在哪个组件中这样做(将redux存储模型设置为本地状态)？在构造函数中这样做正确吗？
浏览 10提问于2017-08-04得票数 0
回答已采纳
2回答
我将如何使用样式组件来设计类似于react-datepicker的样式？datepicker库看起来像是使用了某种类型的边界元样式(下面的截图)，我通常只使用它们提供的类名和使用Sass的样式。但是，我如何针对那些带有样式组件的类名呢？这可能吗？
浏览 4提问于2017-07-25得票数 9
回答已采纳
2回答
我需要显示不同数量的日期选择器。表单是动态生成的，所以我不能预测我将使用多少个Datepicker。是否可以对所有输入使用一个id？
$("#datepicker").datepicker({ dateFormat: 'yy-mm-dd' }).mask("9999-99-99");
<input type="text" name="startDate1" value="" id="datepicker" >
<input type="text"
浏览 3提问于2013-03-26得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
