Nativebase: Date Picker

Created on 26 May 2017 · 37Comments · Source: GeekyAnts/NativeBase

feature request

Source

SupriyaKalghatgi

👍7

Most helpful comment

Any chance to make this a date _and time_ picker?
Or having a separate time picker if that's not possible...

miguelrs on 14 Jun 2018

👍18 ❤5

All 37 comments

I'm so happy to see this is enhancement tasks but I have a suggestion.
Please use same approach as http://www.material-ui.com/#/components/date-picker so we can simply use localization support for any language and calendar systems.
For example it's a code snippet from MaterialUI:

import React from 'react';
import DatePicker from 'material-ui/DatePicker';
import areIntlLocalesSupported from 'intl-locales-supported';
import persianUtils from 'material-ui-persian-date-picker-utils';

let DateTimeFormat;

/**
 * Use the native Intl.DateTimeFormat if available, or a polyfill if not.
 */
if (areIntlLocalesSupported(['fr', 'fa-IR'])) {
  DateTimeFormat = global.Intl.DateTimeFormat;
} else {
  const IntlPolyfill = require('intl');
  DateTimeFormat = IntlPolyfill.DateTimeFormat;
  require('intl/locale-data/jsonp/fr');
  require('intl/locale-data/jsonp/fa-IR');
}

/**
 *  `DatePicker` can be localised using the `locale` property. The first example is localised in French.
 *  Note that the buttons must be separately localised using the `cancelLabel` and `okLabel` properties.
 *
 *  The second example shows `firstDayOfWeek` set to `0`, (Sunday), and `locale` to `en-US` which matches the
 *  behavior of the Date Picker prior to 0.15.0. Note that the 'en-US' locale is built in, and so does not require
 *  `DateTimeFormat` to be supplied.
 *
 *  The final example displays the resulting date in a custom format using the `formatDate` property.
 */
const DatePickerExampleInternational = () => (
  <div>
    <DatePicker
      hintText="fr locale"
      DateTimeFormat={DateTimeFormat}
      okLabel="OK"
      cancelLabel="Annuler"
      locale="fr"
    />
    <DatePicker
      hintText="fa-IR locale"
      DateTimeFormat={DateTimeFormat}
      okLabel="تایید"
      cancelLabel="لغو"
      locale="fa-IR"
      firstDayOfWeek={6}
      utils={persianUtils}
    />
    <DatePicker
      hintText="en-US locale"
      locale="en-US"
      firstDayOfWeek={0}
    />
    <DatePicker
      hintText="Custom date format"
      firstDayOfWeek={0}
      formatDate={new DateTimeFormat('en-US', {
        day: 'numeric',
        month: 'long',
        year: 'numeric',
      }).format}
    />
  </div>
);

export default DatePickerExampleInternational;

and simply use custom calendar and custom language.

/CC: @SupriyaKalghatgi @sankhadeeproy007

cyclops24 on 9 Jul 2017

👍5 ❤1 😄1

I'm just curious why an important component is in low priority. It would be perfect if it has it own DatePicker.

rabin111 on 27 Jul 2017

👍20

Agreed, in need of a cool native-base datapicker

vgabdala on 9 Sep 2017

👍3

miguelocarvajal on 7 Nov 2017

👍1

mtebele on 16 Nov 2017

👍1

MedinaGitHub on 28 Nov 2017

👍1

drewmcdonald1337 on 29 Nov 2017

👍1

pimvernooij on 12 Dec 2017

👍1

ChadTaljaardt on 19 Dec 2017

+1, it's a must for any app UI framework. Date is common data in all applications.
What are the ways to achieve date picking functionality in ReactNative right now ?