mmazzarolo / react-native-modal-datetime-picker Goto Github PK

For me only date picker modal open, no time picker.
I followed same code as in example.

Android 6
I am using react-native-modal-datetime-picker: "^3.0.1",

I didn't get the time with the local time. I think it's because of the time zone problem. How can I solve it? Thank you

When settings mode='datetime' the timepicker ignores the is24Hour flag

the issue is in src/CustomDatePickerAndroid/index.js:52-54 where the is24Hour prop should be added to the time options.

let me know If you want a PR for that.

Interested in having typescript typings? For those using typescript with react native. I already started on it

i find it not easy to change year on android system, eg, from current date to 2000 , i have to click many times, it's a bad user experience.

Hi there,

First, thanx for your package that saved me a lot of time !
I just would like to report you a warning that appears when I set the 'datetime' mode :
Warning: Failed prop type: Invalid propmodeof valuedatetimesupplied toCustomDatePickerIOS, expected one of ["date","time"].
I think it would be easy to correct.

I'm trying to use the datetime picker in the list view to changes the dates on each row. However when a row is clicked the dialog is shown multiple time (for each row) and the first row it does not show at all.

Below is some example code that shows the problem. I may just be doing it wrong. :)

import React, { Component,PropTypes } from "react";
import { AppRegistry,ScrollView,Text,View} from "react-native";
import DateTimePicker from "react-native-modal-datetime-picker";

var list=new Array();
class Example extends Component {

	state = {
		isDateTimePickerVisible: false
	}

	_showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true})
	_hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false })

	_handleDatePicked = (seq, date) => {
		list[seq].time=date;
		this._hideDateTimePicker();
	}
  render() {
    if (list.length == 0) {	
		for (let i=0;i<3;i++) {
			let tmp =  new Object();
			tmp.seq=i;
			tmp.time=new Date(1478546600000+(i*24*60*60*1000));
			list.push(tmp);
		}
	}
	return (<View><ScrollView>{this.renderRows()}</ScrollView></View>);
  }
  
  renderRows() {
    return list
      .map((data) => {
			return (
			<View key={data.seq} style={{flex: 1, flexDirection: "row", justifyContent: "space-between"}}>
				<Text>{data.time.toString()}</Text>
				<Text onPress={this._showDateTimePicker.bind(this,data.seq)}>Set Time</Text>
				<DateTimePicker
				key={data.seq} 
				mode="datetime"
				date={data.time}
				isVisible={this.state.isDateTimePickerVisible}
				onConfirm={this._handleDatePicked.bind(this,data.seq)}
				onCancel={this._hideDateTimePicker}
				/>
			</View>
			)
		})
	}
}	
  
AppRegistry.registerComponent("Example", () => Example);

att

Hey mmazzarolo,
Your package is working very fine and it globally looks pretty, especially on Android.
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 !

Native iOS modal

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 ;) )

Your package modal

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). What do you think about give us the possibility to choose between separated cancel button, native-like cancel button and no cancel button at all ?

First, thanks for the great module.

I am trying to use the custom confirm button option so I create a Button like so

<customConfirmButtonIOS={<Button
              title="Confirm"
              onPress={this._handleTimePicked}
              />}

the problem is that the onPress function doesn't seem to receive the selected date value in the same way that the built-in confirm button passes it along. I tried setting ref for the DateTimePicker to simply grab it from the function but I not sure what the path to its value is from the ref....any insight is appreciated.

Versions:

"react": "15.4.2",
"react-native": "0.42.0",
"react-native-modal-datetime-picker": "^4.1.0",

I just copy the code from READEME.md.
In "Remote JS Debug" mode, it don't work in simulator. The TouchableOpacity just keep highlight and nothing happens. When some other operations taked, it will crash. My iPhone(6s Plus, 10.2.1), same as simulator.

But not in "Remote JS Debug" mode, it works well both simulator and iPhone.

Edit: On android(SAMSUNG Galaxy S6, Android 5.1.1) all works well.

onHideAfterConfirm behavior does not work at all on both Android and iOS.
By looking at both "index.js", master branch seems to indicate the behavior is implemented and supported. Nevertheless, this implementation is not observed after performing an "npm install react-native-modal-datetime-picker". There is no mention of onHideAfterConfirm in the code that is retrieved by npm install.

EDIT - Version I'm running:
react-native-cli: 2.0.1
react-native: 0.44.0
[email protected]

I might be applying this wrong but I copy the example and a time picker does not show up for me however the console log still prints out a time when a date is selected. How can I make the time picker show up as well?

Not an issue

<DateTimePicker
     mode="time"
     minuteInterval='15'
     isVisible={ this.state.pickerOpened }
     onCancel={() => this.setState({pickerOpened: false}) }
     onConfirm={(date) => {
         this.setState({pickerOpened: false});
     }}
 />

Should display 00, 15, 30, 45 for the minutes, but instead shows 0-59

I'm reusing the picker for multiple fields in my screen. I want to set different default times for the picker each time i show it. Setting the 'date' prop doesn't seems to help as the picker always shows user's last selection. Any thoughts?

