如何在同一组件中使用两个React Native date Picker模式
在同一组件中使用两个React Native DatePicker模式，可以通过以下步骤实现：
- 首先，确保已经安装了React Native DatePicker组件。可以使用npm或yarn进行安装，例如：
npm install react-native-datepicker --save。 - 在需要使用DatePicker的组件中，导入DatePicker组件：
import DatePicker from 'react-native-datepicker'; - 在组件的state中定义两个变量，分别用于存储两个DatePicker的选中日期。例如：
state = {
date1: '',
date2: ''
};- 在组件的render方法中，使用两个DatePicker组件，并将其值绑定到state中的对应变量。例如：
render() {
return (
<View>
<DatePicker
date={this.state.date1}
mode="date"
placeholder="Select Date 1"
format="YYYY-MM-DD"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
onDateChange={(date) => {this.setState({date1: date})}}
/>
<DatePicker
date={this.state.date2}
mode="date"
placeholder="Select Date 2"
format="YYYY-MM-DD"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
onDateChange={(date) => {this.setState({date2: date})}}
/>
</View>
);
}- 在上述代码中，通过设置不同的placeholder和onDateChange回调函数，可以区分两个DatePicker的用途。
- 可以根据需要自定义DatePicker的样式和属性，例如设置最小日期、最大日期、显示模式等。
这样，就可以在同一组件中使用两个React Native DatePicker模式，并分别获取用户选择的日期。根据具体需求，可以进一步处理这些日期数据，例如进行比较、计算等操作。
注意：以上代码示例中的DatePicker组件是一个第三方组件，与腾讯云产品无关。如需使用腾讯云相关产品，可以参考腾讯云文档或官方网站获取更多信息。
相关·内容
我使用的是react native 0.61.4和react-native-date-picker 2.7.3库。我正在尝试通过xcode构建项目，并且不断收到这个错误:在DatePicker.m的三个函数中，没有在类型为'DatePicker *‘的对象上找到属性'overrideUserInterfaceStyle’。其中之一就是这个： - (instancetype)initWithFrame:(CGRect)frame
{
if ((self = [super initWithFrame:frame])) {
[self addTarget:s
浏览 19提问于2020-01-15得票数 1
我想要两个日期，一个是开始日期，另一个是结束日期，但现在的问题是，当我自动更改开始日期时，结束日期也在更改，反之亦然。我使用this = 'react-native-date-picker'； 以下是我的代码 import DatePicker from 'react-native-date-picker';
const [date, setDate] = useState(new Date());
const [dateForEndDate, setDateForEndDate] = useState(new Date());
const [op
浏览 38提问于2021-09-22得票数 1
我使用下面的代码在使用react-native-date-picker的react原生中选择日期时间
import DatePicker from 'react-native-date-picker;
...
render(){
return(
<DatePicker
mode="datetime"
date={this.state.date}
onDateChange={(date)=>{this.setState(date: date)}} />
);}
这是我使用的包的。但是在使用上面的代码时，我得到
浏览 7提问于2020-12-02得票数 0
我想知道我们如何能够显示数据报警器按钮点击在反应本机。我尝试过各种解决方案，但没有成功，任何帮助都是有帮助的。谢谢。
下面是我尝试过的
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
View,DatePicker
} from 'react-native';
这是我的渲染方法
render(){
return(
<TouchableOpacity
onPress={() => this.datePicke
浏览 0提问于2018-09-05得票数 11
回答已采纳
1回答
我想在导航抽屉中使用上下文API，而我被困在了如何做到这一点上？
我有两个屏幕显示屏幕和上传屏幕，在上传屏幕我收集数据，并将它们发送到useState挂钩，然后把他们发送到显示屏幕。在显示屏幕上，我把这个数据添加到数组中，现在的问题是当我回去上传屏幕再发送更多的数据时，显示屏幕数组得到返回到它的初始状态，即为空。现在，我需要创建一个上下文api，以便在其中添加数据。我怎么能这么做。下面是我的代码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow s
浏览 4提问于2021-12-17得票数 2
我正在使用React Native测试Ant Design Mobile的Picker组件。但是当我按下拾取器时，它不会像在演示()中那样从屏幕底部弹出。
我首先定义了一个数据数组：
const testData = [
{value: 1, label: '1'},
{value: 2, label: '2'},
{value: 3, label: '3'},
];
然后我在render方法中包含了Picker组件：
<Picker
data={testData}
values={[1]}
浏览 35提问于2017-02-06得票数 0
回答已采纳
1回答
无法找到一个很好的例子来说明如何做到这一点，但是我有一个组件，我想在一个组件中使用两次。
现在我只是通过：
import Picker from 'react-native-picker';
对于此特定组件，只导入Picker对象的一个实例。有没有办法让两个独立的物体..。比如
import Picker as picker1, picker2 from 'react-native-picker';
外面有这样的东西吗？
--编辑:这是如何使用这个特定组件的示例代码。我试图保持它的具体化，因为我知道这里的社区更喜欢它，当它是更一般的利益更多的people...t
浏览 1提问于2017-01-19得票数 1
回答已采纳
我在我的应用程序中使用了react-native-simple-picker，如果我使用默认的显示按钮，它在我的项目中工作得很好，但当我在项目中使用不同的按钮时，我想显示选取器。看起来ProposalPicker.js中的this.refs.picker.show()是需要调用的函数，但是我不确定如何从另一个组件文件访问它。目前，我的代码导致以下错误-‘`Cannot read property 'show’of undefined。感谢任何人的帮助。
ProposalPicker.js
import React, { Component } from 'react';
浏览 3提问于2018-09-27得票数 2
React本地Android应用程序在发布模式下崩溃。我无法发现问题，这里的修复是所使用的依赖项。
{
"dependencies": {
"@react-native-community/async-storage": "^1.12.1",
"@react-native-community/datetimepicker": "^3.5.2",
"@react-native-community/masked-view": "^0.1.11",
&#
浏览 5提问于2022-05-09得票数 2
因为ViewPropTypes已经从“react原生”中删除了，并且使用它的包没有更新。此错误出现在生成应用程序之后。
ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
ERROR Invariant Violation: Module AppRegistry is not a registered callabl
浏览 73提问于2022-06-25得票数 30
在中，我在功能组件中使用React来设置Redux存储上的状态。然后，我尝试通过名为prop的timestamp将存储的值传递给子组件。
问题是，子组件利用了DateTimePicker组件(来自react-native-modal-datetime-picker)，并且当它最初呈现timestamp支柱时没有定义，这会导致它出错。结果可以从以下控制台日志中看到：
undefined
undefined
Object {
"date": "2019-08-20",
"full": 2019-08-20T12:21:52.874Z,
&
浏览 4提问于2019-09-19得票数 5
回答已采纳
我有一个查询，因为我已经在我的react-native组件中添加了一个datepicker，datepicker的值不会改变，但值存储在数据库中。我尝试了许多方法，但都没有成功
我需要使用this.props.date将数据保存到date变量上，并且需要使用this.setState向用户显示他选择的值，因为两者都使用onDateChange。我不知道如何实现它
import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {Card, CardIt
浏览 0提问于2020-12-24得票数 0
我有一个自定义组件类，它在应用程序中使用React Native Picker显示选择列表。这个组件是由我使用react导航的createBottomTabNavigator()创建的一个屏幕导入的。 使用这个类的屏幕有一个窗体。用户填写表单，并在提交时将用户定向到另一个屏幕。我正在努力的是，当用户返回到相同的表单屏幕，而不是Picker list被重置为其默认值时，我看到的是具有以前选择的值的列表。从类提交表单时如何重置它？ 选取器列表组件如下所示 import React from "react";
import {View, Text, StyleSheet,
浏览 16提问于2021-01-18得票数 0
回答已采纳
1回答
在下面的js文件中，我们创建一个整数(TtSelectedItem)。如何在另一个.js文件上使用它？(没有点击任何按钮) AsyncStorage是否解决了这个问题？如果是真的，怎么做？
import React, { Component } from 'react';
import {Platform,StyleSheet,Text,View,Image,ImageBackground} from 'react-native';
import Picker from 'react-native-wheel-picker'
var Pick
浏览 0提问于2018-05-18得票数 0
回答已采纳
我尝试过reat-native-community/datetimepicker，但它显示type-error: Null不是一个对象。我基本上复制并粘贴了代码，但它也显示了错误。请帮帮忙。好心帮个忙从昨天开始就一直困扰着我。
我的DOB.js文件是：
import React, { Component, useState } from "react";
import { View, Button, Platform } from "react-native";
import DateTimePicker from "@react-native-comm
浏览 3提问于2020-11-03得票数 0
1回答
我正在开发一个世博管理(不是裸的)移动应用程序。我最近遇到了这个问题：，它在ios上开始崩溃。我知道这与我的一些需要ios本机模块的包有关，因此我必须弹出后才能使用这个包。
然而，我在这里的目标不是弹出而是找到导致这个问题的包，但是，到目前为止还找不到它。
让我感到不安的是，android运行时没有问题，尽管它看起来需要本地模块。
请注意在android上一切都很好
误差
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"sta
浏览 3提问于2021-01-14得票数 1
回答已采纳
1回答
我创建了一个按照我想要的方式格式化日期的组件，但我创建了另一个组件，它是一个使用"react-native- modal -datetime-picker“的DateTimePicker，但有一个显示模式的按钮，当用户选择日期时，它会在按钮上显示已经格式化的日期和日期上方的标签。
问题是，我需要在我的视图中使用该日期值，而我不知道如何从我的组件中获取该值。
我的DateFormatter (我需要该文本的值)：
import React from 'react';
import {Text} from 'react-native';
export de
浏览 0提问于2017-05-25得票数 0
3回答
我使用expo的选择器，如果我只点击它一次，它就会工作得很好。如果我点击它两次，就会出现以下错误：
TypeError: value.getTime不是一个函数。(在“value.getTime()”中，“value.getTime”未定义)
此错误位于: in RNDateTimePicker (at MyDateTimePicker.js:52)
这是我的约会时间选择器：
import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Image, Button,
浏览 2提问于2021-03-21得票数 2
回答已采纳
我正在使用react-m very new to React native. I-community/datetimepicker库，我发现它非常混乱。下面是我的代码，我应该添加什么才能使它起作用，并在屏幕上显示选定的日期和时间？我将非常感谢你的帮助！
import React, {useState} from 'react';
import {View, Button, Platform} from 'react-native';
import DateTimePicker from '@react-native-community/datetimep
浏览 36提问于2020-11-13得票数 0
1回答
我不得不去做一些任务，那就是创建一个动态选择器选项。但我在互联网上尝试了一些选项，大多数选项都是使用类组件来解释的。但我需要使用功能组件。创建选取器的目的是根据产品的名称选择产品。(因此选取器在标签上指明其名称)。但在这里面，我需要使用所选产品的ID调用post请求，而不是它的名称。因此，当从picker中选择一个选项(作为产品名称)时，我还需要获取Product ID作为输入。 以下是productDetails最终在控制台上运行的代码。 {"data": [{"accountCoordinatorEmail": null, "category&
浏览 17提问于2021-04-03得票数 0
回答已采纳
5回答
React 应用程序在每次单击时都运行得非常慢。我正在使用react本机v0.40.0，下面是我的项目的依赖项。
{
"analytics-react-native": "^1.1.0",
"apisauce": "^0.7.0",
"babel-preset-es2015": "^6.18.0",
"es6-promise": "^4.0.5",
"flow-bin": "^0.36.0",
浏览 0提问于2018-03-26得票数 18
我正在我的反应-本机项目中写一个反应类组件。我在扩展airbnb系统规则的项目中使用ESLint。
这个组件有一个表单，它将它的表单值存储在Redux中。它初始化来自Redux的表单值，并使用导入到文件中的动作创建者(称为employeeUpdate)更新它们。在本例中，我不需要在组件中使用任何生命周期方法或构造函数。
问题是ESLint抱怨我应该把这个组件写成一个纯函数。我不能将它写成一个纯函数，因为它正在使用Redux作为道具的状态。这是具体的错误：
应将eslint组件编写为纯函数。
这是我的代码：
import React, { Component } from 'reac
浏览 0提问于2018-11-30得票数 1
我目前正在努力学习反应本土化，并希望实现下拉菜单。
我尝试使用基于类的示例，但是我得到了以下错误：
[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'this.setState')]
at node_modules\react-native-dropdown-picker\src\components\Picker.js:369:10 in Picker
at node_modules\react-native-dropdown-picker\src\componen
浏览 12提问于2022-06-19得票数 0
回答已采纳
让第二个选择器(selectedValue2)工作的方法是什么？当我试图改变第二个选择器时，它不会改变它的值，我不明白为什么。我想知道原因是什么，以及我是如何处理它的。 import React, { useState } from 'react';
import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
import { Picker } from '@react-native-community/picker';
const Settings
浏览 22提问于2020-08-10得票数 0
回答已采纳
我对React Native很陌生，但我对React非常熟悉。我有一个似乎无法解决的问题。 import React from "react";
import { Picker, FlatList, View, Text } from "react-native";
var numberArray = ["1", "2", "3", "4"];
// for (var i = 1; i <= 60; i++) {
// numberArray.push(i);
// }
const
浏览 13提问于2020-01-22得票数 0
我希望有一个反应本机形式的日期输入字段，并且我安装了命令：expo install @react-native-community/datetimepicker。
首先，我使用了以下组件，与文档中所描述的几乎完全相同：
import DateTimePicker from '@react-native-community/datetimepicker';
import React, { useState } from 'react';
import { Button, View, Text } from 'react-native';
expo
浏览 6提问于2022-07-07得票数 0
回答已采纳
1回答
我是一个新手，在分别显示日期和时间选择时，我是一个反应本地和挣扎的新手。
我使用npm包:react本机模式-日期选择器。
在代码中:我试图分别显示选定的开始日和结束日。然而，对于这两个参数，我只使用了一个函数。当我反转handleConfirm()中两个参数的顺序时，它会反向工作。请帮助并随时调整我在JS：)中的知识)
import React, { useState } from 'react'
import {
View,
Button,
StyleSheet,
TouchableOpacity,
Text
} from 'react-nat
浏览 1提问于2020-02-25得票数 1
回答已采纳
下面我会提到一个React日期范围选择器的链接。它有两个参数:一个是date picker，另一个是date range picker。我希望在同一个URL中包含这两个参数，以便向API端点发送GET请求。
最终的API端点URL应如下所示：
http://127.0.0.1:8000/create_keyValue?key=<date_picker_value>&value=<date_range_value>
如何使用用户在此React组件中选择的两个日期值更新此终结点？
import React, { Component } from "reac
浏览 2提问于2021-10-04得票数 0
我有来自“react-native”的Picker。Picker.Item有：“星期一，星期二，星期三等等”。我想设置文本属性。比如fontSize:20，color:"red“等。
在Picker组件中我们可以使用style。但是在那里我不能改变文本的属性。我也尝试使用颜色{{ItemStyle=：“red”}}。但是什么都没有改变
<Picker
style={{ flex: 1 }}
selectedValue={this.props.shift}
onValueChange={value =>
浏览 10提问于2019-07-24得票数 0
回答已采纳
我之所以问这个问题，是因为我研究过这个问题，似乎找不到解决方案。我使用的是React Native Picker，但是在默认情况下，这个选择器不会在用户选择一个项目时在右上角提供一个“确认”按钮。我对本地和移动开发的反应是非常新的，所以如果这是一个简单的问题，我很抱歉，但我相当卡住了。有谁知道实现这个按钮的解决方案吗？
import React, { Component } from 'react';
import { Picker, View, Text } from 'react-native';
class ProposalPicker extends
浏览 1提问于2018-09-27得票数 0
我正在尝试将选择器模式背景更改为另一种颜色，默认情况下是白色！ 我使用"react-native & native-base“中的Picker，但没有人为我工作！ 那么有没有办法改变它--从原生的还是RN的？ 屏幕截图 ? 代码 <View
style={{
felx: 1,
borderBottomWidth: 1,
borderBottomColor: '#ddd',
borderColor: '#f05',
borderWidth: 1,
浏览 24提问于2020-04-13得票数 1
我使用的是"react": "^16.12.0"版本，我制作了两个独立的屏幕，一个是基于function组件的，另一个是基于功能的。
在基于React组件的屏幕月选择器中，我正在工作，如下所示，
import React, { Component } from 'react';
import {Button} from 'react-bootstrap';
import Picker from 'react-month-picker';
import 'react-month-picker/css/mont
浏览 0提问于2020-02-22得票数 0
回答已采纳
使用React Native时，我使用了以下依赖项。
"dependencies": {
"@react-native-async-storage/async-storage": "^1.15.11",
"@react-native-community/netinfo": "^7.1.2",
"@react-native-community/picker": "^1.8.1",
"@react-native-picker/picker"
浏览 0提问于2021-11-24得票数 0
如何在react中获得数据报警器的值？我正在使用自定义组件。
我使用的是两个组件，第一个叫做InputDateCustom.js，下面的代码如下：
import DatePicker from 'react-toolbox/lib/date_picker/DatePicker';
import React, { Component } from 'react';
const datetime = new Date(2015, 10, 16);
datetime.setHours(17);
datetime.setMinutes(28);
export
浏览 7提问于2017-06-05得票数 7
回答已采纳
1回答
我使用了React Native 0.55.4和native-base 2.4.4。我想显示一个带有选择器的列表。
<List dataArray={action.dates}
renderRow={(date, _, rowID) =>
<ListItem>
<Text>{rowID} {Moment(date.start).format('MMM Do YY')}: {Moment(date.start).format('hh:mm')} - {Moment(date.end).fo
浏览 0提问于2018-12-14得票数 0
1回答
我已经从react native开始了。我正在使用react本机组件创建一个抽屉，该抽屉将通过单击标题栏中的按钮来打开。
但抽屉并不是在整个屏幕上打开的。这是代码
import React, { Component } from 'react';
import { View, DrawerLayoutAndroid, Text, Alert, Picker } from 'react-native';
import { Icon} from '@shoutem/ui'
export default class Home extends Com
浏览 4提问于2018-01-18得票数 1
我在React Native中使用了这个引用url 来添加拾取器，但是在这里它只显示了拾取器中的一个轮子，但是我想在拾取器中显示两个轮子，那么我该怎么做呢？有谁知道吗？
import React, { Component } from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';
export default class HomePage extends Component {
constructor(props) {
super(prop
浏览 1提问于2018-06-06得票数 0
我尝试在sectionlist中呈现一个dropdown-picker (react-native-dropdownpicker)，但无法滚动下拉列表中的内容。它只显示第一个结果。
我用zIndex尝试了很多东西，用flex: 1作为父视图，但我找不到解决方案。
是否可以在sectionlist中渲染，或者我是否应该寻找其他解决方案？
浏览 25提问于2021-09-15得票数 1
我想在我的视图中添加一个下拉列表。我是新手，请帮助我。 我还添加了一个评论，我试图添加一个下拉列表。我尝试了这个https://www.npmjs.com/package/react-native-dropdown-picker，但它只是给了我一些错误。 从‘react’导入React，{ useState }；//从‘react-native-dropdown-picker’导入useState DropDownPicker；从‘react-native’导入{ StyleSheet，Text，View，TextInput，StatusBar，SafeAreaView，图像，按钮，警报}；
浏览 58提问于2021-02-04得票数 2
回答已采纳
我正在学习在ReactNative中设置时间。我能够设置onConfirm进程的DateTimePickerModal的时间，但我在关闭DateTimePicker时遇到了困难。
这是消息来源。
import React, {Component} from 'react';
import{
Text,
View,
Button,
}from 'react-native';
//import DateTimePicker from '@react-native- community/datetimepicker';
import
浏览 1提问于2021-05-04得票数 0
回答已采纳
1回答
我已经重置了地铁，但同样的问题也在发生。我该如何解决这个问题？当我更改端口时，同样的问题也会发生。当我重建这个项目时，我也面临着同样的问题。 ? {
"name": "meal",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-nativ
浏览 15提问于2021-08-01得票数 0
我正在尝试在我的React Native应用程序中使用ABNewPersonViewController。这是它在Objective-C中的用法：
ABNewPersonViewController *picker = [[ABNewPersonViewController alloc] init];
picker.newPersonViewDelegate = self;
UINavigationController *navigation = [[UINavigationController alloc] initWithRootViewController:picker];
[self
浏览 0提问于2016-04-12得票数 23
我正在尝试使用库day-picker为输入范围日期选择器创建一个React无状态组件。 如果我尝试将有状态组件转换为无状态组件，则无法访问this关键字，因为无状态组件没有this的作用域。 我非常新的反应和钩子，并尽我最大的努力来解决，但不知何故未能解决问题，这是我正在尝试。 问题-日期选取器范围输入不能按预期工作。日历显示始终以当前月份开始。但不知何故，它从去年开始。 Actual Code import React, { useState } from 'react';
import DayPickerInput from 'react-day-picker/D
浏览 16提问于2019-09-28得票数 1
回答已采纳
当使用react-native-image-picker捕获照片并保存时，整个应用程序有时会被重新加载。这并不是一直都在发生，有时它会像预期的那样工作，但有时会重新加载应用程序。 ImagePicker.launchCamera(options, (response) => {
this.setState({ fileUri: response.uri, fileName: response.fileName })
}); "react-native"："0.59.1"，"react-native-image-picker"："
浏览 15提问于2020-04-13得票数 0
1回答
我试图用onValueChange编写两个函数，但它只执行其中一个函数。有办法吗？
import { Picker } from 'react-native';
<Picker
selectedValue={selectedValue}
style={{ height: 35, width: 135 }}
onValueChange={(todoInput2) => props.textChange(todoInput2)}
onValueChange={(itemValue, itemIndex) =&g
浏览 3提问于2022-03-11得票数 0
在react native中，我有一个表单(简单的字段-姓名、地址)，并希望添加一个下拉列表来选择用户类型。我想从firebase中动态加载下拉列表。有可能吗？感谢任何人的帮助。
更新：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Picker,
} from 'react-native';
export default
浏览 2提问于2017-08-27得票数 4
回答已采纳
我有下面的React组件，它可以正常工作。在读了博客文章中关于完全受控组件的文章后，我想知道是否可以重构这段代码，使其完全受控，如果我理解正确的话，这可以消除getDerivedStateFromProps的使用。比起React Native，我更熟悉Vue Native，我正在寻找一些关于如何进行这样的重构的指导。
import React, { Component } from "react";
import { Container, Content, Picker } from "native-base";
export default class Dy
浏览 0提问于2020-03-25得票数 0
1回答
我正在尝试将Redux集成到我的React本地应用程序中。我得到的错误“无法在上下文或道具中找到”存储“。
我的代码如下：
index.js
import { AppRegistry, View } from 'react-native'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import { reducer } from './containers/intro/introRedux'
const store = cr
浏览 2提问于2017-09-14得票数 0
回答已采纳
2回答
import React from 'react';
import { Text, Button } from 'react-native';
import RNDateTimePicker from '@react-native-community/datetimepicker';
const Timer = ({}) => {
const [picker, setPicker] = React.useState({time: null, date: null});
const [mode, setMode] = Rea
浏览 16提问于2022-05-31得票数 0
我使用react-native-calendar-picker library.trying来获取选定的日期，但我收到了预览日期。
onDateChange (date) {
this.setState({ date: date });
}
<CalendarPicker selectedDate={this.state.date}
onDateChange=(date)=>this.onDateChange(date)}}/>
浏览 0提问于2016-10-27得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
