DatePicker #3381

1995mars · 2021-01-16T08:00:19Z

I have gone through these following points

[] Check latest documentation: https://docs.nativebase.io/
[] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
[] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
[] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
[] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
[] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

I want to use the DatePicker to get the time, but when I click on it, it shows the error

Steps to reproduce

import {DatePicker} from 'native-base';
<DatePicker
locale={"en"}
value={new Date()}
timeZoneOffsetInMinutes={undefined}
modalTransparent={false}
animationType={"fade"}
androidMode={"default"}
textStyle={{ color: 'black' }}
placeHolderTextStyle={{ color: 'black' }}
placeHolderText="wew"
disabled={false}
/>

Is the bug present in both iOS and Android

error message

ERROR Invariant Violation: A date or time should be specified as value.
This error is located at:
in RNDateTimePicker (at DatePicker.js:97)

The text was updated successfully, but these errors were encountered:

vtur · 2021-01-17T11:03:13Z

The same problem in clear project. As well not working even in NativeBaseKitchenSink on my android.

Gabsys · 2021-01-18T10:28:03Z

Same issue here. Workaround is to downgrade to v2.13.15 first before this issue is resolved.

minkbear · 2021-01-20T07:02:57Z

Same problem.

darlanhms · 2021-01-30T23:57:14Z

this is not working cause when they changed the deprecated components DatePickerAndroid and DatePickerIOS they didn't verified the different fields that have in the community solution

artus · 2021-01-31T17:22:12Z

Will this thread be updated when a fix has been implemented?

1995mars · 2021-02-03T09:43:16Z

I have yet to see the issue resolved

409Error · 2021-03-02T07:44:28Z

When will you fix it?

409Error · 2021-03-03T10:44:30Z

Does anyone know how to get around this error? Thx

timothydillan · 2021-03-05T09:41:49Z

Hey guys! A beginner to React Native stuff here! I found a fix and have uploaded a fixed version of the package on the npm platform if you need to fix this issue on your apps quickly.

All you need to do is:

npm install my-react-native-base --save
Replace native-base with my-react-native-base on your imports
cd ios && npx pod install (only if your app is targeted for iOS too).
Done!

The problem is most likely related to the date time picker being used in the package does not set any date value for the value attribute, it instead sets the default date value for the date attribute which is already deprecated.

