react-native-datepicker edited for new versions react native, new feature set locale ID for ios

react native datePicker component for both Android and IOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS

Install

npm install react-native-datepicker --save

Or using react-native-ui-xg, our react-naitve ui kit.

npm install react-native-ui-xg --save

Example

Check index.android.js in the Example.

Usage

import React, { Component } from 'react'
import DatePicker from 'react-native-datepicker'

export default class MyDatePicker extends Component {
  constructor(props){
    super(props)
    this.state = {date:"2016-05-15"}
  }

  render(){
    return (
      <DatePicker
        style={{width: 200}}
        date={this.state.date}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        minDate="2016-05-01"
        maxDate="2016-06-01"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          dateIcon: {
            position: 'absolute',
            left: 0,
            top: 4,
            marginLeft: 0
          },
          dateInput: {
            marginLeft: 36
          }
          // ... You can check the source to find the other keys.
        }}
        onDateChange={(date) => {this.setState({date: date})}}
      />
    )
  }
}

You can check index.js in the Example for detail.

Properties

Prop	Default	Type	Description
style	-	object	Specify the style of the DatePicker, eg. width, height...
date	-	string | date | Moment instance	Specify the display date of DatePicker. string type value must match the specified format
mode	'date'	enum	The enum of date, datetime and time
androidMode	'default'	enum	The enum of default, calendar and spinner (only Android)
format	'YYYY-MM-DD'	string	Specify the display format of the date, which using moment.js. The default value change according to the mode.
confirmBtnText	'确定'	string	Specify the text of confirm btn in ios.
cancelBtnText	'取消'	string	Specify the text of cancel btn in ios.
iconSource	-	{uri: string} | number	Specify the icon. Same as the source of Image, always using require()
minDate	-	string | date	Restricts the range of possible date values.
maxDate	-	string | date	Restricts the range of possible date values.
duration	300	number	Specify the animation duration of datepicker.
customStyles	-	number	The hook of customize datepicker style, same as the native style. dateTouchBody, dateInput...
showIcon	true	boolean	Controller whether or not show the icon
hideText	false	boolean	Controller whether or not show the dateText
iconComponent	-	element	Set the custom icon
disabled	false	boolean	Controller whether or not disable the picker
is24Hour	-	boolean	Set the TimePicker is24Hour flag. The default value depend on format. Only work in Android
placeholder	''	string	The placeholder show when this.props.date is falsy
onDateChange	-	function	This is called when the user confirm the picked date or time in the UI. The first and only argument is a date or time string representing the new date and time formatted by moment.js with the given format property.
onOpenModal	-	function	This is called when the DatePicker Modal open.
onCloseModal	-	function	This is called when the DatePicker Modal close
onPressMask	-	function	This is called when clicking the ios modal mask
modalOnResponderTerminationRequest	-	function	Set the callback for React Native's Gesture Responder System's call to onResponderTerminationRequest. By default this will reject a termination request, but can be overidden in case the View under the Modal is implementing custom gesture responders, and you wish for those to be overidden in certain cases.
TouchableComponent	TouchableHighlight	Component	Replace the TouchableHighlight with a custom Component. For example : TouchableOpacity
locale	string	function	Set language, locale id for devices ios

Locale IDS

