xgfe / react-native-datepicker Goto Github PK

react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS

License: MIT License

JavaScript 80.31% Python 4.51% Java 3.68% Objective-C 11.51%

react-native-datepicker's People

Contributors

Stargazers

Watchers

Forkers

mrpohoda yangjiayu ttpro1995 mat2maa darvelo mttylzq atlanteh andrew-cobley kfiroo innerpeace080 ashwini-c addjam tuanhm93 krizka dennismg cbcye pgmemk pranayjunecs getreup mazhedroid joshvar88 werapat00 kitolog gertlerdavidov balontomasz itinance abinli brunolemos s2t2 isimar jdoyle65 yazhengwang haibinyu cherylsunflowers sebschaeffler fr1n63 shan-ge leonyuang3nt vlctorlous zwjjap aytechnologies chelseazhai wanderlift eujern irvingdp reactandnative downmoney alanpn react-native-library jcrader samhains arabellatech kathawthorne matanelgabsi rajanpn yeknava hjumeau olofmoriya rahulrajeevan pastinepolenta augisticz ywen xijieguyuan faceach doormates ddeanto backnotprop mountainfirefly mattyk14 cqululei demotascha twinski tyokusuma inferno1005 cosmos-sajal jemise111 jardenlau ypan887 drhops enqinhlc stephanemaillard brunocascio makserge calvin92 luismoriguerra holleword chrise86 dejan9393 amirtahani avencat sguo2017 untouchable741 tientnvn cnbin tengwei30 geekrishabh tavenzhang constructivecoding jrzimmerman cogmeta

react-native-datepicker's Issues

Can't make datepicker full width of its parent container

so i have been trying to make datepicker take the full width of its parent but failing so far. tried flex: 1 and alignSelf: stretch but no luck so far. anyone knows if it is possible to do this ?

It works well on IOS portrait but crash on landscape

Terminating app due to uncaught exception 'UIApplicationInvalidInterfaceOrientation', reason: 'Supported orientations has no common orientation with the application, and [RCTModalHostViewController shouldAutorotate] is returning YES'

placeholder is broken

if date is not specified the current date is placed by default instead of the placeholder, so placeholder is useless. We actually need it.

Mode: time, minDate, mxDate not working?

how to change the ugly backgroundcolor of timepickerandroid component？

i also asked it in stackoverflow
http://stackoverflow.com/questions/39656310/how-to-edit-the-background-of-timepickerandroid-in-react-native

here is the picture

how to change this green backgroundcolor?

i is not work,and do not show any wrong message

when i click it ,it does not show anything

Gifs in Readme seem to be broken

Any chance to upload new ones?
Thanks

iOS "Invalid Date"

I came across the following issue for react-native-datepicker.

This is how I am using datepicker component:

<DatePicker
  mode='date'
  placeholder='DD-MM-YYYY'
  format='DD-MM-YYYY'
  date={this.state.dob}
  maxDate={moment()}
  showIcon={false}
  confirmBtnText='Confirm'
  cancelBtnText='Cancel'
  onDateChange={(dob) => { this.setState({dob}) }}
/>

Initially this.state.dob is an empty string "" so that placeholder is displayed to the user.

So when I click on datepicker component I have this:

I was expecting it to default to the current date/time instead of beginning of time.

And if I click on Confirm without selecting any date I get an error "Invalid date".

On Android I do not remember seeing this behaviour.

This is how I am currently solving the problem, but not sure if this is the best solution:

getDate(date = this.props.date) {
  if (date instanceof Date) {
    return date;
  } else {
    return date ? Moment(date, this.format).toDate() : Moment().toDate();
  }
}

Any help is appreciated, thanks.

feature request

can you add daterangepicker support, thanks

How to split date and time seperately in datetime mode

有两个警告&弹出的datepicker如何把月份换成数字形式，还有事1980 08 09这样实现

Warning: Failed propType: Invalid prop `date` of type `Number` supplied to `RCTDatePicker`, expected instance of `Date`. Check the render method of `DatePickerIOS`.
Warning: Failed propType: Required prop `onDateChange` was not specified in `RCTDatePicker`. Check the render method of `DatePickerIOS`.

弹出的datepicker如何把月份换成数字形式，还有事1980 08 09这样实现

Choosing an interval of time with the date picker

