{
defaultDate={now}
mode={props.mode}
locale={props.locale}
+ format={['month', 'day', 'year']}
/>
);
return (
diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx
index 2104a78..e38afaa 100644
--- a/src/DatePicker.tsx
+++ b/src/DatePicker.tsx
@@ -62,16 +62,24 @@ class DatePicker extends React.Component {
const { mode } = props;
let newValue = cloneDate(this.getDate());
if (mode === DATETIME || mode === DATE || mode === YEAR || mode === MONTH) {
- switch (index) {
+ let type = index;
+ const formatArray = this.getFormatArray();
+ if ( formatArray.length >= 1 && (index + 1 <= formatArray.length)) {
+ type = formatArray[index];
+ }
+ switch (type) {
case 0:
+ case 'year':
newValue.setFullYear(value);
break;
case 1:
+ case 'month':
// Note: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMonth
// e.g. from 2017-03-31 to 2017-02-28
setMonth(newValue, value);
break;
case 2:
+ case 'day':
newValue.setDate(value);
break;
case 3:
@@ -260,7 +268,15 @@ class DatePicker extends React.Component {
}
const monthCol = { key: 'month', props: { children: months } };
if (mode === MONTH) {
- return [yearCol, monthCol];
+ const formatArray = this.getFormatArray();
+ const dateSequence = formatArray.map((item) => {
+ if (item === 'year') {
+ return yearCol;
+ } else if (item === 'month') {
+ return monthCol;
+ }
+ });
+ return dateSequence;
}
const days: any[] = [];
@@ -280,11 +296,17 @@ class DatePicker extends React.Component {
label,
});
}
- return [
- yearCol,
- monthCol,
- { key: 'day', props: { children: days } },
- ];
+ const formatArray = this.getFormatArray();
+ const dateSequence = formatArray.map((item) => {
+ if (item === 'year') {
+ return yearCol;
+ } else if (item === 'month') {
+ return monthCol;
+ } else if (item === 'day') {
+ return { key: 'day', props: { children: days } };
+ }
+ });
+ return dateSequence;
}
getDisplayHour(rawHour) {
@@ -422,24 +444,23 @@ class DatePicker extends React.Component {
const date = this.getDate();
let cols: any[] = [];
let value: any[] = [];
-
if (mode === YEAR) {
return {
cols: this.getDateData(),
- value: [date.getFullYear() + ''],
+ value: this.formatValue(),
};
}
if (mode === MONTH) {
return {
cols: this.getDateData(),
- value: [date.getFullYear() + '', date.getMonth() + ''],
+ value: this.formatValue(),
};
}
if (mode === DATETIME || mode === DATE) {
cols = this.getDateData();
- value = [date.getFullYear() + '', date.getMonth() + '', date.getDate() + ''];
+ value = this.formatValue();
}
if (mode === DATETIME || mode === TIME) {
@@ -460,6 +481,38 @@ class DatePicker extends React.Component {
};
}
+ getFormatArray = () => {
+ const props = this.props;
+ const { mode, format = [] } = props;
+ let formatArray = format;
+ if (mode === DATETIME || mode === DATE) {
+ formatArray = formatArray.length === 3 ? formatArray : ['year', 'month', 'day'];
+ } else if (mode === MONTH) {
+ formatArray = formatArray.length === 2 ? formatArray : ['year', 'month'];
+ formatArray = formatArray.filter((item) => {
+ return item !== 'day';
+ });
+ } else if (mode === YEAR) {
+ formatArray = ['year'];
+ }
+ return formatArray;
+ }
+
+ formatValue = () => {
+ const formatArray = this.getFormatArray();
+ const date = this.getDate();
+ const values = formatArray.map((item) => {
+ if (item === 'year') {
+ return date.getFullYear() + '';
+ } else if (item === 'month') {
+ return date.getMonth() + '';
+ } else if (item === 'day') {
+ return date.getDate() + '';
+ }
+ });
+ return values;
+ }
+
render() {
const { value, cols } = this.getValueCols();
const {
diff --git a/src/IDatePickerProps.tsx b/src/IDatePickerProps.tsx
index 12723be..8485d3c 100644
--- a/src/IDatePickerProps.tsx
+++ b/src/IDatePickerProps.tsx
@@ -25,6 +25,7 @@ interface IDatePickerProps {
pickerPrefixCls?: string;
className?: string;
use12Hours?: boolean;
+ format?: string[];
}
export default IDatePickerProps;