vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Added support for locale on DatePicker dialog component 

Updated components, docs and spec.
old
Abilio Almeida Eiroa 2016-08-01 13:21:32 +02:00
parent 0c53de91a3
commit 01ae580a32
15 changed files with 452 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/date_picker/Calendar.js
View File

@ -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}
/>
</CssTransitionGroup>
</div>

6
components/date_picker/CalendarDay.js
View File

@ -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}%`
};
}
}

16
components/date_picker/CalendarMonth.js
View File

@ -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 <span key={i}>{time.getFullDayOfWeek(i).charAt(0)}</span>;
});
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) => (<span key={i}>{d}</span>))
}
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 (
<div data-react-toolbox='month' className={this.props.theme.month}>
<span className={this.props.theme.title}>
{time.getFullMonth(this.props.viewDate)} {this.props.viewDate.getFullYear()}
{time.getFullMonth(this.props.viewDate, this.props.locale)} {this.props.viewDate.getFullYear()}
</span>
<div className={this.props.theme.week}>{this.renderWeeks()}</div>
<div className={this.props.theme.days}>{this.renderDays()}</div>

20
components/date_picker/DatePicker.js
View File

@ -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 (
<div data-react-toolbox='date-picker'>
@ -101,6 +111,8 @@ const factory = (Input, DatePickerDialog) => {
onSelect={this.handleSelect}
theme={this.props.theme}
value={date}
locale={locale}
sundayFirstDayOfWeek={sundayFirstDayOfWeek}
/>
</div>
);

13
components/date_picker/DatePickerDialog.js
View File

@ -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()}
</span>
<h3 className={theme.date} onClick={this.handleSwitchDisplay.bind(this, 'months')}>
{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()}
</h3>
</header>
@ -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} />
</div>
</Dialog>
);

20
components/date_picker/readme.md
View File

@ -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 (
<section>
<DatePicker label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
<DatePicker label='Locale (String) - Spanish' locale='es' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
<DatePicker label='Locale (Object) - Basque' locale={localeExample} onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
<DatePicker label='Expiration date' minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
<DatePicker label='Formatted date' inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
</section>
@ -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

194
components/utils/time.js
View File

@ -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()}`;
}
}
};

25
docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
View File

@ -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
/>
<DatePicker
label='Locale (String) - Spanish'
locale='es'
onChange={this.handleChange.bind(this, 'date1')}
value={this.state.date1}
/>
<DatePicker
label='Locale (Object) - Basque'
locale={localeExample}
onChange={this.handleChange.bind(this, 'date1')}
value={this.state.date1}
/>
<DatePicker
@ -25,6 +48,7 @@ class DatePickerTest extends React.Component {
minDate={min_datetime}
onChange={this.handleChange.bind(this, 'date2')}
value={this.state.date2}
sundayFirstDayOfWeek
/>
<DatePicker
@ -33,6 +57,7 @@ class DatePickerTest extends React.Component {
inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`}
onChange={this.handleChange.bind(this, 'date3')}
value={this.state.date3}
sundayFirstDayOfWeek
/>
</section>
);

8
lib/date_picker/Calendar.js
View File

@ -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',

6
lib/date_picker/CalendarDay.js
View File

@ -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;

33
lib/date_picker/CalendarMonth.js
View File

@ -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;

18
lib/date_picker/DatePicker.js
View File

@ -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
};

12
lib/date_picker/DatePickerDialog.js
View File

@ -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,

237
lib/utils/time.js
View File

@ -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();
}
}
};

26
spec/components/pickers.js
View File

@ -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 (
<section>
@ -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
/>
<DatePicker
label='With locale (string) - Spanish (string: en|es|af|ar|be|bg|bn|bo|br|bs|ca|gl|eu|pt|it|fr)'
locale='es'
onChange={this.handleChange.bind(this, 'date2')}
value={this.state.date2}
/>
<DatePicker
label='With locale (object) - Basque'
locale={this.localeExample}
onChange={this.handleChange.bind(this, 'date2')}
value={this.state.date2}
/>
<DatePicker
@ -41,6 +64,7 @@ class PickersTest extends React.Component {
minDate={min_datetime}
onChange={this.handleChange.bind(this, 'date2')}
value={this.state.date2}
sundayFirstDayOfWeek
/>
<DatePicker
@ -48,11 +72,13 @@ class PickersTest extends React.Component {
inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`}
onChange={this.handleChange.bind(this, 'date3')}
value={this.state.date3}
sundayFirstDayOfWeek
/>
<DatePicker
label='Auto Picker'
autoOk
sundayFirstDayOfWeek
onChange={this.handleChange.bind(this, 'date4')}
value={this.state.date4}
/>