I had used date time picker in react native, but I want to do in my custom UI for the date picker. How can I do it?
I want to do as shown in below image in both android and IOS
Follow the below steps.
Use new Date API to get Date, Month and Years store them in array.
then display in row so three are side to each other.
Hide Top and Bottom Portion View Using overflow hidden
That is it you can generate a Date Picker like you side.
You can get that look by using the react-native-date-picker library and the following code:
<DatePicker
date={date}
onDateChange={setDate}
mode="date"
/>
Related
I work on test automation . I am trying to select an expiry date in the date picker component . App is implemented using react native. Developer has used date picker component available in https://github.com/xgfe/react-native-datepicker . But I am unable to see the android tags corresponding to the date picker in Appium inspector and UIAutomatorViewer. The app source looks like below
inspector app source
After the last android.view.ViewGroup tag , nothing is displayed for date picker in inspector.
As a workaround , we asked the developer to set ids for ‘Cancel’ and ‘Confirm’ buttons . So that atleast we can select first date and proceed . But the developer informed that the date picker is coming from reactive-native-picker library(1.7.2 version) . So they are unable to set any ids inside for the ‘Cancel’ and ‘Confirm’ buttons.
Please find the xml source which copied from inspector . There is no mention of the date picker element
xml source
Any help is appreciated . Thanks in advance.
I'm working on a Vue.js project . I'd like to have an icon displaying a calendar, and when you click on the icon , you'll get a datepicker to choose multi date from.
How do I implement that?
I've looked at the docs:
and I've tried something like this:
align="right"
v-model="test"
icon="calendar"
:lang="lang"
:multi="multi"
:always-display="false"
>
</m-date-picker>```
but that doesn't working
What am I missing?
I am using React Native picker (#react-native-community/picker) to create picker fields in react native.
Now after building the APK, I ran the app in Appium. My aim is to using Appium to select the picker items. For that I need accessibilityId. So, I passed accessibilityLabel in Picker and Picker.Item.
But when I am inspecting the items I can't find any accessibilityId.
I want to perform the click operations and create test script, and I don't want to use the XPath. That's why I want accessibilityId. Is there any way to make accessibilityId available to Picker Items? Or is there any way to select these items and do click operations?
In your react code try to add accessibilityLabel in some kind of tag that generates native "View" tag in android. You can try wrap this picker element in <TouchableOpacity> and then add the label.
<TouchableOpacity accessibilityLabel="picker-mr">
Each Item of DatePicker should work independently. The problem is when I touch on DatePicker, the first item always moved by 3 rows including dragging on other items. Dragging on the first item has no issue.
I use DatePickerIOS from react-native, got the problem.
I use DatePicker from react-native-datepicker, still got the problem. I can't figure out why this happened.
This is my code for DatePicker. This is just default code without any modification though.
<DatePickerIOS
mode={this.props.mode}
date={this.props.date}
onDateChange={this.props.onDateChange}
minuteInterval={this.props.minuteInterval}
locale="th"
/>
Is it possible to disable specific dates using the DatePicker of NativeBase in React Native? I looked in the docs, and only found that is possible to specify a minimumDate and minimumDate, but I'm trying to disable some dates in this interval. Thanks!