This small fix fixes [this](GeekyAnts#3381) issue. The problem is that the default date set was only for the `date` attribute which is deprecated. The fix is to add the default date for the `value` attribute too.

netevolution · 2021-03-09T14:17:56Z

Hey guys! A beginner to React Native stuff here! I found a fix and have uploaded a fixed version of the package on the npm platform if you need to fix this issue on your apps quickly.

All you need to do is:

npm install my-react-native-base --save

Replace native-base with my-react-native-base on your imports

cd ios && npx pod install (only if your app is targeted for iOS too).

Done!

The problem is most likely related to the date time picker being used in the package does not set any date value for the value attribute, it instead sets the default date value for the date attribute which is already deprecated.

Hi,
the error no longer appears but I don't know how to open the datepicker. The original showDatePicker method is missing.

How do I display the datepicker?

I'm currently interested in Android.

timothydillan · 2021-03-11T11:23:40Z

Hey guys! A beginner to React Native stuff here! I found a fix and have uploaded a fixed version of the package on the npm platform if you need to fix this issue on your apps quickly.
All you need to do is:

npm install my-react-native-base --save

Replace native-base with my-react-native-base on your imports

cd ios && npx pod install (only if your app is targeted for iOS too).

Done!

The problem is most likely related to the date time picker being used in the package does not set any date value for the value attribute, it instead sets the default date value for the date attribute which is already deprecated.

Hi,
the error no longer appears but I don't know how to open the datepicker. The original showDatePicker method is missing.

How do I display the datepicker?

I'm currently interested in Android.

Hm.. not sure about that. I'm implementing the date picker as per the documentation, and the datepicker shows just fine. However, I only tested the datepicker on iOS. Could you perhaps give a picture/video of your issue?

truongthuc · 2021-03-31T12:10:13Z

Hey guys, finaly i resolved this by check document in @react-native-community/datetimepicker repo.

Replace onDateChange prop to onChange
onChange will recive two args (event, newDate)

this is my edit and allready check in IOS, not yet in Android

import { Text, DatePicker } from 'native-base';
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
const InputDateTime = () => {
  const [datevalue, setDate] = useState(new Date());
  const _onDateChange = (e, newDate) => {
    setDate(newDate);
  };

  return (
    <View>
      <DatePicker
        defaultDate={new Date(2021, 4, 4)}
        minimumDate={new Date(2021, 1, 1)}
        maximumDate={new Date(2021, 12, 31)}
        locale={'en'}
        timeZoneOffsetInMinutes={undefined}
        modalTransparent={false}
        animationType={'fade'}
        androidMode={'default'}
        placeHolderText="Select date"
        textStyle={{ color: 'green' }}
        placeHolderTextStyle={{ color: '#d3d3d3' }}
        disabled={false}

        onChange={_onDateChange}
        value={datevalue}
      />
      <Text>{datevalue.toString().substr(4, 12)}</Text>
    </View>
  );
};

export default InputDateTime;

I hope it will help you guys

aarthigovardhanan88 · 2021-04-08T06:46:07Z

Hey guys, finaly i resolved this by check document in @react-native-community/datetimepicker repo.

Replace onDateChange prop to onChange
onChange will recive two args (event, newDate)

this is my edit and allready check in IOS, not yet in Android

import { Text, DatePicker } from 'native-base';
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
const InputDateTime = () => {
  const [datevalue, setDate] = useState(new Date());
  const _onDateChange = (e, newDate) => {
    setDate(newDate);
  };

  return (
    <View>
      <DatePicker
        defaultDate={new Date(2021, 4, 4)}
        minimumDate={new Date(2021, 1, 1)}
        maximumDate={new Date(2021, 12, 31)}
        locale={'en'}
        timeZoneOffsetInMinutes={undefined}
        modalTransparent={false}
        animationType={'fade'}
        androidMode={'default'}
        placeHolderText="Select date"
        textStyle={{ color: 'green' }}
        placeHolderTextStyle={{ color: '#d3d3d3' }}
        disabled={false}

        onChange={_onDateChange}
        value={datevalue}
      />
      <Text>{datevalue.toString().substr(4, 12)}</Text>
    </View>
  );
};

export default InputDateTime;

I hope it will help you guys

I tried it and it open a blank screen. Any idea on what is wrong?

darlanhms · 2021-04-09T11:53:53Z

Hey guys, finaly i resolved this by check document in @react-native-community/datetimepicker repo.

Replace onDateChange prop to onChange
onChange will recive two args (event, newDate)

this is my edit and allready check in IOS, not yet in Android

import { Text, DatePicker } from 'native-base';
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
const InputDateTime = () => {
  const [datevalue, setDate] = useState(new Date());
  const _onDateChange = (e, newDate) => {
    setDate(newDate);
  };

  return (
    <View>
      <DatePicker
        defaultDate={new Date(2021, 4, 4)}
        minimumDate={new Date(2021, 1, 1)}
        maximumDate={new Date(2021, 12, 31)}
        locale={'en'}
        timeZoneOffsetInMinutes={undefined}
        modalTransparent={false}
        animationType={'fade'}
        androidMode={'default'}
        placeHolderText="Select date"
        textStyle={{ color: 'green' }}
        placeHolderTextStyle={{ color: '#d3d3d3' }}
        disabled={false}

        onChange={_onDateChange}
        value={datevalue}
      />
      <Text>{datevalue.toString().substr(4, 12)}</Text>
    </View>
  );
};

export default InputDateTime;

I hope it will help you guys

I tried it and it open a blank screen. Any idea on what is wrong?

Try npm i @react-native-community/datetimepicker and pod install again.

you'll probrably have build problems in android with this approach because the same component will be builded twice

AoNoOokami · 2021-04-22T07:32:02Z

I tried it and it open a blank screen. Any idea on what is wrong?

Hello, I'm having the same issue on Android with the message Possible Unhandled Promise Rejection (id:0): TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNTimePickerAndroid.open)

UPDATE: "Solved" by installing v2.13.15 of native-base. But some dependecies are deprecated anyway.

UPDATE: Actually, there may be some issues with autolinking on projects that started with a quite old version of react-native and upgraded to a version with autolinking (0.49 for the one I'm working on). You'll have to link manually @react-native-community/datetimepicker and update MainApplication.java and android/app/build.gradle accordingly. Hope it helps.

qasimgit · 2021-04-30T07:13:45Z

Solved 🚀 🚀

Just Reversed back to the old Version from latest to V: 2.13.8 and now it's all working Fine.

melissatully · 2021-05-05T13:04:25Z

Does anyone know how to have it show date and time rather than just date?

aligenc · 2021-05-24T13:30:29Z

I have solved this bug by adding value field to DatePicker component.

<DatePicker
            value={new Date(2018, 12, 31)}
            defaultDate={new Date(2018, 4, 4)}
            minimumDate={new Date(2018, 1, 1)}
            maximumDate={new Date(2018, 12, 31)}
            locale={"en"}
            timeZoneOffsetInMinutes={undefined}
            modalTransparent={false}
            animationType={"fade"}
            androidMode={"default"}
            placeHolderText="Select date"
            textStyle={{ color: "green" }}
            placeHolderTextStyle={{ color: "#d3d3d3" }}
            onDateChange={this.setDate}
            disabled={false}
            />

SimonErm · 2021-10-04T09:49:08Z

I could make it work by explicit installing @react-native-community/datetimepicker since the autolinking of native-base doesn't seem to work correctly and with following patch(also includes keyboard listener fix ):

diff --git a/node_modules/native-base/dist/src/basic/DatePicker.js b/node_modules/native-base/dist/src/basic/DatePicker.js
index 2165d09..a7db6f9 100644
--- a/node_modules/native-base/dist/src/basic/DatePicker.js
+++ b/node_modules/native-base/dist/src/basic/DatePicker.js
@@ -1,2 +1,2 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.DatePicker=undefined;var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/basic/DatePicker.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _datetimepicker=require('@react-native-community/datetimepicker');var _datetimepicker2=_interopRequireDefault(_datetimepicker);var _platform=require('../theme/variables/platform');var _platform2=_interopRequireDefault(_platform);var _Text=require('./Text');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var DatePicker=exports.DatePicker=function(_React$Component){_inherits(DatePicker,_React$Component);function DatePicker(props){_classCallCheck(this,DatePicker);var _this=_possibleConstructorReturn(this,(DatePicker.__proto__||Object.getPrototypeOf(DatePicker)).call(this,props));_this.showDatePicker=function(){_this.setState({modalVisible:true});};_this.state={modalVisible:false,defaultDate:props.defaultDate?props.defaultDate:new Date(),chosenDate:!props.placeHolderText&&props.defaultDate?props.defaultDate:undefined};return _this;}_createClass(DatePicker,[{key:'setDate',value:function setDate(date){this.setState({chosenDate:new Date(date)});if(this.props.onDateChange){this.props.onDateChange(date);}}},{key:'formatChosenDate',value:function formatChosenDate(date){if(this.props.formatChosenDate){return this.props.formatChosenDate(date);}return[date.getDate(),date.getMonth()+1,date.getFullYear()].join('/');}},{key:'render',value:function render(){var _this2=this;var _props=this.props,animationType=_props.animationType,disabled=_props.disabled,locale=_props.locale,maximumDate=_props.maximumDate,minimumDate=_props.minimumDate,modalTransparent=_props.modalTransparent,placeHolderText=_props.placeHolderText,placeHolderTextStyle=_props.placeHolderTextStyle,textStyle=_props.textStyle,timeZoneOffsetInMinutes=_props.timeZoneOffsetInMinutes;var variables=this.context.theme?this.context.theme['@@shoutem.theme/themeStyle'].variables:_platform2.default;return _react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:63}},_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:64}},_react2.default.createElement(_Text.Text,{onPress:function onPress(){return!disabled?_this2.showDatePicker():undefined;},style:[{padding:variables.datePickerPadding,color:variables.datePickerTextColor},this.state.chosenDate?textStyle:placeHolderTextStyle],__source:{fileName:_jsxFileName,lineNumber:65}},this.state.chosenDate?this.formatChosenDate(this.state.chosenDate):placeHolderText||'Select Date'),_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:79}},_react2.default.createElement(_reactNative.Modal,{supportedOrientations:['portrait','landscape'],animationType:animationType,transparent:modalTransparent,visible:this.state.modalVisible,onRequestClose:function onRequestClose(){},__source:{fileName:_jsxFileName,lineNumber:80}},_react2.default.createElement(_Text.Text,{onPress:function onPress(){return _this2.setState({modalVisible:false});},style:{backgroundColor:variables.datePickerBg,flex:variables.datePickerFlex},__source:{fileName:_jsxFileName,lineNumber:87}}),_react2.default.createElement(_datetimepicker2.default,_extends({date:this.state.chosenDate?this.state.chosenDate:this.state.defaultDate,onDateChange:function onDateChange(date){return _this2.setDate(date);},minimumDate:minimumDate,maximumDate:maximumDate,mode:'date',locale:locale,timeZoneOffsetInMinutes:timeZoneOffsetInMinutes},this.props,{__source:{fileName:_jsxFileName,lineNumber:94}}))))));}}]);return DatePicker;}(_react2.default.Component);DatePicker.defaultProps={disabled:false};
+Object.defineProperty(exports,"__esModule",{value:true});exports.DatePicker=undefined;var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/basic/DatePicker.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _datetimepicker=require('@react-native-community/datetimepicker');var _datetimepicker2=_interopRequireDefault(_datetimepicker);var _platform=require('../theme/variables/platform');var _platform2=_interopRequireDefault(_platform);var _Text=require('./Text');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var DatePicker=exports.DatePicker=function(_React$Component){_inherits(DatePicker,_React$Component);function DatePicker(props){_classCallCheck(this,DatePicker);var _this=_possibleConstructorReturn(this,(DatePicker.__proto__||Object.getPrototypeOf(DatePicker)).call(this,props));_this.showDatePicker=function(){_this.setState({modalVisible:true});};_this.state={modalVisible:false,defaultDate:props.defaultDate?props.defaultDate:new Date(),chosenDate:!props.placeHolderText&&props.defaultDate?props.defaultDate:undefined};return _this;}_createClass(DatePicker,[{key:'setDate',value:function setDate(date){  if(date.type=='set'){ this.setState({ chosenDate: new Date(date.nativeEvent.timestamp),modalVisible:false });if (this.props.onDateChange) {this.props.onDateChange(new Date(date.nativeEvent.timestamp));}}else{this.setState({ modalVisible:false });}}},{key:'formatChosenDate',value:function formatChosenDate(date){if(this.props.formatChosenDate){return this.props.formatChosenDate(date);}return[date.getDate(),date.getMonth()+1,date.getFullYear()].join('/');}},{key:'render',value:function render(){var _this2=this;var _props=this.props,animationType=_props.animationType,disabled=_props.disabled,locale=_props.locale,maximumDate=_props.maximumDate,minimumDate=_props.minimumDate,modalTransparent=_props.modalTransparent,placeHolderText=_props.placeHolderText,placeHolderTextStyle=_props.placeHolderTextStyle,textStyle=_props.textStyle,timeZoneOffsetInMinutes=_props.timeZoneOffsetInMinutes;var variables=this.context.theme?this.context.theme['@@shoutem.theme/themeStyle'].variables:_platform2.default;return _react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:63}},_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:64}},_react2.default.createElement(_Text.Text,{onPress:function onPress(){return!disabled?_this2.showDatePicker():undefined;},style:[{padding:variables.datePickerPadding,color:variables.datePickerTextColor},this.state.chosenDate?textStyle:placeHolderTextStyle],__source:{fileName:_jsxFileName,lineNumber:65}},this.state.chosenDate?this.formatChosenDate(this.state.chosenDate):placeHolderText||'Select Date'),_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:79}},_react2.default.createElement(_reactNative.Modal,{supportedOrientations:['portrait','landscape'],animationType:animationType,transparent:modalTransparent,visible:this.state.modalVisible,onRequestClose:function onRequestClose(){},__source:{fileName:_jsxFileName,lineNumber:80}},_react2.default.createElement(_Text.Text,{onPress:function onPress(){return _this2.setState({modalVisible:false});},style:{backgroundColor:variables.datePickerBg,flex:variables.datePickerFlex},__source:{fileName:_jsxFileName,lineNumber:87}}),_react2.default.createElement(_datetimepicker2.default,_extends({value:this.state.chosenDate?this.state.chosenDate:this.state.defaultDate,onChange:function onDateChange(date){return _this2.setDate(date);},minimumDate:minimumDate,maximumDate:maximumDate,mode:'date',locale:locale,timeZoneOffsetInMinutes:timeZoneOffsetInMinutes},this.props,{__source:{fileName:_jsxFileName,lineNumber:94}}))))));}}]);return DatePicker;}(_react2.default.Component);DatePicker.defaultProps={disabled:false};
 //# sourceMappingURL=DatePicker.js.map