Hello,
Thank you for the plugin.
I would like to be able to choose intervals of time of at least 15 minutes.

Any ideas on how to do that with the date picker ? Or any ideas to create such functionality ?

Thank you

Jeremie

How to disable?

I want to disable the component, but no attr can set to it? any one who have sulotion?

It doesn't work on iOS

After update to
"react": "^15.2.0",
"react-native": "^0.28.0"
it shows empty datepicker on iOS.

fix it in iOS

it'll be better if you add a style={{flex:1}} in line 224 in index.js

点击确定按钮没反应

点击确定按钮不触发onDateChange方法，只是在非常少的情况下才会触发，在iOS真机和模拟器上都这样

Ability to Customize Cancel & Confirm

Users may want to customize these buttons. I certainly do. Rather than accepting strings only, would be great if it also accepted React elements for these two. This way, you can pass in your own <Text></Text>, or <Icon />, or what have you.

Right now, validation fails if you pass in a <Text></Text>.

Customize date format

I need to customise date
26-Aug-16 format, How to customise it plz suggest

Custom Date font ?

Is there a prop to style the date text like fontsize ?

Android里运行直接弹框显示‘已停止运行’

调用的代码如下：

每次点击这个TouchableOpacity后，在android里就提示‘xxx已停止运行’。

下图是监听器监听到的崩溃信息：

[Request] Expose a method to open datepicker programmatically

It would be cool if we could do something like this:

<TouchableHighlight onPress={() => { this.refs.datepicker.focus(); }}>
  <Text>Open datepicker</Text>
</TouchableHighlight>

<DatePicker ref="datepicker" ... />

Thanks!

Element type is invalid

I have the following code.

class DateTester extends Component {

  render() {
    return (
      <DatePicker
        style={{width: 200}}
        date="2016-05-01"
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        minDate="2016-05-01"
        maxDate="2016-05-15"
        confirmBtnText="OK"
        cancelBtnText="Cancel"
        onDateChange={(date) => { let dob = date; }}
      />
    );
  }
}

I'm getting the following error
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of DateTester.

Any idea what's missing?

How to set the datepicker width to the full width of the parent view?

It looks like it works only with specific width value (e.g. 200)

Custom Calendar

Hi,

Great calendar picker!! But on iOS the Accept and Cancel option are on Chinese language.

Can you give the option for translate it or take the OS language.

And if you could add option to custom the calendar icon i will love you!

Thanks

change range of time showing

Is there anyway to show the time in range of 30 min?

i

option Icon

Hi,

I hope to hide calendar icon, and it could be done by using customStyle={{ dateIcon: { width: 0, height: 0} }}. But it would be great if there's property like 'showIcon' to hide .

onPressDate is not shown to be used at all. is it deprecated?

I would like to trigger the picker on a navbar click. I'm not sure I've seen an example on how to use the instance methods in your picker.

Programatically Open DatePicker

I have several situations where I want to open the DatePicker on mount, or open it via onPress of another component. Is there a way to programmatically call the opening of the DatePicker, perhaps through a ref?

Nothing changed + calendar showing

Hi,
I'm raising an issue, maybe from my bad understanding of the doc ; but first of all: thank you for your work!

(Android)
I was very please by your example because I want to be able to choose the day - month - year in order to fill a "date of birth". And I want to fill it the same way as displayed in your example.

Unfortunately when I integrate your DatePicker into my react container the only thing displaying is the calendar and I can't even choose the year.
If I try to modify the buttons:
confirmBtnText="asfs" the confirm button under the calendar will always be "ok".

So, am I missing something? How can I have the same DatePicker as in your GIF? How can I change the confirmBtnText?

My code is just a copy past of your usage as I wanted to try it before "putting my hand in it".

    <DatePicker
        style={{width: 250}}
        placeholder="select date"
        format="DD-MM-YYYY"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        onDateChange={(userAge) => {this.setState({userAge})}}
    />

Many thanks!

iOS: Animate the Picker Off-Screen

The Picker will animate onto the screen when invoked with a smooth transition, however, when the modal is dismissed through either Cancel / Confirm / clicking on the backdrop, it instantly flashes / disappears off-screen.

It should instead animate off the screen with the exact but inverted animation that was used to bring it onto the screen.

SpinnerMode

Is there anyway to enable spinnermode in the android datepicker like in the react-native original datepicker?