I was trying to change the mode prop to 'datetime' but it is not working, how I can show date and time, and I am talking about both iphone and ios.

Thank you

Hi,
In some android device (Nura), the datepicker opens on November 2100.

<DateTimePicker
          minimumDate={new Date()}
          isVisible={this.state.isDateTimePickerVisible}
          onConfirm={this._handleDatePicked}
          onCancel={this._hideDateTimePicker}
         />

Any ideas ?
Thanks a lot.

Hi!

I'm just reporting a small issue! :)

@mmazzarolo you should change the keyboardShouldPersistTaps={true} to keyboardShouldPersistTaps="always".

'Cause it's deprecated on the console :)

Thx a lot for you lib! :)

When we set picked date in state, and if we try to get the date from state it give old date instead of picked date.

import React, { Component } from 'react'
import { Text, TouchableOpacity, View } from 'react-native'
import DateTimePicker from 'react-native-modal-datetime-picker'

export default class DateTimePickerTester extends Component {
  state = {
    date: new Date(),
    isDateTimePickerVisible: false
  }

  _loadFromServer = () => {
   // In this code this.state.date prints old date instead new picked date
    console.log(this.state.date)
  }
  _showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true })

  _hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false })

  _handleDatePicked = (date) => {
    console.log('A date has been picked: ', date)
    // Set picked date to state
    this.setState({ date: date })
    this._hideDateTimePicker()
    this._loadFromServer()
  }

  render () {
    return (
      <View style={{ flex: 1 }}>
        <TouchableOpacity onPress={this._showDateTimePicker}>
          <Text>Show TimePicker</Text>
        </TouchableOpacity>
        <DateTimePicker
          isVisible={this.state.isDateTimePickerVisible}
          onConfirm={this._handleDatePicked}
          onCancel={this._hideDateTimePicker}
        />
      </View>
    )
  }

}

I want to change English to chinese， how？

Hi, first of all, thank you for making this nice module.

When i set the property maximumDate it works as expected in both platforms, but in android it shows an ugly header, this error is not shown when i set the minimumDate prop.

This is my code