\ No newline at end of file
diff --git a/node_modules/native-base/dist/src/basic/ToastContainer.js b/node_modules/native-base/dist/src/basic/ToastContainer.js
index 832b3e8..9645ea7 100644
--- a/node_modules/native-base/dist/src/basic/ToastContainer.js
+++ b/node_modules/native-base/dist/src/basic/ToastContainer.js
@@ -1,2 +1,2 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.ToastContainer=undefined;var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/basic/ToastContainer.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _nativeBaseShoutemTheme=require('native-base-shoutem-theme');var _mapPropsToStyleNames=require('../utils/mapPropsToStyleNames');var _mapPropsToStyleNames2=_interopRequireDefault(_mapPropsToStyleNames);var _commonColor=require('../theme/variables/commonColor');var _Text=require('./Text');var _Button=require('./Button');var _Toast=require('./Toast');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var POSITION={ABSOLUTE:'absolute',BOTTOM:'bottom',TOP:'top'};var ToastContainer=function(_Component){_inherits(ToastContainer,_Component);_createClass(ToastContainer,null,[{key:'show',value:function show(_ref){var config=_objectWithoutProperties(_ref,[]);this.toastInstance._root.showToast({config:config});}},{key:'hide',value:function hide(){if(this.toastInstance._root.getModalState()){this.toastInstance._root.closeToast('functionCall');}}}]);function ToastContainer(props){_classCallCheck(this,ToastContainer);var _this=_possibleConstructorReturn(this,(ToastContainer.__proto__||Object.getPrototypeOf(ToastContainer)).call(this,props));_this.closeModal=function(reason){_this.setState({modalVisible:false});var onClose=_this.state.onClose;if(onClose&&typeof onClose==='function'){onClose(reason);}};_this.state={fadeAnim:new _reactNative.Animated.Value(0),pan:new _reactNative.Animated.ValueXY({x:0,y:0}),keyboardHeight:0,isKeyboardVisible:false,modalVisible:false};_this.keyboardDidHide=_this.keyboardDidHide.bind(_this);_this.keyboardDidShow=_this.keyboardDidShow.bind(_this);_this._panResponder=_reactNative.PanResponder.create({onMoveShouldSetPanResponderCapture:function onMoveShouldSetPanResponderCapture(){return true;},onPanResponderRelease:function onPanResponderRelease(evt,_ref2){var dx=_ref2.dx;if(dx!==0){_reactNative.Animated.timing(_this.state.pan,{toValue:{x:dx,y:0},duration:100,useNativeDriver:false}).start(function(){return _this.closeToast('swipe');});}}});return _this;}_createClass(ToastContainer,[{key:'componentDidMount',value:function componentDidMount(){_reactNative.Keyboard.addListener('keyboardDidShow',this.keyboardDidShow);_reactNative.Keyboard.addListener('keyboardDidHide',this.keyboardDidHide);}},{key:'componentWillUnmount',value:function componentWillUnmount(){_reactNative.Keyboard.removeListener('keyboardDidShow',this.keyboardDidShow);_reactNative.Keyboard.removeListener('keyboardDidHide',this.keyboardDidHide);}},{key:'getToastStyle',value:function getToastStyle(){return{position:POSITION.ABSOLUTE,opacity:this.state.fadeAnim,width:'100%',elevation:9,paddingHorizontal:_reactNative.Platform.OS===_commonColor.PLATFORM.IOS?20:0,top:this.state.position===POSITION.TOP?30:undefined,bottom:this.state.position===POSITION.BOTTOM?this.getTop():undefined};}},{key:'getTop',value:function getTop(){if(_reactNative.Platform.OS===_commonColor.PLATFORM.IOS){if(this.state.isKeyboardVisible){return this.state.keyboardHeight;}return 30;}return 0;}},{key:'getButtonText',value:function getButtonText(buttonText){if(buttonText){if(buttonText.trim().length===0){return undefined;}return buttonText;}return undefined;}},{key:'getModalState',value:function getModalState(){return this.state.modalVisible;}},{key:'keyboardDidHide',value:function keyboardDidHide(){this.setState({keyboardHeight:0,isKeyboardVisible:false});}},{key:'keyboardDidShow',value:function keyboardDidShow(e){this.setState({keyboardHeight:e.endCoordinates.height,isKeyboardVisible:true});}},{key:'showToast',value:function showToast(_ref3){var config=_ref3.config;this.setState({modalVisible:true,text:config.text,buttonText:this.getButtonText(config.buttonText),type:config.type,position:config.position?config.position:POSITION.BOTTOM,supportedOrientations:config.supportedOrientations,style:config.style,buttonTextStyle:config.buttonTextStyle,buttonStyle:config.buttonStyle,textStyle:config.textStyle,onClose:config.onClose,swipeDisabled:config.swipeDisabled||false});if(this.closeTimeout){clearTimeout(this.closeTimeout);}if(config.duration!==0){var duration=config.duration>0?config.duration:1500;this.closeTimeout=setTimeout(this.closeToast.bind(this,'timeout'),duration);}_reactNative.Animated.timing(this.state.fadeAnim,{toValue:1,duration:200,useNativeDriver:false}).start();}},{key:'closeToast',value:function closeToast(reason){var _this2=this;clearTimeout(this.closeTimeout);_reactNative.Animated.timing(this.state.fadeAnim,{toValue:0,duration:200,useNativeDriver:false}).start(function(){_this2.closeModal(reason);_this2.state.pan.setValue({x:0,y:0});});}},{key:'render',value:function render(){var _this3=this;if(this.state.modalVisible){var _state$pan=this.state.pan,x=_state$pan.x,y=_state$pan.y;return _react2.default.createElement(_reactNative.Animated.View,_extends({},this.state.swipeDisabled?{}:this._panResponder.panHandlers,{style:[this.getToastStyle(),{transform:[{translateX:x},{translateY:y}]}],__source:{fileName:_jsxFileName,lineNumber:182}}),_react2.default.createElement(_Toast.Toast,{style:[this.state.style],danger:this.state.type==='danger',success:this.state.type==='success',warning:this.state.type==='warning',__source:{fileName:_jsxFileName,lineNumber:189}},_react2.default.createElement(_Text.Text,{style:this.state.textStyle,__source:{fileName:_jsxFileName,lineNumber:195}},this.state.text),this.state.buttonText&&_react2.default.createElement(_Button.Button,{style:this.state.buttonStyle,onPress:function onPress(){return _this3.closeToast('user');},__source:{fileName:_jsxFileName,lineNumber:197}},_react2.default.createElement(_Text.Text,{style:this.state.buttonTextStyle,__source:{fileName:_jsxFileName,lineNumber:201}},this.state.buttonText))));}return null;}}]);return ToastContainer;}(_react.Component);ToastContainer.propTypes=_extends({},_reactNative.ViewPropTypes);var StyledToastContainer=(0,_nativeBaseShoutemTheme.connectStyle)('NativeBase.ToastContainer',{},_mapPropsToStyleNames2.default)(ToastContainer);exports.ToastContainer=StyledToastContainer;
+Object.defineProperty(exports,"__esModule",{value:true});exports.ToastContainer=undefined;var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/basic/ToastContainer.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _nativeBaseShoutemTheme=require('native-base-shoutem-theme');var _mapPropsToStyleNames=require('../utils/mapPropsToStyleNames');var _mapPropsToStyleNames2=_interopRequireDefault(_mapPropsToStyleNames);var _commonColor=require('../theme/variables/commonColor');var _Text=require('./Text');var _Button=require('./Button');var _Toast=require('./Toast');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var POSITION={ABSOLUTE:'absolute',BOTTOM:'bottom',TOP:'top'};var ToastContainer=function(_Component){_inherits(ToastContainer,_Component);_createClass(ToastContainer,null,[{key:'show',value:function show(_ref){var config=_objectWithoutProperties(_ref,[]);this.toastInstance._root.showToast({config:config});}},{key:'hide',value:function hide(){if(this.toastInstance._root.getModalState()){this.toastInstance._root.closeToast('functionCall');}}}]);function ToastContainer(props){_classCallCheck(this,ToastContainer);var _this=_possibleConstructorReturn(this,(ToastContainer.__proto__||Object.getPrototypeOf(ToastContainer)).call(this,props));_this.closeModal=function(reason){_this.setState({modalVisible:false});var onClose=_this.state.onClose;if(onClose&&typeof onClose==='function'){onClose(reason);}};_this.state={fadeAnim:new _reactNative.Animated.Value(0),pan:new _reactNative.Animated.ValueXY({x:0,y:0}),keyboardHeight:0,isKeyboardVisible:false,modalVisible:false};_this.keyboardDidHide=_this.keyboardDidHide.bind(_this);_this.keyboardDidShow=_this.keyboardDidShow.bind(_this);_this._panResponder=_reactNative.PanResponder.create({onMoveShouldSetPanResponderCapture:function onMoveShouldSetPanResponderCapture(){return true;},onPanResponderRelease:function onPanResponderRelease(evt,_ref2){var dx=_ref2.dx;if(dx!==0){_reactNative.Animated.timing(_this.state.pan,{toValue:{x:dx,y:0},duration:100,useNativeDriver:false}).start(function(){return _this.closeToast('swipe');});}}});return _this;}_createClass(ToastContainer,[{key:'componentDidMount',value:function componentDidMount(){this.kbDidShow = _reactNative.Keyboard.addListener('keyboardDidShow',this.keyboardDidShow);this.kbDidHide = _reactNative.Keyboard.addListener('keyboardDidHide',this.keyboardDidHide);}},{key:'componentWillUnmount',value:function componentWillUnmount(){this.kbDidShow?.remove();this.kbDidHide?.remove();}},{key:'getToastStyle',value:function getToastStyle(){return{position:POSITION.ABSOLUTE,opacity:this.state.fadeAnim,width:'100%',elevation:9,paddingHorizontal:_reactNative.Platform.OS===_commonColor.PLATFORM.IOS?20:0,top:this.state.position===POSITION.TOP?30:undefined,bottom:this.state.position===POSITION.BOTTOM?this.getTop():undefined};}},{key:'getTop',value:function getTop(){if(_reactNative.Platform.OS===_commonColor.PLATFORM.IOS){if(this.state.isKeyboardVisible){return this.state.keyboardHeight;}return 30;}return 0;}},{key:'getButtonText',value:function getButtonText(buttonText){if(buttonText){if(buttonText.trim().length===0){return undefined;}return buttonText;}return undefined;}},{key:'getModalState',value:function getModalState(){return this.state.modalVisible;}},{key:'keyboardDidHide',value:function keyboardDidHide(){this.setState({keyboardHeight:0,isKeyboardVisible:false});}},{key:'keyboardDidShow',value:function keyboardDidShow(e){this.setState({keyboardHeight:e.endCoordinates.height,isKeyboardVisible:true});}},{key:'showToast',value:function showToast(_ref3){var config=_ref3.config;this.setState({modalVisible:true,text:config.text,buttonText:this.getButtonText(config.buttonText),type:config.type,position:config.position?config.position:POSITION.BOTTOM,supportedOrientations:config.supportedOrientations,style:config.style,buttonTextStyle:config.buttonTextStyle,buttonStyle:config.buttonStyle,textStyle:config.textStyle,onClose:config.onClose,swipeDisabled:config.swipeDisabled||false});if(this.closeTimeout){clearTimeout(this.closeTimeout);}if(config.duration!==0){var duration=config.duration>0?config.duration:1500;this.closeTimeout=setTimeout(this.closeToast.bind(this,'timeout'),duration);}_reactNative.Animated.timing(this.state.fadeAnim,{toValue:1,duration:200,useNativeDriver:false}).start();}},{key:'closeToast',value:function closeToast(reason){var _this2=this;clearTimeout(this.closeTimeout);_reactNative.Animated.timing(this.state.fadeAnim,{toValue:0,duration:200,useNativeDriver:false}).start(function(){_this2.closeModal(reason);_this2.state.pan.setValue({x:0,y:0});});}},{key:'render',value:function render(){var _this3=this;if(this.state.modalVisible){var _state$pan=this.state.pan,x=_state$pan.x,y=_state$pan.y;return _react2.default.createElement(_reactNative.Animated.View,_extends({},this.state.swipeDisabled?{}:this._panResponder.panHandlers,{style:[this.getToastStyle(),{transform:[{translateX:x},{translateY:y}]}],__source:{fileName:_jsxFileName,lineNumber:182}}),_react2.default.createElement(_Toast.Toast,{style:[this.state.style],danger:this.state.type==='danger',success:this.state.type==='success',warning:this.state.type==='warning',__source:{fileName:_jsxFileName,lineNumber:189}},_react2.default.createElement(_Text.Text,{style:this.state.textStyle,__source:{fileName:_jsxFileName,lineNumber:195}},this.state.text),this.state.buttonText&&_react2.default.createElement(_Button.Button,{style:this.state.buttonStyle,onPress:function onPress(){return _this3.closeToast('user');},__source:{fileName:_jsxFileName,lineNumber:197}},_react2.default.createElement(_Text.Text,{style:this.state.buttonTextStyle,__source:{fileName:_jsxFileName,lineNumber:201}},this.state.buttonText))));}return null;}}]);return ToastContainer;}(_react.Component);ToastContainer.propTypes=_extends({},_reactNative.ViewPropTypes);var StyledToastContainer=(0,_nativeBaseShoutemTheme.connectStyle)('NativeBase.ToastContainer',{},_mapPropsToStyleNames2.default)(ToastContainer);exports.ToastContainer=StyledToastContainer;
 //# sourceMappingURL=ToastContainer.js.map