Feature: Custom Design

Possible to use an own design and only use the 'modal' selector or be able to override the design by

<DatePicker
  date={this.state.date}
  mode="date"
  onDateChange={(date) => {this.setState({date: date})}}
>
  <Text>Adding my custom design, button and icons</Text>
</DatePicker>

能否加一个 minuteInterval 的支持？

您好！
能否加一个 minuteInterval 的支持？

Ignoring change in props (format / duration / etc.)

@xgfe Hey,
First of all thanks for writing this cool Date Picker :)

Looks like in the constructor you assign some props to instance variables that you later use in your code, that causes changes in these props to be ignored by code that runs after the change.

Any chance you could fix that?

Thanks,
kfir

SyntaxError (...react-native-datepicker/date_icon.png: Unexpected character

This was the only cross platform time picker I found, and it looks nice, however when I tried using the included example I get this:
SyntaxError /path../react-native-datepicker/date_icon.png: Unexpected character '?' (1:0)
RCTDatal + 104
...

Why is this and how do I fix it?

Seems to have issues with touch even handling?

It looks like this component on iOS passes touch events through it.

When I scroll down on the date-time picker, the elements behind it scroll as well.

Any ideas?

Option for border box and icon position

Hi,

Could you add the option for put icon on left of date box. And for delete border or change style of date box?

PD: On iOS the DatePicker dont adjust to screen size.
You can put the property width for send Dimensions.width

Thanks!

Calendar DatePicker vs. Dial DatePicker

I noticed that in the animated example that the DatePickers open a three dial modal. However, when I tried using this library on my own device it uses a calendar modal. Is there any way I can change the mode to support the dial modal ?

没有可以选择的日期啊

点了之后没有可供选择的日期

it do'nt work,and do not show any wrong

when i click it ,it does not show anything

Is there a way to style the date inputs?

For example, for this object, only the width change works:
{width:180,borderWidth:0,borderRadius:5,borderColor:"red"}

How to remove the border?

Hi, thanks for the great work!

I am curious about the customStyles prop. Is this how I can remove the gray border around the date text as well as the calendar icon? How do I use it?

remove default icon width and height

Icon has a default width and height to 32 what makes it not to adapt to 2x and 3x screen.
Can you fix it?

Date text not change after i select a different date,

Maybe when i take the DatePicker into view and then this view is include in a state variable then render. date text not change after i select a different date. then i modify some code . it is working now. following are the modify.

//add a state variable that dateStr
this.state = {
      date: this.getDate(),
      modalVisible: false,
      disabled: this.props.disabled,
      animatedHeight: new Animated.Value(0),
      dateStr: this.props.date,
    };

//reset the value of dateStr
  getDateStr(date = this.props.date) {
    if (date instanceof Date) {
      let dateStr = Moment(date).format(this.format);
      this.setState({
        dateStr: dateStr
      });
      return Moment(date).format(this.format);
    } else {
      let dateStr = Moment(this.getDate(date)).format(this.format);
      this.setState({
        dateStr: dateStr
      });
      return dateStr;
    }
  }

 getTitleElement() {
    const {date, placeholder} = this.props;
    if (!date && placeholder) {
      return (<Text style={[Style.placeholderText, this.props.customStyles.placeholderText]}>{placeholder}</Text>);
    }
//direct to use the state value not the function before.
    return (<Text style={[Style.dateText, this.props.customStyles.dateText]}>{this.state.dateStr}</Text>);
  }

README needs component styling information

The readme needs a better description as to how to style certain elements like placeholder text and date icons.

Breaks on android

Running into this issue below:

java.lang.NullPointerException: Attempt to invoke virtual method 'int android.widget.SimpleMonthView.getMonthHeight()' on a null object reference
                                                                      at android.widget.DayPickerView.onLayout(DayPickerView.java:229)
                                                                      at android.view.View.layout(View.java:16630)
                                                                      at android.view.ViewGroup.layout(ViewGroup.java:5437)
                                                                      at android.widget.FrameLayout.layoutChildren(FrameLayout.java:336)
                                                                      at android.widget.FrameLayout.onLayout(FrameLayout.java:273)
                                                                      at android.view.View.layout(View.java:16630)
                                                                      at android.view.ViewGroup.layout(ViewGroup.java:5437)
                                                                      at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1743)
                                                                      at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1586)
                                                                      at android.widget.LinearLayout.onLayout(LinearLayout.java:1495)
                                                                      at android.view.View.layout(View.java:16630)
                                                                      at android.view.ViewGroup.layout(ViewGroup.java:5437)
                                                                      at android.widget.FrameLayout.layoutChildren(FrameLayout.java:336)
                                                                      at android.widget.FrameLayout.onLayout(FrameLayout.java:273)
                                                                      at android.view.View.layout(View.java:16630)
                                                                      at android.view.ViewGroup.layout(ViewGroup.java:5437)
                                                                      at android.widget.FrameLayout.layoutChildren(FrameLayout.java:336)
                                                                      at android.widget.FrameLayout.onLayout(FrameLayout.java:273)
                                                                      at android.view.View.layout(View.java:16630)
                                                                      at android.view.ViewGroup.layout(ViewGroup.java:5437)
                                                                      at android.widget.FrameLayout.layoutChildren(FrameLayout.java:336)
                                                                      at android.widget.FrameLayout.onLayout(FrameLayout.java:273)
                                                                      at android.view.View.layout(View.java:16630)
                                                                      at android.view.ViewGroup.layout(ViewGroup.java:5437)
                                                                      at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1743)
                                                                      at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1586)
                                                                      at android.widget.LinearLayout.onLayout(LinearLayout.java:1495)
                                                                      at android.view.View.layout(View.java:16630)
                                                                      at android.view.ViewGroup.layout(ViewGroup.java:5437)
                                                                      at android.widget.FrameLayout.layoutChildren(FrameLayout.java:336)
                                                                      at android.widget.FrameLayout.onLayout(FrameLayout.java:273)
                                                                      at android.view.View.layout(View.java:16630)
                                                                      at android.view.ViewGroup.layout(ViewGroup.java:5437)
                                                                      at android.widget.FrameLayout.layoutChildren(FrameLayout.java:336)
                                                                      at android.widget.FrameLayout.onLayout(FrameLayout.java:273)
                                                                      at android.view.View.layout(View.java:16630)
                                                                      at android.view.ViewGroup.layout(ViewGroup.java:5437)
                                                                      at android.widget.FrameLayout.layoutChildren(FrameLayout.java:336)
                                                                      at android.widget.FrameLayout.onLayout(FrameLayout.java:273)
                                                                      at com.android.internal.policy.PhoneWindow$DecorView.onLayout(PhoneWindow.java:2678)
                                                                      at android.view.View.layout(View.java:16630)
                                                                      at android.view.ViewGroup.layout(ViewGroup.java:5437)
                                                                      at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:2171)
                                                                      at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1931)
                                                                      at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1107)
                                                                      at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6013)
                                                                      at android.view.Choreographer$CallbackRecord.run(Choreographer.java:858)
                                                                      at android.view.Choreographer.doCallbacks(Choreographer.java:670)
                                                                      at android.view.Choreographer.doFrame(Choreographer.java:606)
                                                                      at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:844)
                                                                      at android.os.Handler.handleCallback(Handler.java:739)
                                                                      at android.os.Handler.dispatchMessage(Handler.java:95)
                                                                      at android.os.Looper.loop(Looper.java:148)
                                                                      at android.app.ActivityThread.main(ActivityThread.java:5417)
                                                                      at java.lang.reflect.Method.invoke(Native Method)
                                                                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
                                                                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

Only on Android, the module works well on iOS. The error seems to trigger after tapping the datepicker button. Thanks in advance!

specs:
Android: M
react: 15.2.1
react-native: 0.30.0

How i get the value of the input?

Hello,
how can i get the value of the input after i click "submit" on my form?
i use it like this:

const DatePicker = require('./DatePicker');
<DatePicker />

can i disabling spesific date?

I have to disabling a spesific date, and showing it into the datepicker.
Is there a way to do that?

set time with keyboard

Hello,
i want to set time with keyboard.
For example, "08:30"
When i click 08 or 30, keyboard should open so i can set time with input value
Is there any way to do that?
Thank you!

xgfe / react-native-datepicker Goto Github PK

react-native-datepicker's People

Contributors

Stargazers

Watchers

Forkers

react-native-datepicker's Issues

how to change this green backgroundcolor?

Recommend Projects

Recommend Topics

Recommend Org

Jobs