Comments (11)
I have installed the 1.3.0 version
Wait! the last version published on npm is 2.0.3, not 1.30.
You're still on the older version ☂️
Please take a look at the code: as you can see the isVisible
prop is named correctly and the custom button are wrapped in the touchable view :)
Let me know if the latest version works fine for you 👍
from react-native-modal-datetime-picker.
@Okipa thank you for this well documented issue 👍
On iOS, title and buttons are not customizable and it would be great to have the possibility to change the font color and size of the title and the confirm and cancel buttons for example. The background color of the modals could be great to custom too !
In your package, it looks like the native modal buttons but they are bigger than on the native modal. Moreover, the cancel button has a bold font weight and not the confirm one.
If everybody could customize this, that would be awesome (and your package would become perfect ;) )
I'm with you on this, more customizations + nice defaults = ❤️
I'm planning to make this component even more customizable, but at the moment I'd like to focus a bit more on react-native-animated-modal first, which in the future will become the "modal" dependency of this package.
Last thing, the cancel button is separated from the modal and (in my opinion), it would far prettier if it would looks like the native modal (elegantly separated from the confirm button by a border as in the native iOS modal).
Sounds good, but fyi I tried to mimic the design of the ActionSheetIOS instead of the modal one :)
from react-native-modal-datetime-picker.
Hey @Okipa !
In the end I had to edit a bit your pull request #4: you can now provide a component for the title, for the two buttons (they will be wrapped in a TouchableOpacity
and for the DatePickerIOS container style.
I had to do so because:
- There were some minor issues with the linting
- I'd like to keep the IOS component more similar to ActionSheetIOS than to a real modal/dialog
- It's even more customizable this way in my opinion
You can install the latest version with npm i -S [email protected]
Let me know if it works well for you, I'm open any kind of feedback (and critics, of course).
Thanks again for the PR 👍
from react-native-modal-datetime-picker.
Sorry for the late answer, I was working on a Web project these last days. I test your new version tomorrow !
from react-native-modal-datetime-picker.
@Okipa I'm closing the issue, feel free to re-open if you have any issue with the new release 👍
from react-native-modal-datetime-picker.
Hey @mmazzarolo,
I just tested your new version and your changes are nice, however I have found some issues/questions :
- this is strange, there is no modal backdrop anymore when we call the datepicker => by the way, it could be great to have the possibility to set our custom modal backdrop-color.
- if I want to include a custom confirm button, how to manipulate the date the datepicker have just set ?
- if I customize the confirm and cancel components, the onConfirm and onCancel attributes should not be required anymore
Could give me some feedbacks about this ?
from react-native-modal-datetime-picker.
this is strange, there is no modal backdrop anymore when we call the datepicker => by the way
are you using the last version? I tried it just yesterday (in the example dir) and it was working fine.
it could be great to have the possibility to set our custom modal backdrop-color.
yep, the component that handles the modal already has a prop for that, I can easily add something like modalProps
if you want 👍
if I want to include a custom confirm button, how to manipulate the date the datepicker have just set ?
Can you give me a concrete example? Can't you just react in the onConfirm
trigger?
if I customize the confirm and cancel components, the onConfirm and onCancel attributes should not be required anymore
You can customize the component, but it will be wrapped in a touchable
that handles the onConfirm
and onCancel
, otherwise it would be too complex to trigger them.
from react-native-modal-datetime-picker.
I have installed the 1.3.0 version, removed my node_modules, clean react and npm cache, reinstalled npm dependencies and have inserted your datepicker as below (the same implementation as before)and I do not have any modal backdrop ...
<DateTimePicker
mode='datetime'
titleIOS='Choisissez une date'
visible={this.state.showDatePicker}
onConfirm={(datetime) => {
this.handleDatePicked(datetime);
}}
onCancel={() => {
this.hideDateTimePicker();
}}
minuteInterval={5}
maximumDate={new Date()}
/>
By the way, the isVisible
attribute precised in your readme has not been updated => it is visible
now.
About the custom components, they are currently not wrapped into a Touchable
component but they replace them, that's why I can't trigger your onConfirm method. You're right, the solution would be to wrap them into your Touchable
component.
EDIT : here is an example of the DateTimePicker implementation with custom components :
<DateTimePicker
mode='datetime'
titleIOS='Choisissez une date'
customConfirmButtonIOS={
<View>
<TouchableOpacity
style={[styles.customDatePickerConfirmButton, Theme.h_align_center]}
onPress={(datetime) => {
this.handleDatePicked(datetime) // can't get the datetime set on the DatePicker
}}>
<Text style={styles.customDatePickerConfirmText}>Confirmer</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.customDatePickerCancelButton, Theme.h_align_center]}
onPress={() => this.hideDateTimePicker()}>
<Text style={styles.customDatePickerCancelText}>Annuler</Text>
</TouchableOpacity>
</View>
}
customCancelButtonIOS={<View />} // don't want to show the cancel component
visible={this.state.showDatePicker}
onConfirm={(datetime) => this.handleDatePicked(datetime)} // useless here
onCancel={() => this.hideDateTimePicker()} // useless here
minuteInterval={5}
maximumDate={new Date()}
/>
In this case, the onConfirm method is never hit because of the replacement of the initial component by the custom one.
from react-native-modal-datetime-picker.
Woooot, I was sure to install the latest version ! I just reinstalled your package with the tag @latest and everything is working well !
Pfiuuu, sorry for that ^^
from react-native-modal-datetime-picker.
no worries man! 👍
from react-native-modal-datetime-picker.
In IOS, somtimes onConfirm button is not working,ON select 17 and 16 min, it does not select
from react-native-modal-datetime-picker.
Related Issues (20)
- Native module RNDatePicker tried to override RNDatePicker
- Customizing Background and Text Color in Android with Expo HOT 2
- Minimum and maximum time is not working on android but working for ios
- MinuteInterval time return current time in ios , android working fine
- `onHide` callback doesn't return a valid Date
- timeZoneOffsetInMinutes` is deprecated and will be removed in a future release. Use `timeZoneName` instead.
- Datepicker is not visible on iOS HOT 1
- Can't see the text in the picker modal (iOS) HOT 1
- Missing peerDependency on React
- how can only use it as only Month and year picker
- react-native-modal-datetime-picker(^17.1.0) is not showing on iOS 17.3.1 HOT 1
- Exception in HostFunction: Malformed calls from JS: field sizes are different.
- Can't install in react-native 0.74 using NPM I HOT 1
- Dark Mode is not working on Android devices.
- Time Zone Issue HOT 1
- WARN: `defaultProps` will be removed from memo components HOT 3
- isDarkModeEnabled doesn't work on spinner in iOS
- how to add a custom header in Android
- WARN: defaultProps will be removed from memo components
- I want to hide the dates that are outside the range. It it possible?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-modal-datetime-picker.