\ No newline at end of file
diff --git a/node_modules/native-base/src/basic/DatePicker.js b/node_modules/native-base/src/basic/DatePicker.js
index fcc68e4..83bcb31 100644
--- a/node_modules/native-base/src/basic/DatePicker.js
+++ b/node_modules/native-base/src/basic/DatePicker.js
@@ -24,9 +24,13 @@ export class DatePicker extends React.Component {
   }
 
   setDate(date) {
-    this.setState({ chosenDate: new Date(date) });
-    if (this.props.onDateChange) {
-      this.props.onDateChange(date);
+    if(date.type=='set'){ 
+      this.setState({ chosenDate: new Date(date.nativeEvent.timestamp),modalVisible:false });
+      if (this.props.onDateChange) {
+        this.props.onDateChange(new Date(date.nativeEvent.timestamp));
+      }
+    }else{
+      this.setState({ modalVisible:false });
     }
   }
 
@@ -92,12 +96,12 @@ export class DatePicker extends React.Component {
                 }}
               />
               <DateTimePicker
-                date={
+                value={
                   this.state.chosenDate
                     ? this.state.chosenDate
                     : this.state.defaultDate
                 }
-                onDateChange={date => this.setDate(date)}
+                onChange={date => this.setDate(date)}
                 minimumDate={minimumDate}
                 maximumDate={maximumDate}
                 mode="date"
diff --git a/node_modules/native-base/src/basic/ToastContainer.js b/node_modules/native-base/src/basic/ToastContainer.js
index 4bd57ac..88f1c49 100644
--- a/node_modules/native-base/src/basic/ToastContainer.js
+++ b/node_modules/native-base/src/basic/ToastContainer.js
@@ -59,13 +59,13 @@ class ToastContainer extends Component {
   }
 
   componentDidMount() {
-    Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
-    Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
+    this.kbDidShow = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
+    this.kbDidHide = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
   }
 
   componentWillUnmount() {
-    Keyboard.removeListener('keyboardDidShow', this.keyboardDidShow);
-    Keyboard.removeListener('keyboardDidHide', this.keyboardDidHide);
+    this.kbDidShow?.remove();
+    this.kbDidHide?.remove();
   }
 
   getToastStyle() {

alphazhe · 2021-12-16T11:49:22Z

NativeBase 3.2.2 docs date picker is mentioned as coming soon. Any timeline for this, when this will be released?

stale · 2022-02-15T03:59:06Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

ckswopnera · 2022-03-30T08:22:15Z

### For class component datetimepicker

class Productdetails extends Component {
constructor(props) {
super();
this.state = {
rentStartDate: new Date(),
startDate: "",
endDate: "",
mode: false,}
this.onChangeStart = this.onChangeStart.bind(this);
}
onChangeStart(event, selectedDate) {
let currentDate = selectedDate || this.state.rentStartDate;
this.setState({ show: Platform.OS === "ios", rentStartDate: currentDate });
let mydate = JSON.stringify(currentDate)
.split("T")[0]
.trim()
.replace('"', "");

    this.setState({ startDate: mydate });
  }
 showMode(currentMode) {
    this.setState({
      show: true,
      mode: currentMode,
    });
  }

return(<View style={{ flex: 1}}>
              <Text style={{ textAlign: "center" }}>Start Date</Text>
              <View
                style={{
                  flex: 1,
                  flexDirection: "row",
                  justifyContent: "space-between",
                  alignItems: "center",
                  marginBottom: 5,
                  height: 40,
                  borderRadius: 2,
                  color: "black",
                  borderColor: "rgba(38, 38, 38,0.8)",
                  borderWidth: 1,
                  backgroundColor: "white",
                  paddingEnd: 5,
                }}
              >
                <Text
                  style={{
                    fontSize: 14,
                    paddingLeft: 5,
                    backgroundColor: "white",
                    color: "black",
                  }}
                >
                  {this.state.startDate}
                </Text>
                <TouchableHighlight onPress={() => this.showMode("date")}>
                  <Image
                    source={require("../images/calender.png")}
                    style={{ height: 24, width: 24 }}
                  />
                </TouchableHighlight>
                <Overlay
                  isVisible={this.state.show}
                  onBackdropPress={() => {
                    this.setState({ show: false });
                  }}
                >
                  <DateTimePicker
                    testID="dateTimePicker"
                    value={this.state.rentStartDate}
                    mode={this.state.mode} //The enum of date, datetime and time
                    placeholder="select date"
                    format="DD-MM-YYYY"
                    confirmBtnText="Confirm"
                    cancelBtnText="Cancel"
                    timeZoneOffsetInMinutes={undefined}
                    modalTransparent={false}
                    animationType={"fade"}
                    display="default"
                    onChange={this.onChangeStart}
                    style={{ width: 320, backgroundColor: "white" }}
                  />
                </Overlay>
              </View>
              <View></View>
            </View>)

export default React.memo(Productdetails);

tosebikan · 2022-05-25T11:40:45Z

This happens when you cancel the picker instead of selecting a new date, it sets the date's value to an undefined value, the solution is the check the event of the onChange function and set it to the previous date state if dismissed eg.

const [date, setDate] = useState(new Date())

const onChange = (event, selectedDate) => {
        setShowDate(false);

        // on cancel set date value to previous date
        if (event?.type === 'dismissed') {
            setDate(date);
            return;
        }
        setDate(selectedDate);
    };

    {showDate && (
                <DateTimePicker
                    value={date}
                    mode="date"
                    onChange={onChange}
                />
            )}

purplegamba mentioned this issue Feb 8, 2021

DatePicker issue : Component Exception #3438

Closed

timothydillan mentioned this issue Mar 5, 2021

Set default date for value attribute #3514

Closed

stale bot added the stale label Feb 15, 2022

stale bot removed the stale label Mar 30, 2022

Viraj-10 added feature request v3 V3 labels Jun 2, 2022

Viraj-10 changed the title ~~DatePicker not working !!~~ DatePicker Jul 18, 2022

GeekyAnts locked and limited conversation to collaborators Jul 18, 2022

Viraj-10 converted this issue into discussion #5193 Jul 18, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

This issue was moved to a discussion.

DatePicker #3381

DatePicker #3381

1995mars commented Jan 16, 2021 •

edited

vtur commented Jan 17, 2021 •

edited

Gabsys commented Jan 18, 2021

minkbear commented Jan 20, 2021

darlanhms commented Jan 30, 2021 •

edited

artus commented Jan 31, 2021

1995mars commented Feb 3, 2021

409Error commented Mar 2, 2021

409Error commented Mar 3, 2021

timothydillan commented Mar 5, 2021 •

edited

netevolution commented Mar 9, 2021

timothydillan commented Mar 11, 2021

truongthuc commented Mar 31, 2021

aarthigovardhanan88 commented Apr 8, 2021 •

edited

darlanhms commented Apr 9, 2021

AoNoOokami commented Apr 22, 2021 •

edited

qasimgit commented Apr 30, 2021 •

edited

melissatully commented May 5, 2021

aligenc commented May 24, 2021

SimonErm commented Oct 4, 2021

alphazhe commented Dec 16, 2021

stale bot commented Feb 15, 2022

ckswopnera commented Mar 30, 2022

tosebikan commented May 25, 2022 •

edited

This issue was moved to a discussion.

This issue was moved to a discussion.

DatePicker #3381

DatePicker #3381

Comments

1995mars commented Jan 16, 2021 • edited

I have gone through these following points

Issue Description

Steps to reproduce

Is the bug present in both iOS and Android

vtur commented Jan 17, 2021 • edited

Gabsys commented Jan 18, 2021

minkbear commented Jan 20, 2021

darlanhms commented Jan 30, 2021 • edited

artus commented Jan 31, 2021

1995mars commented Feb 3, 2021

409Error commented Mar 2, 2021

409Error commented Mar 3, 2021

timothydillan commented Mar 5, 2021 • edited

netevolution commented Mar 9, 2021

timothydillan commented Mar 11, 2021

truongthuc commented Mar 31, 2021

aarthigovardhanan88 commented Apr 8, 2021 • edited

darlanhms commented Apr 9, 2021

AoNoOokami commented Apr 22, 2021 • edited

qasimgit commented Apr 30, 2021 • edited

melissatully commented May 5, 2021

aligenc commented May 24, 2021

SimonErm commented Oct 4, 2021

alphazhe commented Dec 16, 2021

stale bot commented Feb 15, 2022

ckswopnera commented Mar 30, 2022

tosebikan commented May 25, 2022 • edited

This issue was moved to a discussion.

1995mars commented Jan 16, 2021 •

edited

vtur commented Jan 17, 2021 •

edited

darlanhms commented Jan 30, 2021 •

edited

timothydillan commented Mar 5, 2021 •

edited

aarthigovardhanan88 commented Apr 8, 2021 •

edited

AoNoOokami commented Apr 22, 2021 •

edited

qasimgit commented Apr 30, 2021 •

edited

tosebikan commented May 25, 2022 •

edited