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

Merge and solve conflicts

old
Javi Velasco 2016-08-07 13:43:07 +02:00
parent 55272ff145 157c29d8ff
commit e7735e5236
16 changed files with 563 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/date_picker/Calendar.js
View File

@ -11,10 +11,15 @@ const factory = (IconButton) => {
class Calendar extends Component {
static propTypes = {
display: PropTypes.oneOf(['months', 'years']),
locale: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.object
]),
maxDate: PropTypes.object,
minDate: PropTypes.object,
onChange: PropTypes.func,
selectedDate: PropTypes.object,
sundayFirstDayOfWeek: React.PropTypes.bool,
theme: PropTypes.shape({
active: PropTypes.string,
calendar: PropTypes.string,
@ -92,10 +97,12 @@ const factory = (IconButton) => {
<CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
<CalendarMonth
key={this.state.viewDate.getMonth()}
locale={this.props.locale}
maxDate={this.props.maxDate}
minDate={this.props.minDate}
onDayClick={this.handleDayClick}
selectedDate={this.props.selectedDate}
sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
theme={this.props.theme}
viewDate={this.state.viewDate}
/>

4
components/date_picker/CalendarDay.js
View File

@ -8,6 +8,7 @@ class Day extends Component {
disabled: PropTypes.bool,
onClick: PropTypes.func,
selectedDate: PropTypes.object,
sundayFirstDayOfWeek: PropTypes.bool,
theme: PropTypes.shape({
active: PropTypes.string,
day: PropTypes.string,
@ -18,8 +19,9 @@ class Day extends Component {
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}%`
};
}
}

14
components/date_picker/CalendarMonth.js
View File

@ -5,10 +5,15 @@ import CalendarDay from './CalendarDay.js';
class Month extends Component {
static propTypes = {
locale: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.object
]),
maxDate: PropTypes.object,
minDate: PropTypes.object,
onDayClick: PropTypes.func,
selectedDate: PropTypes.object,
sundayFirstDayOfWeek: React.PropTypes.bool,
theme: PropTypes.shape({
days: PropTypes.string,
month: PropTypes.string,
@ -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>

19
components/date_picker/DatePicker.js
View File

@ -24,6 +24,10 @@ const factory = (Input, DatePickerDialog) => {
inputClassName: PropTypes.string,
inputFormat: PropTypes.func,
label: PropTypes.string,
locale: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.object
]),
maxDate: PropTypes.object,
minDate: PropTypes.object,
name: PropTypes.string,
@ -32,6 +36,7 @@ const factory = (Input, DatePickerDialog) => {
onKeyPress: PropTypes.func,
onOverlayClick: PropTypes.func,
readonly: PropTypes.bool,
sundayFirstDayOfWeek: React.PropTypes.bool,
theme: PropTypes.shape({
input: PropTypes.string
}),
@ -41,6 +46,11 @@ const factory = (Input, DatePickerDialog) => {
])
};
static defaultProps = {
locale: 'en',
sundayFirstDayOfWeek: false
};
state = {
active: false
};
@ -78,11 +88,12 @@ const factory = (Input, DatePickerDialog) => {
};
render () {
const { autoOk, inputClassName, inputFormat, maxDate, minDate,
onEscKeyDown, onOverlayClick, readonly, value, ...others } = this.props;
const { autoOk, inputClassName, inputFormat, locale, maxDate, minDate,
onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
...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'>
@ -105,6 +116,7 @@ const factory = (Input, DatePickerDialog) => {
active={this.state.active}
autoOk={autoOk}
className={this.props.className}
locale={locale}
maxDate={maxDate}
minDate={minDate}
name={this.props.name}
@ -112,6 +124,7 @@ const factory = (Input, DatePickerDialog) => {
onEscKeyDown={onEscKeyDown}
onOverlayClick={onOverlayClick}
onSelect={this.handleSelect}
sundayFirstDayOfWeek={sundayFirstDayOfWeek}
theme={this.props.theme}
value={date}
/>

14
components/date_picker/DatePickerDialog.js
View File

@ -8,6 +8,10 @@ const factory = (Dialog, Calendar) => {
active: PropTypes.bool,
autoOk: PropTypes.bool,
className: PropTypes.string,
locale: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.object
]),
maxDate: PropTypes.object,
minDate: PropTypes.object,
name: PropTypes.string,
@ -15,6 +19,7 @@ const factory = (Dialog, Calendar) => {
onEscKeyDown: PropTypes.func,
onOverlayClick: PropTypes.func,
onSelect: PropTypes.func,
sundayFirstDayOfWeek: React.PropTypes.bool,
theme: PropTypes.shape({
button: PropTypes.string,
calendarWrapper: PropTypes.string,
@ -86,6 +91,9 @@ const factory = (Dialog, Calendar) => {
const display = `${this.state.display}Display`;
const className = classnames(theme.dialog, this.props.className);
const headerClassName = classnames(theme.header, theme[display]);
const shortDayOfWeek = time.getShortDayOfWeek(this.state.date.getDay(), this.props.locale);
const shortMonth = time.getShortMonth(this.state.date, this.props.locale);
const date = this.state.date.getDate();
return (
<Dialog
@ -101,7 +109,7 @@ const factory = (Dialog, Calendar) => {
{this.state.date.getFullYear()}
</span>
<h3 id='months' className={theme.date} onClick={this.handleSwitchDisplay}>
{time.getShortDayOfWeek(this.state.date.getDay())}, {time.getShortMonth(this.state.date)} {this.state.date.getDate()}
{shortDayOfWeek}, {shortMonth} {date}
</h3>
</header>
@ -112,7 +120,9 @@ const factory = (Dialog, Calendar) => {
minDate={this.props.minDate}
onChange={this.handleNewDate}
selectedDate={this.state.date}
theme={this.props.theme} />
theme={this.props.theme}
locale={this.props.locale}
sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek} />
</div>
</Dialog>
);

26
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};
@ -21,9 +29,11 @@ class DatePickerTest extends React.Component {
render () {
return (
<section>
<DatePicker label='Birthdate' 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} />
<DatePicker label='Birthdate' sundayFirstDayOfWeek 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' sundayFirstDayOfWeek minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
<DatePicker label='Formatted date' sundayFirstDayOfWeek inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
</section>
);
}
@ -34,19 +44,21 @@ 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. |
| `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. |
| `label` | `String` | | The text string to use for the floating label element in the input component.|
| `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). |
| `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.|
| `readonly` | `Boolean` | | The input element will be readonly and look like disabled.|
| `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)). |
| `value` | `Date` | | Date object with the currently selected date. |
## Theme

193
components/utils/time.js
View File

@ -1,3 +1,117 @@
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 +132,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) {
@ -186,8 +263,12 @@ const time = {
return diff1 < diff2 ? date1 : date2;
},
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>
);

4
lib/date_picker/Calendar.js
View File

@ -119,10 +119,12 @@ var factory = function factory(IconButton) {
{ transitionName: animation, transitionEnterTimeout: 350, transitionLeaveTimeout: 350 },
_react2.default.createElement(_CalendarMonth2.default, {
key: this.state.viewDate.getMonth(),
locale: this.props.locale,
maxDate: this.props.maxDate,
minDate: this.props.minDate,
onDayClick: this.handleDayClick,
selectedDate: this.props.selectedDate,
sundayFirstDayOfWeek: this.props.sundayFirstDayOfWeek,
theme: this.props.theme,
viewDate: this.state.viewDate
})
@ -145,10 +147,12 @@ var factory = function factory(IconButton) {
Calendar.propTypes = {
display: _react.PropTypes.oneOf(['months', 'years']),
locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
maxDate: _react.PropTypes.object,
minDate: _react.PropTypes.object,
onChange: _react.PropTypes.func,
selectedDate: _react.PropTypes.object,
sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
theme: _react.PropTypes.shape({
active: _react.PropTypes.string,
calendar: _react.PropTypes.string,

4
lib/date_picker/CalendarDay.js
View File

@ -53,8 +53,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 + '%'
};
}
}
@ -93,6 +94,7 @@ Day.propTypes = {
disabled: _react.PropTypes.bool,
onClick: _react.PropTypes.func,
selectedDate: _react.PropTypes.object,
sundayFirstDayOfWeek: _react.PropTypes.bool,
theme: _react.PropTypes.shape({
active: _react.PropTypes.string,
day: _react.PropTypes.string,

31
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: _this2.handleDayClick,
selectedDate: _this2.props.selectedDate,
theme: _this2.props.theme,
viewDate: _this2.props.viewDate
onClick: _this3.handleDayClick,
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()
),
@ -111,10 +120,12 @@ var Month = function (_Component) {
}(_react.Component);
Month.propTypes = {
locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
maxDate: _react.PropTypes.object,
minDate: _react.PropTypes.object,
onDayClick: _react.PropTypes.func,
selectedDate: _react.PropTypes.object,
sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
theme: _react.PropTypes.shape({
days: _react.PropTypes.string,
month: _react.PropTypes.string,

17
lib/date_picker/DatePicker.js
View File

@ -3,7 +3,7 @@
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DatePicker = exports.datePickerFactory = undefined;
exports.DatePicker = exports.datePickerFactory = exports.DatePickerDialog = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@ -108,18 +108,20 @@ var factory = function factory(Input, DatePickerDialog) {
var autoOk = _props.autoOk;
var inputClassName = _props.inputClassName;
var inputFormat = _props.inputFormat;
var locale = _props.locale;
var maxDate = _props.maxDate;
var minDate = _props.minDate;
var onEscKeyDown = _props.onEscKeyDown;
var onOverlayClick = _props.onOverlayClick;
var readonly = _props.readonly;
var sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek;
var value = _props.value;
var others = _objectWithoutProperties(_props, ['autoOk', 'inputClassName', 'inputFormat', 'maxDate', 'minDate', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
var others = _objectWithoutProperties(_props, ['autoOk', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
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',
@ -142,6 +144,7 @@ var factory = function factory(Input, DatePickerDialog) {
active: this.state.active,
autoOk: autoOk,
className: this.props.className,
locale: locale,
maxDate: maxDate,
minDate: minDate,
name: this.props.name,
@ -149,6 +152,7 @@ var factory = function factory(Input, DatePickerDialog) {
onEscKeyDown: onEscKeyDown,
onOverlayClick: onOverlayClick,
onSelect: this.handleSelect,
sundayFirstDayOfWeek: sundayFirstDayOfWeek,
theme: this.props.theme,
value: date
})
@ -167,6 +171,7 @@ var factory = function factory(Input, DatePickerDialog) {
inputClassName: _react.PropTypes.string,
inputFormat: _react.PropTypes.func,
label: _react.PropTypes.string,
locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
maxDate: _react.PropTypes.object,
minDate: _react.PropTypes.object,
name: _react.PropTypes.string,
@ -175,11 +180,16 @@ var factory = function factory(Input, DatePickerDialog) {
onKeyPress: _react.PropTypes.func,
onOverlayClick: _react.PropTypes.func,
readonly: _react.PropTypes.bool,
sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
theme: _react.PropTypes.shape({
input: _react.PropTypes.string
}),
value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string])
};
DatePicker.defaultProps = {
locale: 'en',
sundayFirstDayOfWeek: false
};
return DatePicker;
@ -190,5 +200,6 @@ var DatePickerDialog = (0, _DatePickerDialog2.default)(_Dialog2.default, Calenda
var DatePicker = factory(_Input2.default, DatePickerDialog);
exports.default = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER)(DatePicker);
exports.DatePickerDialog = DatePickerDialog;
exports.datePickerFactory = factory;
exports.DatePicker = DatePicker;

29
lib/date_picker/DatePickerDialog.js
View File

@ -44,10 +44,14 @@ var factory = function factory(Dialog, Calendar) {
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(CalendarDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
display: 'months',
date: _this.props.value
}, _this.handleCalendarChange = function (value, dayClick) {
}, _this.handleNewDate = function (value, dayClick) {
var state = { display: 'months', date: value };
if (_time2.default.dateOutOfRange(value, _this.props.minDate, _this.props.maxDate)) {
state.date = _this.props.maxDate || _this.props.minDate;
if (_this.props.maxDate && _this.props.minDate) {
state.date = _time2.default.closestDate(value, _this.props.maxDate, _this.props.minDate);
} else {
state.date = _this.props.maxDate || _this.props.minDate;
}
}
_this.setState(state);
if (dayClick && _this.props.autoOk && _this.props.onSelect) {
@ -59,9 +63,7 @@ var factory = function factory(Dialog, Calendar) {
_this.setState({ display: event.target.id });
}, _this.updateStateDate = function (date) {
if (Object.prototype.toString.call(date) === '[object Date]') {
_this.setState({
date: date
});
_this.handleNewDate(date, false);
}
}, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
}
@ -84,6 +86,9 @@ var factory = function factory(Dialog, Calendar) {
var display = this.state.display + 'Display';
var className = (0, _classnames2.default)(theme.dialog, this.props.className);
var headerClassName = (0, _classnames2.default)(theme.header, theme[display]);
var shortDayOfWeek = _time2.default.getShortDayOfWeek(this.state.date.getDay(), this.props.locale);
var shortMonth = _time2.default.getShortMonth(this.state.date, this.props.locale);
var date = this.state.date.getDate();
return _react2.default.createElement(
Dialog,
@ -106,11 +111,11 @@ var factory = function factory(Dialog, Calendar) {
_react2.default.createElement(
'h3',
{ id: 'months', className: theme.date, onClick: this.handleSwitchDisplay },
_time2.default.getShortDayOfWeek(this.state.date.getDay()),
shortDayOfWeek,
', ',
_time2.default.getShortMonth(this.state.date),
shortMonth,
' ',
this.state.date.getDate()
date
)
),
_react2.default.createElement(
@ -120,9 +125,11 @@ var factory = function factory(Dialog, Calendar) {
display: this.state.display,
maxDate: this.props.maxDate,
minDate: this.props.minDate,
onChange: this.handleCalendarChange,
onChange: this.handleNewDate,
selectedDate: this.state.date,
theme: this.props.theme })
theme: this.props.theme,
locale: this.props.locale,
sundayFirstDayOfWeek: this.props.sundayFirstDayOfWeek })
)
);
}
@ -135,6 +142,7 @@ var factory = function factory(Dialog, Calendar) {
active: _react.PropTypes.bool,
autoOk: _react.PropTypes.bool,
className: _react.PropTypes.string,
locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
maxDate: _react.PropTypes.object,
minDate: _react.PropTypes.object,
name: _react.PropTypes.string,
@ -142,6 +150,7 @@ var factory = function factory(Dialog, Calendar) {
onEscKeyDown: _react.PropTypes.func,
onOverlayClick: _react.PropTypes.func,
onSelect: _react.PropTypes.func,
sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
theme: _react.PropTypes.shape({
button: _react.PropTypes.string,
calendarWrapper: _react.PropTypes.string,

96
lib/date_picker/__test__/index.spec.js Normal file
View File

@ -0,0 +1,96 @@
'use strict';
var _expect = require('expect');
var _expect2 = _interopRequireDefault(_expect);
var _theme = require('../theme.scss');
var _theme2 = _interopRequireDefault(_theme);
var _DatePicker = require('../DatePicker');
var _testing = require('../../utils/testing');
var _testing2 = _interopRequireDefault(_testing);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
describe('DatePickerDialog', function () {
describe('#on mount', function () {
it('passes value through to calendar if no maxDate/minDate specified', function () {
var value = new Date(2016, 1, 1);
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value });
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
});
describe('when minDate but not maxDate specified', function () {
var minDate = new Date(2016, 1, 2);
it('passes through a value after minDate', function () {
var value = new Date(2016, 1, 3);
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, minDate: minDate });
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
});
it('sanitises a value before minDate to minDate', function () {
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
theme: _theme2.default, value: new Date(2016, 1, 1), minDate: minDate
});
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(minDate);
});
});
describe('when maxDate but not minDate specified', function () {
var maxDate = new Date(2016, 1, 2);
it('passes through a value before maxDate', function () {
var value = new Date(2016, 1, 1);
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, maxDate: maxDate });
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
});
it('sanitises a value after maxDate to maxDate', function () {
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
theme: _theme2.default, value: new Date(2016, 1, 3), maxDate: maxDate
});
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(maxDate);
});
});
describe('if both minDate and maxDate are set', function () {
var minDate = new Date(2016, 1, 2);
var maxDate = new Date(2016, 1, 4);
it('sanitises value to minDate if value is before minDate', function () {
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
theme: _theme2.default,
value: new Date(2016, 1, 1),
minDate: minDate,
maxDate: maxDate
});
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(minDate);
});
it('sanitises value to maxDate if value is after maxDate', function () {
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
theme: _theme2.default,
value: new Date(2016, 1, 5),
minDate: minDate,
maxDate: maxDate
});
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(maxDate);
});
it('doesn\'t sanitise when value is between maxDate/minDate', function () {
var value = new Date(2016, 1, 3);
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, minDate: minDate, maxDate: maxDate });
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
});
});
function getDatePassedToCalendar(wrapper) {
return wrapper.props.children[1].props.children.props.selectedDate;
}
});
});

244
lib/utils/time.js
View File

@ -3,6 +3,120 @@
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 +134,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());
@ -202,8 +246,22 @@ var time = {
dateOutOfRange: function dateOutOfRange(date, minDate, maxDate) {
return minDate && !(date >= minDate) || maxDate && !(date <= maxDate);
},
closestDate: function closestDate(to, date1, date2) {
var toTime = to.getTime();
var diff1 = Math.abs(toTime - date1.getTime());
var diff2 = Math.abs(toTime - date2.getTime());
return diff1 < diff2 ? date1 : date2;
},
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
@ -42,6 +65,7 @@ class PickersTest extends React.Component {
onChange={this.handleChange.bind(this, 'date2')}
readonly
value={this.state.date2}
sundayFirstDayOfWeek
/>
<DatePicker
@ -49,11 +73,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}
/>