<DateTimePicker
            isVisible={this.state.showDob}
            titleIOS="Select Your Birth Day"
            maximumDate={Moment().subtract(18, 'years').startOf('day').toDate()}
            onConfirm={date=>{
              dob.onChange(Moment(date).format("YYYY/MM/DD"))        
              this.setState({showDob: false})
            }}
            onCancel={()=>{this.setState({showDob: false})}}/>```

While using the in browser debugger with React Native, this library freezes up the iOS app when displaying the modal leading to crash. I am using the example in the Usage section of the ReadMe. Works fine when debugger is turned off.

Hi Matteo,
I would like to use custom texts for "Confirm" and "Cancel" buttons in Android platform.
Is it possible?
Thanks!

Yarn produces the following warning:

warning react-native-modal-datetime-picker > [email protected]: This module has been moved to react-native-modal

See: https://github.com/react-native-community/react-native-modal#warning

Hello,

I would like to use it in my project ,but license file is missing here so I can not use it.
Thanks.

I've added a DatePicker with a mode of 'time' and it continues to show 1 minute intervals despite setting the minuteInterval to 30.
I've also tried all the other possible values. None of them seem to work.

Solution: modify index.js

TimePickerAndroid.open(timeOptions).then(({action, minute, hour}) => {
if (action === TimePickerAndroid.timeSetAction) {
let selectedDate = new Date(year, month, day, hour, minute);
this.props.onConfirm(selectedDate);
} else {
this.props.onCancel()
}
});

Can we change colors of Android datetime picker?

minimumDate doesnt work ,maximumDate work well?

I recently updated to new react-native 0.46.1 and following bugs appear in this library.
It appears when I set isVisible state to true.

please fix this issue in npm module. Thank you.

throwing error on iOS.
See screen shot below for the error.

Code:

import React, { Component } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';

export default class DateTimePickerTester extends Component {
  state = {
    isDateTimePickerVisible: false,
  };

  _showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });

  _hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });

  _handleDatePicked = (date) => {
    console.log('A date has been picked: ', date);
    this._hideDateTimePicker();
  };

  render () {
    return (
      <View style={{ flex: 1, marginTop: 50 }}>
        <TouchableOpacity onPress={this._showDateTimePicker}>
          <Text>Show TimePicker</Text>
        </TouchableOpacity>
        <DateTimePicker
          isVisible={this.state.isDateTimePickerVisible}
          onConfirm={this._handleDatePicked}
          onCancel={this._hideDateTimePicker}
        />
      </View>
    );
  }
}

Depencencies used

  "dependencies": {
    "expo": "19.0.0",
    "moment": "2.18.1",
    "react": "16.0.0-alpha.12",
    "react-native": "0.46.1",
    "react-native-deprecated-custom-components": "0.1.1",
    "react-native-keyboard-spacer": "0.3.1",
    "react-native-material-textfield": "0.8.1",
    "react-native-modal-datetime-picker": "^4.9.0",
    "redux": "3.7.2"
  }

Currently the picker return a complete date with the local timezone. When picking a date like a birthdate, it can be an issue. For example if my device local timezone is UTC+01 and I select 2000-01-01 as my birthdate, the picker would return 2000-01-01 00:00:00+01. If I convert it to UTC(z) (the default date format used by JSON for example) it would be converted to 1999-12-31:23:00:00.000Z.
So it would be good to have an option to tell the picker that the returned date should have no timezone (wich would result to UTC+0) or, better, to enforce it's timezone (in which case it could be set to 0 if we want UTC+0 but also any other value like -5 if we want UTC-5 for example). If this option is not set, returned dates would default to use the local timezone of course.

All is well.

Android time picker gives the wrong time inputted as output.

I fixed this by editing line 81 of src/index.js

const date = new Date();
date.setHours(hour, minute, 0, 0)

Expected behavior:
passing prop minuteInterval={15} should show time in 15 minutes interval.

Actual behavior:
1 minute interval

Setting minimum date crash app

<DateTimePicker
    isVisible={this.state.isDateTimePickerVisibleTo}
    onConfirm={this._handleDatePickedTo}
    onCancel={this._hideDateTimePickerTo}
    minimumDate={this.state.dateFrom}
    maximumDate={new Date()}
     />

this.state.dateFrom cames from another date picker
and the code was working before when I commented minimumDate every thing works fine

I really need this.

Hey just another question, even when I set the mode to 'time' or 'date', the opposite picker would sometimes pop up. I've been looking at it and I've checked and i'm not sure if it's my own mistake or not.

We have to use different Props name for Android and IOS.

Android:

1. minDateAndroid
2. maxDateAndroid

IOS:

1. minimumDate
2. maximumDate

Can we create common property for this like we can use only minimumDate and maximumDate for both Android and IOS.

Set up a DateTimePicker set to mode="time" with date={someDatePastOrFuture}. Select a new time via the picker and examine the date object sent to the onConfirm function.

On iOS, the old year, month, and day remain the same but the time has been updated, as expected.

On Android, the time updates as expected, but the year, month, and day have been replaced with today.

My situation:

1. A form has your datetime picker field.
2. When I open the form set time and submit the form.
3. Open the form again with changed time (default value is used).
4. But when you open datetime picker old value is there.

I've reviewed code in https://github.com/mmazzarolo/react-native-modal-datetime-picker/blob/master/src/CustomDatePickerIOS/index.js and noticed that there is no any code to update this.state.date.

There is a workaround: unload form/field and load it again.

Please fix it to avoid component unloading.

DateTimePicker stops working when you unmount the component.

I display a list of tasks, when changing the date the component is dismounted and the datetimepicker stops working immediately, returning only when it closes the emulator and opens again.

Code example:

  ...

  render() {
    const { visibleDateTimePicker } = this.state;
    const { dailyTask } = this.props;

    return (
      <Card borderColor="#F4B937">
        <CardHeader onPress={this.onOpenActionSheet} />
        <CardBody>
          <Title>
            {dailyTask.title}
          </Title>
          <HelperContainer>
            <HelperText>Adicionado </HelperText>
            <FormattedRelativeTime
              style={styles.formattedRelativeTime}
              value={new Date(dailyTask.createdAt)}
              unit="best"
            />
          </HelperContainer>
          <Description>
            {dailyTask.description}
          </Description>
        </CardBody>
        <DateTimePicker
          isVisible={visibleDateTimePicker}
          onConfirm={dueDate => this.handleEdit({ dueDate }, dailyTask)}
          onCancel={() => this.setVisibleDateTimePicker(false)}
        />
      </Card>
    );
  }

Hello,
How can i set a format to the datepicker to pick the data like yyyy-mm-dd.

Example
2017-08-14

Can you support picking multiple times or a range of times when I open the Calendar for a day

I am using this Module But How Can I Disable Future and Current Dates...

_handleDatePicked = (date) => {
    var DateFormat =  moment(date).format("YYYY-MM-DD");
     console.log('A date has been picked:'+DateFormat);

     var d1 =new Date();
    d1.setHours(0,0,0,0)
     var d = new Date(DateFormat);
     d.setHours(0,0,0,0)
    var n = d.getDate();
    var m = d1.getDate();
    
    if(m < n){
        Alert.alert("Hello", 'Current Date and Future Dates Not allowing')  
        console.log("n:"+n +":"+"m:"+m) 
        }
        else{
           this.setState({
          DateOfBirth:DateFormat
         })
       } 
     this._hideDateTimePicker();
   };

This Code Is Not Allowing Future Dates But Allowing CurrentDate , I want Disable Current Date Also

Hi,
Is there anyway to implement custom calendar such as persian calendar?

How to support landscape orientation for this component?

hello @mmazzarolo,
update:
I use your examples, first, let mobile phone in landscape state, your examples app will be in a horizontal screen, and then click 'Show TimePicker', at this time, app forced change to vertical orientation when show TimePicker...and ui will show the issure.

nice and lite component.
would be great to see possibility to change modal container in the same way as customTitleContainerIOS, datePickerContainerStyleIOS done