mr	Marathi
bs	Bosnian
ee_TG	Ewe (Togo)
ms	Malay
kam_KE	Kamba (Kenya)
mt	Maltese
ha	Hausa
es_HN	Spanish (Honduras)
ml_IN	Malayalam (India)
ro_MD	Romanian (Moldova)
kab_DZ	Kabyle (Algeria)
he	Hebrew
es_CO	Spanish (Colombia)
my	Burmese
es_PA	Spanish (Panama)
az_Latn	Azerbaijani (Latin)
mer	Meru
en_NZ	English (New Zealand)
xog_UG	Soga (Uganda)
sg	Sango
fr_GP	French (Guadeloupe)
sr_Cyrl_BA	Serbian (Cyrillic, Bosnia and Herzegovina)
hi	Hindi
fil_PH	Filipino (Philippines)
lt_LT	Lithuanian (Lithuania)
si	Sinhala
en_MT	English (Malta)
si_LK	Sinhala (Sri Lanka)
luo_KE	Luo (Kenya)
it_CH	Italian (Switzerland)
teo	Teso
mfe	Morisyen
sk	Slovak
uz_Cyrl_UZ	Uzbek (Cyrillic, Uzbekistan)
sl	Slovenian
rm_CH	Romansh (Switzerland)
az_Cyrl_AZ	Azerbaijani (Cyrillic, Azerbaijan)
fr_GQ	French (Equatorial Guinea)
kde	Makonde
sn	Shona
cgg_UG	Chiga (Uganda)
so	Somali
fr_RW	French (Rwanda)
es_SV	Spanish (El Salvador)
mas_TZ	Masai (Tanzania)
en_MU	English (Mauritius)
sq	Albanian
hr	Croatian
sr	Serbian
en_PH	English (Philippines)
ca	Catalan
hu	Hungarian
mk_MK	Macedonian (Macedonia)
fr_TD	French (Chad)
nb	Norwegian Bokmål
sv	Swedish
kln_KE	Kalenjin (Kenya)
sw	Swahili
nd	North Ndebele
sr_Latn	Serbian (Latin)
el_GR	Greek (Greece)
hy	Armenian
ne	Nepali
el_CY	Greek (Cyprus)
es_CR	Spanish (Costa Rica)
fo_FO	Faroese (Faroe Islands)
pa_Arab_PK	Punjabi (Arabic, Pakistan)
seh	Sena
ar_YE	Arabic (Yemen)
ja_JP	Japanese (Japan)
ur_PK	Urdu (Pakistan)
pa_Guru	Punjabi (Gurmukhi)
gl_ES	Galician (Spain)
zh_Hant_HK	Chinese (Traditional Han, Hong Kong SAR China)
ar_EG	Arabic (Egypt)
nl	Dutch
th_TH	Thai (Thailand)
es_PE	Spanish (Peru)
fr_KM	French (Comoros)
nn	Norwegian Nynorsk
kk_Cyrl_KZ	Kazakh (Cyrillic, Kazakhstan)
kea	Kabuverdianu
lv_LV	Latvian (Latvia)
kln	Kalenjin
tzm_Latn	Central Morocco Tamazight (Latin)
yo	Yoruba
gsw_CH	Swiss German (Switzerland)
ha_Latn_GH	Hausa (Latin, Ghana)
is_IS	Icelandic (Iceland)
pt_BR	Portuguese (Brazil)
cs	Czech
en_PK	English (Pakistan)
fa_IR	Persian (Iran)
zh_Hans_SG	Chinese (Simplified Han, Singapore)
luo	Luo
ta	Tamil
fr_TG	French (Togo)
kde_TZ	Makonde (Tanzania)
mr_IN	Marathi (India)
ar_SA	Arabic (Saudi Arabia)
ka_GE	Georgian (Georgia)
mfe_MU	Morisyen (Mauritius)
id	Indonesian
fr_LU	French (Luxembourg)
de_LU	German (Luxembourg)
ru_MD	Russian (Moldova)
cy	Welsh
zh_Hans_HK	Chinese (Simplified Han, Hong Kong SAR China)
te	Telugu
bg_BG	Bulgarian (Bulgaria)
shi_Latn	Tachelhit (Latin)
ig	Igbo
ses	Koyraboro Senni
ii	Sichuan Yi
es_BO	Spanish (Bolivia)
th	Thai
ko_KR	Korean (South Korea)
ti	Tigrinya
it_IT	Italian (Italy)
shi_Latn_MA	Tachelhit (Latin, Morocco)
pt_MZ	Portuguese (Mozambique)
ff_SN	Fulah (Senegal)
haw	Hawaiian
zh_Hans	Chinese (Simplified Han)
so_KE	Somali (Kenya)
bn_IN	Bengali (India)
en_UM	English (U.S. Minor Outlying Islands)
to	Tonga
id_ID	Indonesian (Indonesia)
uz_Cyrl	Uzbek (Cyrillic)
en_GU	English (Guam)
es_EC	Spanish (Ecuador)
en_US_POSIX	English (United States, Computer)
sr_Latn_BA	Serbian (Latin, Bosnia and Herzegovina)
is	Icelandic
luy	Luyia
tr	Turkish
en_NA	English (Namibia)
it	Italian
da	Danish
bo_IN	Tibetan (India)
vun_TZ	Vunjo (Tanzania)
ar_SD	Arabic (Sudan)
uz_Latn_UZ	Uzbek (Latin, Uzbekistan)
az_Latn_AZ	Azerbaijani (Latin, Azerbaijan)
de	German
es_GQ	Spanish (Equatorial Guinea)
ta_IN	Tamil (India)
de_DE	German (Germany)
fr_FR	French (France)
rof_TZ	Rombo (Tanzania)
ar_LY	Arabic (Libya)
en_BW	English (Botswana)
asa	Asu
zh	Chinese
ha_Latn	Hausa (Latin)
fr_NE	French (Niger)
es_MX	Spanish (Mexico)
bem_ZM	Bemba (Zambia)
zh_Hans_CN	Chinese (Simplified Han, China)
bn_BD	Bengali (Bangladesh)
pt_GW	Portuguese (Guinea-Bissau)
om	Oromo
jmc	Machame
de_AT	German (Austria)
kk_Cyrl	Kazakh (Cyrillic)
sw_TZ	Swahili (Tanzania)
ar_OM	Arabic (Oman)
et_EE	Estonian (Estonia)
or	Oriya
da_DK	Danish (Denmark)
ro_RO	Romanian (Romania)
zh_Hant	Chinese (Traditional Han)
bm_ML	Bambara (Mali)
ja	Japanese
fr_CA	French (Canada)
naq	Nama
zu	Zulu
en_IE	English (Ireland)
ar_MA	Arabic (Morocco)
es_GT	Spanish (Guatemala)
uz_Arab_AF	Uzbek (Arabic, Afghanistan)
en_AS	English (American Samoa)
bs_BA	Bosnian (Bosnia and Herzegovina)
am_ET	Amharic (Ethiopia)
ar_TN	Arabic (Tunisia)
haw_US	Hawaiian (United States)
ar_JO	Arabic (Jordan)
fa_AF	Persian (Afghanistan)
uz_Latn	Uzbek (Latin)
en_BZ	English (Belize)
nyn_UG	Nyankole (Uganda)
ebu_KE	Embu (Kenya)
te_IN	Telugu (India)
cy_GB	Welsh (United Kingdom)
uk	Ukrainian
nyn	Nyankole
en_JM	English (Jamaica)
en_US	English (United States)
fil	Filipino
ar_KW	Arabic (Kuwait)
af_ZA	Afrikaans (South Africa)
en_CA	English (Canada)
fr_DJ	French (Djibouti)
ti_ER	Tigrinya (Eritrea)
ig_NG	Igbo (Nigeria)
en_AU	English (Australia)
ur	Urdu
fr_MC	French (Monaco)
pt_PT	Portuguese (Portugal)
pa	Punjabi
es_419	Spanish (Latin America)
fr_CD	French (Congo - Kinshasa)
en_SG	English (Singapore)
bo_CN	Tibetan (China)
kn_IN	Kannada (India)
sr_Cyrl_RS	Serbian (Cyrillic, Serbia)
lg_UG	Ganda (Uganda)
gu_IN	Gujarati (India)
ee	Ewe
nd_ZW	North Ndebele (Zimbabwe)
bem	Bemba
uz	Uzbek
sw_KE	Swahili (Kenya)
sq_AL	Albanian (Albania)
hr_HR	Croatian (Croatia)
mas_KE	Masai (Kenya)
el	Greek
ti_ET	Tigrinya (Ethiopia)
es_AR	Spanish (Argentina)
pl	Polish
en	English
eo	Esperanto
shi	Tachelhit
kok	Konkani
fr_CF	French (Central African Republic)
fr_RE	French (Réunion)
mas	Masai
rof	Rombo
ru_UA	Russian (Ukraine)
yo_NG	Yoruba (Nigeria)
dav_KE	Taita (Kenya)
gv_GB	Manx (United Kingdom)
pa_Arab	Punjabi (Arabic)
es	Spanish
teo_UG	Teso (Uganda)
ps	Pashto
es_PR	Spanish (Puerto Rico)
fr_MF	French (Saint Martin)
et	Estonian
pt	Portuguese
eu	Basque
ka	Georgian
rwk_TZ	Rwa (Tanzania)
nb_NO	Norwegian Bokmål (Norway)
fr_CG	French (Congo - Brazzaville)
cgg	Chiga
zh_Hant_TW	Chinese (Traditional Han, Taiwan)
sr_Cyrl_ME	Serbian (Cyrillic, Montenegro)
lag	Langi
ses_ML	Koyraboro Senni (Mali)
en_ZW	English (Zimbabwe)
ak_GH	Akan (Ghana)
vi_VN	Vietnamese (Vietnam)
sv_FI	Swedish (Finland)
to_TO	Tonga (Tonga)
fr_MG	French (Madagascar)
fr_GA	French (Gabon)
fr_CH	French (Switzerland)
de_CH	German (Switzerland)
es_US	Spanish (United States)
ki	Kikuyu
my_MM	Burmese (Myanmar [Burma])
vi	Vietnamese
ar_QA	Arabic (Qatar)
ga_IE	Irish (Ireland)
rwk	Rwa
bez	Bena
ee_GH	Ewe (Ghana)
kk	Kazakh
as_IN	Assamese (India)
ca_ES	Catalan (Spain)
kl	Kalaallisut
fr_SN	French (Senegal)
ne_IN	Nepali (India)
km	Khmer
ms_BN	Malay (Brunei)
ar_LB	Arabic (Lebanon)
ta_LK	Tamil (Sri Lanka)
kn	Kannada
ur_IN	Urdu (India)
fr_CI	French (Côte d’Ivoire)
ko	Korean
ha_Latn_NG	Hausa (Latin, Nigeria)
sg_CF	Sango (Central African Republic)
om_ET	Oromo (Ethiopia)
zh_Hant_MO	Chinese (Traditional Han, Macau SAR China)
uk_UA	Ukrainian (Ukraine)
fa	Persian
mt_MT	Maltese (Malta)
ki_KE	Kikuyu (Kenya)
luy_KE	Luyia (Kenya)
kw	Cornish
pa_Guru_IN	Punjabi (Gurmukhi, India)
en_IN	English (India)
kab	Kabyle
ar_IQ	Arabic (Iraq)
ff	Fulah
en_TT	English (Trinidad and Tobago)
bez_TZ	Bena (Tanzania)
es_NI	Spanish (Nicaragua)
uz_Arab	Uzbek (Arabic)
ne_NP	Nepali (Nepal)
fi	Finnish
khq	Koyra Chiini
gsw	Swiss German
zh_Hans_MO	Chinese (Simplified Han, Macau SAR China)
en_MH	English (Marshall Islands)
hu_HU	Hungarian (Hungary)
en_GB	English (United Kingdom)
fr_BE	French (Belgium)
de_BE	German (Belgium)
saq	Samburu
be_BY	Belarusian (Belarus)
sl_SI	Slovenian (Slovenia)
sr_Latn_RS	Serbian (Latin, Serbia)
fo	Faroese
fr	French
xog	Soga
fr_BF	French (Burkina Faso)
tzm	Central Morocco Tamazight
sk_SK	Slovak (Slovakia)
fr_ML	French (Mali)
he_IL	Hebrew (Israel)
ha_Latn_NE	Hausa (Latin, Niger)
ru_RU	Russian (Russia)
fr_CM	French (Cameroon)
teo_KE	Teso (Kenya)
seh_MZ	Sena (Mozambique)
kl_GL	Kalaallisut (Greenland)
fi_FI	Finnish (Finland)
kam	Kamba
es_ES	Spanish (Spain)
af	Afrikaans
asa_TZ	Asu (Tanzania)
cs_CZ	Czech (Czech Republic)
tr_TR	Turkish (Turkey)
es_PY	Spanish (Paraguay)
tzm_Latn_MA	Central Morocco Tamazight (Latin, Morocco)
lg	Ganda
ebu	Embu
en_HK	English (Hong Kong SAR China)
nl_NL	Dutch (Netherlands)
en_BE	English (Belgium)
ms_MY	Malay (Malaysia)
es_UY	Spanish (Uruguay)
ar_BH	Arabic (Bahrain)
kw_GB	Cornish (United Kingdom)
ak	Akan
chr	Cherokee
dav	Taita
lag_TZ	Langi (Tanzania)
am	Amharic
so_DJ	Somali (Djibouti)
shi_Tfng_MA	Tachelhit (Tifinagh, Morocco)
sr_Latn_ME	Serbian (Latin, Montenegro)
sn_ZW	Shona (Zimbabwe)
or_IN	Oriya (India)
ar	Arabic
as	Assamese
fr_BI	French (Burundi)
jmc_TZ	Machame (Tanzania)
chr_US	Cherokee (United States)
eu_ES	Basque (Spain)
saq_KE	Samburu (Kenya)
vun	Vunjo
lt	Lithuanian
naq_NA	Nama (Namibia)
ga	Irish
af_NA	Afrikaans (Namibia)
kea_CV	Kabuverdianu (Cape Verde)
es_DO	Spanish (Dominican Republic)
lv	Latvian
kok_IN	Konkani (India)
de_LI	German (Liechtenstein)
fr_BJ	French (Benin)
az	Azerbaijani
guz_KE	Gusii (Kenya)
rw_RW	Kinyarwanda (Rwanda)
mg_MG	Malagasy (Madagascar)
km_KH	Khmer (Cambodia)
gl	Galician
shi_Tfng	Tachelhit (Tifinagh)
ar_AE	Arabic (United Arab Emirates)
fr_MQ	French (Martinique)
rm	Romansh
sv_SE	Swedish (Sweden)
az_Cyrl	Azerbaijani (Cyrillic)
ro	Romanian
so_ET	Somali (Ethiopia)
en_ZA	English (South Africa)
ii_CN	Sichuan Yi (China)
fr_BL	French (Saint Barthélemy)
hi_IN	Hindi (India)
gu	Gujarati
mer_KE	Meru (Kenya)
nn_NO	Norwegian Nynorsk (Norway)
gv	Manx
ru	Russian
ar_DZ	Arabic (Algeria)
ar_SY	Arabic (Syria)
en_MP	English (Northern Mariana Islands)
nl_BE	Dutch (Belgium)
rw	Kinyarwanda
be	Belarusian
en_VI	English (U.S. Virgin Islands)
es_CL	Spanish (Chile)
bg	Bulgarian
mg	Malagasy
hy_AM	Armenian (Armenia)
zu_ZA	Zulu (South Africa)
guz	Gusii
mk	Macedonian
es_VE	Spanish (Venezuela)
ml	Malayalam
bm	Bambara
khq_ML	Koyra Chiini (Mali)
bn	Bengali
ps_AF	Pashto (Afghanistan)
so_SO	Somali (Somalia)
sr_Cyrl	Serbian (Cyrillic)
pl_PL	Polish (Poland)
fr_GN	French (Guinea)
bo	Tibetan
om_KE	Oromo (Kenya)

Property customStyles available keys

• appearance: dateInput, disabled, dateTouchBody, dateIcon, placeholderText, dateText
• ios select panel: datePickerCon, datePicker, btnConfirm, btnTextConfirm, btnCancel, btnTextCancel

Instance Methods

Method	Params	Description
onPressDate	-	Manually open the date picker panel
onPressCancel	-	Manually close the date picker panel like, similarly pressing cancel btn