From 01ae580a326b9ac90c382e5ff956a427966686ac Mon Sep 17 00:00:00 2001 From: Abilio Almeida Eiroa Date: Mon, 1 Aug 2016 13:21:32 +0200 Subject: [PATCH] Added support for locale on DatePicker dialog component Updated components, docs and spec. --- components/date_picker/Calendar.js | 9 +- components/date_picker/CalendarDay.js | 6 +- components/date_picker/CalendarMonth.js | 16 +- components/date_picker/DatePicker.js | 20 +- components/date_picker/DatePickerDialog.js | 13 +- components/date_picker/readme.md | 20 +- components/utils/time.js | 194 +++++++++----- .../modules/examples/datepicker_example_1.txt | 25 ++ lib/date_picker/Calendar.js | 8 +- lib/date_picker/CalendarDay.js | 6 +- lib/date_picker/CalendarMonth.js | 33 ++- lib/date_picker/DatePicker.js | 18 +- lib/date_picker/DatePickerDialog.js | 12 +- lib/utils/time.js | 237 +++++++++++------- spec/components/pickers.js | 26 ++ 15 files changed, 452 insertions(+), 191 deletions(-) diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js index 28297e08..d48a2d47 100644 --- a/components/date_picker/Calendar.js +++ b/components/date_picker/Calendar.js @@ -20,7 +20,12 @@ const factory = (IconButton) => { prev: PropTypes.string, years: PropTypes.string }), - viewDate: PropTypes.object + viewDate: PropTypes.object, + locale: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.object + ]), + sundayFirstDayOfWeek: React.PropTypes.bool }; static defaultProps = { @@ -99,6 +104,8 @@ const factory = (IconButton) => { selectedDate={this.props.selectedDate} theme={this.props.theme} viewDate={this.state.viewDate} + locale={this.props.locale} + sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek} /> diff --git a/components/date_picker/CalendarDay.js b/components/date_picker/CalendarDay.js index e22306e0..0951ec30 100644 --- a/components/date_picker/CalendarDay.js +++ b/components/date_picker/CalendarDay.js @@ -13,13 +13,15 @@ class Day extends Component { day: PropTypes.string, disabled: PropTypes.string }), - viewDate: PropTypes.object + viewDate: PropTypes.object, + sundayFirstDayOfWeek: PropTypes.bool }; dayStyle () { if (this.props.day === 1) { + const e = (this.props.sundayFirstDayOfWeek) ? 0 : 1; return { - marginLeft: `${time.getFirstWeekDay(this.props.viewDate) * 100 / 7}%` + marginLeft: `${(time.getFirstWeekDay(this.props.viewDate) - e) * 100 / 7}%` }; } } diff --git a/components/date_picker/CalendarMonth.js b/components/date_picker/CalendarMonth.js index 001121d1..19a415ef 100644 --- a/components/date_picker/CalendarMonth.js +++ b/components/date_picker/CalendarMonth.js @@ -15,7 +15,12 @@ class Month extends Component { title: PropTypes.string, week: PropTypes.string }), - viewDate: PropTypes.object + viewDate: PropTypes.object, + locale: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.object + ]), + sundayFirstDayOfWeek: React.PropTypes.bool }; handleDayClick = (day) => { @@ -23,9 +28,9 @@ class Month extends Component { }; renderWeeks () { - return utils.range(0, 7).map(i => { - return {time.getFullDayOfWeek(i).charAt(0)}; - }); + const days = utils.range(0, 7).map(d => time.getDayOfWeekLetter(d, this.props.locale)); + const source = (this.props.sundayFirstDayOfWeek) ? days : [...days.slice(1), days[0]]; + return source.map((d, i) => ({d})) } renderDays () { @@ -42,6 +47,7 @@ class Month extends Component { selectedDate={this.props.selectedDate} theme={this.props.theme} viewDate={this.props.viewDate} + sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek} /> ); }); @@ -51,7 +57,7 @@ class Month extends Component { return (
- {time.getFullMonth(this.props.viewDate)} {this.props.viewDate.getFullYear()} + {time.getFullMonth(this.props.viewDate, this.props.locale)} {this.props.viewDate.getFullYear()}
{this.renderWeeks()}
{this.renderDays()}
diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js index 1c2c582f..42daf137 100644 --- a/components/date_picker/DatePicker.js +++ b/components/date_picker/DatePicker.js @@ -37,7 +37,17 @@ const factory = (Input, DatePickerDialog) => { value: PropTypes.oneOfType([ PropTypes.instanceOf(Date), PropTypes.string - ]) + ]), + locale: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.object + ]), + sundayFirstDayOfWeek: React.PropTypes.bool + }; + + static defaultProps = { + locale: 'en', + sundayFirstDayOfWeek: false }; state = { @@ -67,11 +77,11 @@ const factory = (Input, DatePickerDialog) => { }; render () { - const { autoOk, inputClassName, inputFormat, maxDate, minDate, - onEscKeyDown, onOverlayClick, value, ...others } = this.props; + const { autoOk, inputClassName, inputFormat, maxDate, minDate, sundayFirstDayOfWeek, + onEscKeyDown, onOverlayClick, value, locale, ...others } = this.props; const finalInputFormat = inputFormat || time.formatDate; const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined; - const formattedDate = date === undefined ? '' : finalInputFormat(value); + const formattedDate = date === undefined ? '' : finalInputFormat(value, locale); return (
@@ -101,6 +111,8 @@ const factory = (Input, DatePickerDialog) => { onSelect={this.handleSelect} theme={this.props.theme} value={date} + locale={locale} + sundayFirstDayOfWeek={sundayFirstDayOfWeek} />
); diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js index 4936214c..2a49aa2f 100644 --- a/components/date_picker/DatePickerDialog.js +++ b/components/date_picker/DatePickerDialog.js @@ -25,7 +25,12 @@ const factory = (Dialog, Calendar) => { year: PropTypes.string, yearsDisplay: PropTypes.string }), - value: PropTypes.object + value: PropTypes.object, + locale: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.object + ]), + sundayFirstDayOfWeek: React.PropTypes.bool }; static defaultProps = { @@ -100,7 +105,7 @@ const factory = (Dialog, Calendar) => { {this.state.date.getFullYear()}

- {time.getShortDayOfWeek(this.state.date.getDay())}, {time.getShortMonth(this.state.date)} {this.state.date.getDate()} + {time.getShortDayOfWeek(this.state.date.getDay(), this.props.locale)}, {time.getShortMonth(this.state.date, this.props.locale)} {this.state.date.getDate()}

@@ -111,7 +116,9 @@ const factory = (Dialog, Calendar) => { minDate={this.props.minDate} onChange={this.handleCalendarChange} selectedDate={this.state.date} - theme={this.props.theme} /> + theme={this.props.theme} + locale={this.props.locale} + sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek} />
); diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md index 805f56ea..0b4f3e76 100644 --- a/components/date_picker/readme.md +++ b/components/date_picker/readme.md @@ -11,6 +11,14 @@ const min_datetime = new Date(new Date(datetime).setDate(8)); datetime.setHours(17); datetime.setMinutes(28); +const localeExample = { + months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'), + monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'), + weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'), + weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'), + weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_') +} + class DatePickerTest extends React.Component { state = {date2: datetime}; @@ -22,6 +30,8 @@ class DatePickerTest extends React.Component { return (
+ + `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
@@ -34,9 +44,10 @@ If you want to provide a theme via context, the component key is `RTDatePicker`. ## Properties -| Name | Type | Default | Description| +| Name | Type | Default | Description | |:-----|:-----|:-----|:-----| -| `autoOk` | `Boolean` | `false` | Automatically selects a date upon clicking on a day| +| `autoOk` | `Boolean` | `false` | Automatically selects a date upon clicking on a day. | +| `sundayFirstDayOfWeek` | `Boolean`| `false` | Set week's first day to Sunday. Default week's first day is Monday ([ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Week_dates)). | | `className` | `String` | | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.| | `inputClassName`| `String` | | This class will be applied to `Input` component of `DatePicker`. | | `inputFormat` | `Function` | | Function to format the date displayed on the input. | @@ -44,9 +55,10 @@ If you want to provide a theme via context, the component key is `RTDatePicker`. | `maxDate` | `Date` | | Date object with the maximum selectable date. | | `minDate` | `Date` | | Date object with the minimum selectable date. | | `onChange` | `Function` | | Callback called when the picker value is changed.| -| `onEscKeyDown` | `Function` | | Callback called when the ESC key is pressed with the overlay active. | -| `onOverlayClick` | `Function` | | Callback to be invoked when the dialog overlay is clicked.| +| `onEscKeyDown` | `Function` | | Callback called when the ESC key is pressed with the overlay active. | +| `onOverlayClick`| `Function` | | Callback to be invoked when the dialog overlay is clicked.| | `value` | `Date` | | Date object with the currently selected date. | +| `locale` | `String` or `Object` | `'en'` | Set the locale for the date picker dialog ('en','es','af','ar','be','bg','bn','bo','br','bs','ca','gl','eu','pt','it',fr'). Object is supported too (see example above). | ## Theme diff --git a/components/utils/time.js b/components/utils/time.js index 0b474ad6..27de9969 100644 --- a/components/utils/time.js +++ b/components/utils/time.js @@ -1,3 +1,118 @@ +const dateLocales = { + en: { + months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'), + monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'), + weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'), + weekdaysShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'), + weekdaysLetter: [] + }, + es: { + months: 'enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre'.split('_'), + monthsShort: 'ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic'.split('_'), + weekdays: 'domingo_lunes_martes_miércoles_jueves_viernes_sábado'.split('_'), + weekdaysShort: 'dom._lun._mar._mié._jue._vie._sáb.'.split('_'), + weekdaysLetter: 'D_L_M_X_J_V_S'.split('_') + }, + af: { + months: 'Januarie_Februarie_Maart_April_Mei_Junie_Julie_Augustus_September_Oktober_November_Desember'.split('_'), + monthsShort: 'Jan_Feb_Mrt_Apr_Mei_Jun_Jul_Aug_Sep_Okt_Nov_Des'.split('_'), + weekdays: 'Sondag_Maandag_Dinsdag_Woensdag_Donderdag_Vrydag_Saterdag'.split('_'), + weekdaysShort: 'Son_Maa_Din_Woe_Don_Vry_Sat'.split('_'), + weekdaysLetter: [] + }, + ar: { + months: ['كانون الثاني يناير','شباط فبراير','آذار مارس','نيسان أبريل','أيار مايو','حزيران يونيو','تموز يوليو','آب أغسطس','أيلول سبتمبر','تشرين الأول أكتوبر','تشرين الثاني نوفمبر','كانون الأول ديسمبر'], + monthsShort: ['كانون الثاني يناير','شباط فبراير','آذار مارس','نيسان أبريل','أيار مايو','حزيران يونيو','تموز يوليو','آب أغسطس','أيلول سبتمبر','تشرين الأول أكتوبر','تشرين الثاني نوفمبر','كانون الأول ديسمبر'], + weekdays: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split('_'), + weekdaysShort: 'أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت'.split('_'), + weekdaysLetter: [] + }, + be: { + months: 'студзень_люты_сакавік_красавік_травень_чэрвень_ліпень_жнівень_верасень_кастрычнік_лістапад_снежань'.split('_'), + monthsShort: 'студ_лют_сак_крас_трав_чэрв_ліп_жнів_вер_каст_ліст_снеж'.split('_'), + weekdays: 'нядзеля_панядзелак_аўторак_серада_чацвер_пятніца_субота'.split('_'), + weekdaysShort: 'нд_пн_ат_ср_чц_пт_сб'.split('_'), + weekdaysLetter: [] + }, + bg: { + months: 'януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември'.split('_'), + monthsShort: 'янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек'.split('_'), + weekdays: 'неделя_понеделник_вторник_сряда_четвъртък_петък_събота'.split('_'), + weekdaysShort: 'нед_пон_вто_сря_чет_пет_съб'.split('_'), + weekdaysLetter: [] + }, + bn: { + months: 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split('_'), + monthsShort: 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split('_'), + weekdays: 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রবার_শনিবার'.split('_'), + weekdaysShort: 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্র_শনি'.split('_'), + weekdaysLetter: [] + }, + bo: { + months: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'), + monthsShort: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'), + weekdays: 'གཟའ་ཉི་མ་_གཟའ་ཟླ་བ་_གཟའ་མིག་དམར་_གཟའ་ལྷག་པ་_གཟའ་ཕུར་བུ_གཟའ་པ་སངས་_གཟའ་སྤེན་པ་'.split('_'), + weekdaysShort: 'ཉི་མ་_ཟླ་བ་_མིག་དམར་_ལྷག་པ་_ཕུར་བུ_པ་སངས་_སྤེན་པ་'.split('_'), + weekdaysLetter: [] + }, + br: { + months: 'Genver_C\'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu'.split('_'), + monthsShort: 'Gen_C\'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker'.split('_'), + weekdays: 'Sul_Lun_Meurzh_Merc\'her_Yaou_Gwener_Sadorn'.split('_'), + weekdaysShort: 'Sul_Lun_Meu_Mer_Yao_Gwe_Sad'.split('_'), + weekdaysLetter: [] + }, + bs: { + months: 'januar_februar_mart_april_maj_juni_juli_august_septembar_oktobar_novembar_decembar'.split('_'), + monthsShort: 'jan._feb._mar._apr._maj._jun._jul._aug._sep._okt._nov._dec.'.split('_'), + weekdays: 'nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota'.split('_'), + weekdaysShort: 'ned._pon._uto._sri._čet._pet._sub.'.split('_'), + weekdaysLetter: [] + }, + ca: { + months: 'gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre'.split('_'), + monthsShort: 'gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.'.split('_'), + weekdays: 'diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte'.split('_'), + weekdaysShort: 'dg._dl._dt._dc._dj._dv._ds.'.split('_'), + weekdaysLetter: 'Dg_Dl_Dt_Dc_Dj_Dv_Ds'.split('_') + }, + gl: { + months: 'Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro'.split('_'), + monthsShort: 'Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.'.split('_'), + weekdays: 'Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado'.split('_'), + weekdaysShort: 'Dom._Lun._Mar._Mér._Xov._Ven._Sáb.'.split('_'), + weekdaysLetter: 'Do_Lu_Ma_Mé_Xo_Ve_Sá'.split('_') + }, + eu: { + months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'), + monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'), + weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'), + weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'), + weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_') + }, + pt: { + months: 'Janeiro_Fevereiro_Março_Abril_Maio_Junho_Julho_Agosto_Setembro_Outubro_Novembro_Dezembro'.split('_'), + monthsShort: 'Jan_Fev_Mar_Abr_Mai_Jun_Jul_Ago_Set_Out_Nov_Dez'.split('_'), + weekdays: 'Domingo_Segunda-Feira_Terça-Feira_Quarta-Feira_Quinta-Feira_Sexta-Feira_Sábado'.split('_'), + weekdaysShort: 'Dom_Seg_Ter_Qua_Qui_Sex_Sáb'.split('_'), + weekdaysLetter: [] + }, + it: { + months: 'gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre'.split('_'), + monthsShort: 'gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic'.split('_'), + weekdays: 'Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato'.split('_'), + weekdaysShort: 'Dom_Lun_Mar_Mer_Gio_Ven_Sab'.split('_'), + weekdaysLetter: [] + }, + fr: { + months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'), + monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'), + weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'), + weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'), + weekdaysLetter: [] + } +}; + const time = { getDaysInMonth (d) { const resultDate = this.getFirstDayOfMonth(d); @@ -18,68 +133,31 @@ const time = { return d.getHours() >= 12 ? 'pm' : 'am'; }, - getFullMonth (d) { + getFullMonth (d, locale = 'en') { const month = d.getMonth(); - switch (month) { - default: return 'Unknown'; - case 0: return 'January'; - case 1: return 'February'; - case 2: return 'March'; - case 3: return 'April'; - case 4: return 'May'; - case 5: return 'June'; - case 6: return 'July'; - case 7: return 'August'; - case 8: return 'September'; - case 9: return 'October'; - case 10: return 'November'; - case 11: return 'December'; - } + const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en; + return (l.hasOwnProperty('months')) ? l.months[month] || 'Unknown' : 'Unknown'; }, - getShortMonth (d) { + getShortMonth (d, locale = 'en') { const month = d.getMonth(); - switch (month) { - default: return 'Unknown'; - case 0: return 'Jan'; - case 1: return 'Feb'; - case 2: return 'Mar'; - case 3: return 'Apr'; - case 4: return 'May'; - case 5: return 'Jun'; - case 6: return 'Jul'; - case 7: return 'Aug'; - case 8: return 'Sep'; - case 9: return 'Oct'; - case 10: return 'Nov'; - case 11: return 'Dec'; - } + const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en; + return (l.hasOwnProperty('monthsShort')) ? l.monthsShort[month] || 'Unknown' : 'Unknown'; }, - getFullDayOfWeek (day) { - switch (day) { - default: return 'Unknown'; - case 0: return 'Sunday'; - case 1: return 'Monday'; - case 2: return 'Tuesday'; - case 3: return 'Wednesday'; - case 4: return 'Thursday'; - case 5: return 'Friday'; - case 6: return 'Saturday'; - } + getFullDayOfWeek (day, locale = 'en') { + const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en; + return (l.hasOwnProperty('weekdays')) ? l.weekdays[day] || 'Unknown' : 'Unknown'; }, - getShortDayOfWeek (day) { - switch (day) { - default: return 'Unknown'; - case 0: return 'Sun'; - case 1: return 'Mon'; - case 2: return 'Tue'; - case 3: return 'Wed'; - case 4: return 'Thu'; - case 5: return 'Fri'; - case 6: return 'Sat'; - } + getShortDayOfWeek (day, locale = 'en') { + const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en; + return (l.hasOwnProperty('weekdaysShort')) ? l.weekdaysShort[day] || 'Unknown' : 'Unknown'; + }, + + getDayOfWeekLetter (day, locale = 'en') { + const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en; + return (l.hasOwnProperty('weekdaysLetter')) ? l.weekdaysLetter[day] || this.getFullDayOfWeek(day, locale).charAt(0) : 'Unknown'; }, clone (d) { @@ -177,8 +255,12 @@ const time = { return ((minDate && !(date >= minDate)) || (maxDate && !(date <= maxDate))); }, - formatDate (date) { - return `${date.getDate()} ${time.getFullMonth(date)} ${date.getFullYear()}`; + formatDate (date, locale = 'en') { + if (locale === 'en') { + return `${date.getDate()} ${time.getFullMonth(date, locale)} ${date.getFullYear()}`; + } else { + return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`; + } } }; diff --git a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt index c42ef8b9..eebe5231 100644 --- a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt +++ b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt @@ -4,6 +4,14 @@ const max_datetime = new Date(new Date(datetime).setDate(24)); datetime.setHours(17); datetime.setMinutes(28); +const localeExample = { + months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'), + monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'), + weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'), + weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'), + weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_') +} + class DatePickerTest extends React.Component { state = {date2: datetime}; @@ -18,6 +26,21 @@ class DatePickerTest extends React.Component { label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} + sundayFirstDayOfWeek + /> + + + + `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} + sundayFirstDayOfWeek /> ); diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js index b401f2ea..caa09b83 100644 --- a/lib/date_picker/Calendar.js +++ b/lib/date_picker/Calendar.js @@ -132,7 +132,9 @@ var factory = function factory(IconButton) { onDayClick: this.handleDayClick, selectedDate: this.props.selectedDate, theme: this.props.theme, - viewDate: this.state.viewDate + viewDate: this.state.viewDate, + locale: this.props.locale, + sundayFirstDayOfWeek: this.props.sundayFirstDayOfWeek }) ) ); @@ -164,7 +166,9 @@ var factory = function factory(IconButton) { prev: _react.PropTypes.string, years: _react.PropTypes.string }), - viewDate: _react.PropTypes.object + viewDate: _react.PropTypes.object, + locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]), + sundayFirstDayOfWeek: _react2.default.PropTypes.bool }; Calendar.defaultProps = { display: 'months', diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js index 257880a1..03a1f9e3 100644 --- a/lib/date_picker/CalendarDay.js +++ b/lib/date_picker/CalendarDay.js @@ -41,8 +41,9 @@ var Day = function (_Component) { key: 'dayStyle', value: function dayStyle() { if (this.props.day === 1) { + var e = this.props.sundayFirstDayOfWeek ? 0 : 1; return { - marginLeft: _time2.default.getFirstWeekDay(this.props.viewDate) * 100 / 7 + '%' + marginLeft: (_time2.default.getFirstWeekDay(this.props.viewDate) - e) * 100 / 7 + '%' }; } } @@ -86,6 +87,7 @@ Day.propTypes = { day: _react.PropTypes.string, disabled: _react.PropTypes.string }), - viewDate: _react.PropTypes.object + viewDate: _react.PropTypes.object, + sundayFirstDayOfWeek: _react.PropTypes.bool }; exports.default = Day; \ No newline at end of file diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js index 4d874b57..9d1fd80f 100644 --- a/lib/date_picker/CalendarMonth.js +++ b/lib/date_picker/CalendarMonth.js @@ -24,6 +24,8 @@ var _CalendarDay2 = _interopRequireDefault(_CalendarDay); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } + 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; } @@ -52,31 +54,38 @@ var Month = function (_Component) { _createClass(Month, [{ key: 'renderWeeks', value: function renderWeeks() { - return _utils2.default.range(0, 7).map(function (i) { + var _this2 = this; + + var days = _utils2.default.range(0, 7).map(function (d) { + return _time2.default.getDayOfWeekLetter(d, _this2.props.locale); + }); + var source = this.props.sundayFirstDayOfWeek ? days : [].concat(_toConsumableArray(days.slice(1)), [days[0]]); + return source.map(function (d, i) { return _react2.default.createElement( 'span', { key: i }, - _time2.default.getFullDayOfWeek(i).charAt(0) + d ); }); } }, { key: 'renderDays', value: function renderDays() { - var _this2 = this; + var _this3 = this; return _utils2.default.range(1, _time2.default.getDaysInMonth(this.props.viewDate) + 1).map(function (i) { - var date = new Date(_this2.props.viewDate.getFullYear(), _this2.props.viewDate.getMonth(), i); - var disabled = _time2.default.dateOutOfRange(date, _this2.props.minDate, _this2.props.maxDate); + var date = new Date(_this3.props.viewDate.getFullYear(), _this3.props.viewDate.getMonth(), i); + var disabled = _time2.default.dateOutOfRange(date, _this3.props.minDate, _this3.props.maxDate); return _react2.default.createElement(_CalendarDay2.default, { key: i, day: i, disabled: disabled, - onClick: !disabled ? _this2.handleDayClick.bind(_this2, i) : null, - selectedDate: _this2.props.selectedDate, - theme: _this2.props.theme, - viewDate: _this2.props.viewDate + onClick: !disabled ? _this3.handleDayClick.bind(_this3, i) : null, + selectedDate: _this3.props.selectedDate, + theme: _this3.props.theme, + viewDate: _this3.props.viewDate, + sundayFirstDayOfWeek: _this3.props.sundayFirstDayOfWeek }); }); } @@ -89,7 +98,7 @@ var Month = function (_Component) { _react2.default.createElement( 'span', { className: this.props.theme.title }, - _time2.default.getFullMonth(this.props.viewDate), + _time2.default.getFullMonth(this.props.viewDate, this.props.locale), ' ', this.props.viewDate.getFullYear() ), @@ -121,6 +130,8 @@ Month.propTypes = { title: _react.PropTypes.string, week: _react.PropTypes.string }), - viewDate: _react.PropTypes.object + viewDate: _react.PropTypes.object, + locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]), + sundayFirstDayOfWeek: _react2.default.PropTypes.bool }; exports.default = Month; \ No newline at end of file diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js index 1956215c..67fbff06 100644 --- a/lib/date_picker/DatePicker.js +++ b/lib/date_picker/DatePicker.js @@ -104,15 +104,17 @@ var factory = function factory(Input, DatePickerDialog) { var inputFormat = _props.inputFormat; var maxDate = _props.maxDate; var minDate = _props.minDate; + var sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek; var onEscKeyDown = _props.onEscKeyDown; var onOverlayClick = _props.onOverlayClick; var value = _props.value; + var locale = _props.locale; - var others = _objectWithoutProperties(_props, ['autoOk', 'inputClassName', 'inputFormat', 'maxDate', 'minDate', 'onEscKeyDown', 'onOverlayClick', 'value']); + var others = _objectWithoutProperties(_props, ['autoOk', 'inputClassName', 'inputFormat', 'maxDate', 'minDate', 'sundayFirstDayOfWeek', 'onEscKeyDown', 'onOverlayClick', 'value', 'locale']); var finalInputFormat = inputFormat || _time2.default.formatDate; var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined; - var formattedDate = date === undefined ? '' : finalInputFormat(value); + var formattedDate = date === undefined ? '' : finalInputFormat(value, locale); return _react2.default.createElement( 'div', @@ -141,7 +143,9 @@ var factory = function factory(Input, DatePickerDialog) { onOverlayClick: onOverlayClick, onSelect: this.handleSelect, theme: this.props.theme, - value: date + value: date, + locale: locale, + sundayFirstDayOfWeek: sundayFirstDayOfWeek }) ); } @@ -168,7 +172,13 @@ var factory = function factory(Input, DatePickerDialog) { theme: _react.PropTypes.shape({ input: _react.PropTypes.string }), - value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string]) + value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string]), + locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]), + sundayFirstDayOfWeek: _react2.default.PropTypes.bool + }; + DatePicker.defaultProps = { + locale: 'en', + sundayFirstDayOfWeek: false }; diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js index 70fa63c2..dfed2658 100644 --- a/lib/date_picker/DatePickerDialog.js +++ b/lib/date_picker/DatePickerDialog.js @@ -106,9 +106,9 @@ var factory = function factory(Dialog, Calendar) { _react2.default.createElement( 'h3', { className: theme.date, onClick: this.handleSwitchDisplay.bind(this, 'months') }, - _time2.default.getShortDayOfWeek(this.state.date.getDay()), + _time2.default.getShortDayOfWeek(this.state.date.getDay(), this.props.locale), ', ', - _time2.default.getShortMonth(this.state.date), + _time2.default.getShortMonth(this.state.date, this.props.locale), ' ', this.state.date.getDate() ) @@ -122,7 +122,9 @@ var factory = function factory(Dialog, Calendar) { minDate: this.props.minDate, onChange: this.handleCalendarChange, selectedDate: this.state.date, - theme: this.props.theme }) + theme: this.props.theme, + locale: this.props.locale, + sundayFirstDayOfWeek: this.props.sundayFirstDayOfWeek }) ) ); } @@ -152,7 +154,9 @@ var factory = function factory(Dialog, Calendar) { year: _react.PropTypes.string, yearsDisplay: _react.PropTypes.string }), - value: _react.PropTypes.object + value: _react.PropTypes.object, + locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]), + sundayFirstDayOfWeek: _react2.default.PropTypes.bool }; CalendarDialog.defaultProps = { active: false, diff --git a/lib/utils/time.js b/lib/utils/time.js index b4b7b5ed..44d6249b 100644 --- a/lib/utils/time.js +++ b/lib/utils/time.js @@ -3,6 +3,121 @@ Object.defineProperty(exports, "__esModule", { value: true }); +var dateLocales = { + en: { + months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'), + monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'), + weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'), + weekdaysShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'), + weekdaysLetter: [] + }, + es: { + months: 'enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre'.split('_'), + monthsShort: 'ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic'.split('_'), + weekdays: 'domingo_lunes_martes_miércoles_jueves_viernes_sábado'.split('_'), + weekdaysShort: 'dom._lun._mar._mié._jue._vie._sáb.'.split('_'), + weekdaysLetter: 'D_L_M_X_J_V_S'.split('_') + }, + af: { + months: 'Januarie_Februarie_Maart_April_Mei_Junie_Julie_Augustus_September_Oktober_November_Desember'.split('_'), + monthsShort: 'Jan_Feb_Mrt_Apr_Mei_Jun_Jul_Aug_Sep_Okt_Nov_Des'.split('_'), + weekdays: 'Sondag_Maandag_Dinsdag_Woensdag_Donderdag_Vrydag_Saterdag'.split('_'), + weekdaysShort: 'Son_Maa_Din_Woe_Don_Vry_Sat'.split('_'), + weekdaysLetter: [] + }, + ar: { + months: ['كانون الثاني يناير', 'شباط فبراير', 'آذار مارس', 'نيسان أبريل', 'أيار مايو', 'حزيران يونيو', 'تموز يوليو', 'آب أغسطس', 'أيلول سبتمبر', 'تشرين الأول أكتوبر', 'تشرين الثاني نوفمبر', 'كانون الأول ديسمبر'], + monthsShort: ['كانون الثاني يناير', 'شباط فبراير', 'آذار مارس', 'نيسان أبريل', 'أيار مايو', 'حزيران يونيو', 'تموز يوليو', 'آب أغسطس', 'أيلول سبتمبر', 'تشرين الأول أكتوبر', 'تشرين الثاني نوفمبر', 'كانون الأول ديسمبر'], + weekdays: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split('_'), + weekdaysShort: 'أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت'.split('_'), + weekdaysLetter: [] + }, + be: { + months: 'студзень_люты_сакавік_красавік_травень_чэрвень_ліпень_жнівень_верасень_кастрычнік_лістапад_снежань'.split('_'), + monthsShort: 'студ_лют_сак_крас_трав_чэрв_ліп_жнів_вер_каст_ліст_снеж'.split('_'), + weekdays: 'нядзеля_панядзелак_аўторак_серада_чацвер_пятніца_субота'.split('_'), + weekdaysShort: 'нд_пн_ат_ср_чц_пт_сб'.split('_'), + weekdaysLetter: [] + }, + bg: { + months: 'януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември'.split('_'), + monthsShort: 'янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек'.split('_'), + weekdays: 'неделя_понеделник_вторник_сряда_четвъртък_петък_събота'.split('_'), + weekdaysShort: 'нед_пон_вто_сря_чет_пет_съб'.split('_'), + weekdaysLetter: [] + }, + bn: { + months: 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split('_'), + monthsShort: 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split('_'), + weekdays: 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রবার_শনিবার'.split('_'), + weekdaysShort: 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্র_শনি'.split('_'), + weekdaysLetter: [] + }, + bo: { + months: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'), + monthsShort: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'), + weekdays: 'གཟའ་ཉི་མ་_གཟའ་ཟླ་བ་_གཟའ་མིག་དམར་_གཟའ་ལྷག་པ་_གཟའ་ཕུར་བུ_གཟའ་པ་སངས་_གཟའ་སྤེན་པ་'.split('_'), + weekdaysShort: 'ཉི་མ་_ཟླ་བ་_མིག་དམར་_ལྷག་པ་_ཕུར་བུ_པ་སངས་_སྤེན་པ་'.split('_'), + weekdaysLetter: [] + }, + br: { + months: 'Genver_C\'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu'.split('_'), + monthsShort: 'Gen_C\'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker'.split('_'), + weekdays: 'Sul_Lun_Meurzh_Merc\'her_Yaou_Gwener_Sadorn'.split('_'), + weekdaysShort: 'Sul_Lun_Meu_Mer_Yao_Gwe_Sad'.split('_'), + weekdaysLetter: [] + }, + bs: { + months: 'januar_februar_mart_april_maj_juni_juli_august_septembar_oktobar_novembar_decembar'.split('_'), + monthsShort: 'jan._feb._mar._apr._maj._jun._jul._aug._sep._okt._nov._dec.'.split('_'), + weekdays: 'nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota'.split('_'), + weekdaysShort: 'ned._pon._uto._sri._čet._pet._sub.'.split('_'), + weekdaysLetter: [] + }, + ca: { + months: 'gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre'.split('_'), + monthsShort: 'gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.'.split('_'), + weekdays: 'diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte'.split('_'), + weekdaysShort: 'dg._dl._dt._dc._dj._dv._ds.'.split('_'), + weekdaysLetter: 'Dg_Dl_Dt_Dc_Dj_Dv_Ds'.split('_') + }, + gl: { + months: 'Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro'.split('_'), + monthsShort: 'Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.'.split('_'), + weekdays: 'Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado'.split('_'), + weekdaysShort: 'Dom._Lun._Mar._Mér._Xov._Ven._Sáb.'.split('_'), + weekdaysLetter: 'Do_Lu_Ma_Mé_Xo_Ve_Sá'.split('_') + }, + eu: { + months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'), + monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'), + weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'), + weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'), + weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_') + }, + pt: { + months: 'Janeiro_Fevereiro_Março_Abril_Maio_Junho_Julho_Agosto_Setembro_Outubro_Novembro_Dezembro'.split('_'), + monthsShort: 'Jan_Fev_Mar_Abr_Mai_Jun_Jul_Ago_Set_Out_Nov_Dez'.split('_'), + weekdays: 'Domingo_Segunda-Feira_Terça-Feira_Quarta-Feira_Quinta-Feira_Sexta-Feira_Sábado'.split('_'), + weekdaysShort: 'Dom_Seg_Ter_Qua_Qui_Sex_Sáb'.split('_'), + weekdaysLetter: [] + }, + it: { + months: 'gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre'.split('_'), + monthsShort: 'gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic'.split('_'), + weekdays: 'Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato'.split('_'), + weekdaysShort: 'Dom_Lun_Mar_Mer_Gio_Ven_Sab'.split('_'), + weekdaysLetter: [] + }, + fr: { + months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'), + monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'), + weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'), + weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'), + weekdaysLetter: [] + } +}; + var time = { getDaysInMonth: function getDaysInMonth(d) { var resultDate = this.getFirstDayOfMonth(d); @@ -20,106 +135,36 @@ var time = { return d.getHours() >= 12 ? 'pm' : 'am'; }, getFullMonth: function getFullMonth(d) { + var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1]; + var month = d.getMonth(); - switch (month) { - default: - return 'Unknown'; - case 0: - return 'January'; - case 1: - return 'February'; - case 2: - return 'March'; - case 3: - return 'April'; - case 4: - return 'May'; - case 5: - return 'June'; - case 6: - return 'July'; - case 7: - return 'August'; - case 8: - return 'September'; - case 9: - return 'October'; - case 10: - return 'November'; - case 11: - return 'December'; - } + var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en; + return l.hasOwnProperty('months') ? l.months[month] || 'Unknown' : 'Unknown'; }, getShortMonth: function getShortMonth(d) { + var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1]; + var month = d.getMonth(); - switch (month) { - default: - return 'Unknown'; - case 0: - return 'Jan'; - case 1: - return 'Feb'; - case 2: - return 'Mar'; - case 3: - return 'Apr'; - case 4: - return 'May'; - case 5: - return 'Jun'; - case 6: - return 'Jul'; - case 7: - return 'Aug'; - case 8: - return 'Sep'; - case 9: - return 'Oct'; - case 10: - return 'Nov'; - case 11: - return 'Dec'; - } + var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en; + return l.hasOwnProperty('monthsShort') ? l.monthsShort[month] || 'Unknown' : 'Unknown'; }, getFullDayOfWeek: function getFullDayOfWeek(day) { - switch (day) { - default: - return 'Unknown'; - case 0: - return 'Sunday'; - case 1: - return 'Monday'; - case 2: - return 'Tuesday'; - case 3: - return 'Wednesday'; - case 4: - return 'Thursday'; - case 5: - return 'Friday'; - case 6: - return 'Saturday'; - } + var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1]; + + var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en; + return l.hasOwnProperty('weekdays') ? l.weekdays[day] || 'Unknown' : 'Unknown'; }, getShortDayOfWeek: function getShortDayOfWeek(day) { - switch (day) { - default: - return 'Unknown'; - case 0: - return 'Sun'; - case 1: - return 'Mon'; - case 2: - return 'Tue'; - case 3: - return 'Wed'; - case 4: - return 'Thu'; - case 5: - return 'Fri'; - case 6: - return 'Sat'; - } + var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1]; + + var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en; + return l.hasOwnProperty('weekdaysShort') ? l.weekdaysShort[day] || 'Unknown' : 'Unknown'; + }, + getDayOfWeekLetter: function getDayOfWeekLetter(day) { + var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1]; + + var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en; + return l.hasOwnProperty('weekdaysLetter') ? l.weekdaysLetter[day] || this.getFullDayOfWeek(day, locale).charAt(0) : 'Unknown'; }, clone: function clone(d) { return new Date(d.getTime()); @@ -203,7 +248,13 @@ var time = { return minDate && !(date >= minDate) || maxDate && !(date <= maxDate); }, formatDate: function formatDate(date) { - return date.getDate() + ' ' + time.getFullMonth(date) + ' ' + date.getFullYear(); + var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1]; + + if (locale === 'en') { + return date.getDate() + ' ' + time.getFullMonth(date, locale) + ' ' + date.getFullYear(); + } else { + return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear(); + } } }; diff --git a/spec/components/pickers.js b/spec/components/pickers.js index 2a2f5f2e..6572af58 100644 --- a/spec/components/pickers.js +++ b/spec/components/pickers.js @@ -21,6 +21,14 @@ class PickersTest extends React.Component { this.setState(newState); }; + localeExample = { + months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'), + monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'), + weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'), + weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'), + weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_') + } + render () { return (
@@ -33,6 +41,21 @@ class PickersTest extends React.Component { onEscKeyDown={() => console.log('esc key down')} onOverlayClick={() => console.log('overlay click')} value={this.state.date1} + sundayFirstDayOfWeek + /> + + + + `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} + sundayFirstDayOfWeek />