{this.months.map(this.genMonth)}
diff --git a/src/calendar/test/__snapshots__/demo.spec.js.snap b/src/calendar/test/__snapshots__/demo.spec.js.snap
index 33cd782f9..2e5ac8a76 100644
--- a/src/calendar/test/__snapshots__/demo.spec.js.snap
+++ b/src/calendar/test/__snapshots__/demo.spec.js.snap
@@ -51,6 +51,10 @@ exports[`renders demo correctly 1`] = `
日期区间最大范围
diff --git a/src/calendar/test/prop.spec.js b/src/calendar/test/prop.spec.js
index 726e7dfef..3a8a8e183 100644
--- a/src/calendar/test/prop.spec.js
+++ b/src/calendar/test/prop.spec.js
@@ -191,3 +191,24 @@ test('month-show event', async () => {
expect(wrapper.emitted('month-show')).toBeTruthy();
});
+
+test('first day of week', async () => {
+ const wrapper = mount(Calendar, {
+ propsData: {
+ poppable: false,
+ defaultDate: new Date(2020, 7, 1),
+ maxDate: new Date(2020, 7, 30),
+ firstDayOfWeek: 2,
+ },
+ });
+
+ await later();
+
+ expect(wrapper.find('.van-calendar__weekdays').text()[0]).toEqual('二');
+
+ const day = wrapper.find(
+ '.van-calendar__month:first-of-type .van-calendar__day'
+ );
+ expect(day.text()).toEqual('1');
+ expect(day.attributes('style')).toContain(`margin-left: ${100 / 7}%`);
+});
diff --git a/src/cell/README.md b/src/cell/README.md
index 63e9248b5..e475fc1f0 100644
--- a/src/cell/README.md
+++ b/src/cell/README.md
@@ -95,7 +95,7 @@ Vue.use(CellGroup);
-
+
```
diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md
index d02da1172..f13bd478b 100644
--- a/src/cell/README.zh-CN.md
+++ b/src/cell/README.zh-CN.md
@@ -96,7 +96,7 @@ Vue.use(CellGroup);
-
+
```
diff --git a/src/cell/demo/index.vue b/src/cell/demo/index.vue
index f7b47398a..1769799fb 100644
--- a/src/cell/demo/index.vue
+++ b/src/cell/demo/index.vue
@@ -60,7 +60,10 @@
-
+
diff --git a/src/cell/test/__snapshots__/demo.spec.js.snap b/src/cell/test/__snapshots__/demo.spec.js.snap
index 20a039dac..b66a4b780 100644
--- a/src/cell/test/__snapshots__/demo.spec.js.snap
+++ b/src/cell/test/__snapshots__/demo.spec.js.snap
@@ -94,7 +94,7 @@ exports[`renders demo correctly 1`] = `
diff --git a/src/datetime-picker/DatePicker.js b/src/datetime-picker/DatePicker.js
index 9f2d20a54..6ee4ac6cd 100644
--- a/src/datetime-picker/DatePicker.js
+++ b/src/datetime-picker/DatePicker.js
@@ -83,20 +83,28 @@ export default createComponent({
},
];
- if (this.type === 'date') {
- result = result.slice(0, 3);
+ switch (this.type) {
+ case 'date':
+ result = result.slice(0, 3);
+ break;
+ case 'year-month':
+ result = result.slice(0, 2);
+ break;
+ case 'month-day':
+ result = result.slice(1, 3);
+ break;
+ case 'datehour':
+ result = result.slice(0, 4);
+ break;
}
- if (this.type === 'year-month') {
- result = result.slice(0, 2);
- }
-
- if (this.type === 'month-day') {
- result = result.slice(1, 3);
- }
-
- if (this.type === 'datehour') {
- result = result.slice(0, 4);
+ if (this.columnsOrder) {
+ const columnsOrder = this.columnsOrder.concat(
+ result.map((column) => column.type)
+ );
+ result.sort(
+ (a, b) => columnsOrder.indexOf(a.type) - columnsOrder.indexOf(b.type)
+ );
}
return result;
@@ -155,7 +163,13 @@ export default createComponent({
updateInnerValue() {
const { type } = this;
const indexes = this.getPicker().getIndexes();
- const getValue = (index) => {
+ const getValue = (type) => {
+ let index = 0;
+ this.originColumns.forEach((column, columnIndex) => {
+ if (type === column.type) {
+ index = columnIndex;
+ }
+ });
const { values } = this.originColumns[index];
return getTrueValue(values[indexes[index]]);
};
@@ -163,15 +177,14 @@ export default createComponent({
let year;
let month;
let day;
-
if (type === 'month-day') {
year = this.innerValue.getFullYear();
- month = getValue(0);
- day = getValue(1);
+ month = getValue('month');
+ day = getValue('day');
} else {
- year = getValue(0);
- month = getValue(1);
- day = type === 'year-month' ? 1 : getValue(2);
+ year = getValue('year');
+ month = getValue('month');
+ day = type === 'year-month' ? 1 : getValue('day');
}
const maxDay = getMonthEndDay(year, month);
@@ -181,12 +194,12 @@ export default createComponent({
let minute = 0;
if (type === 'datehour') {
- hour = getValue(3);
+ hour = getValue('hour');
}
if (type === 'datetime') {
- hour = getValue(3);
- minute = getValue(4);
+ hour = getValue('hour');
+ minute = getValue('minute');
}
const value = new Date(year, month - 1, day, hour, minute);
@@ -208,32 +221,23 @@ export default createComponent({
const value = this.innerValue;
const { formatter } = this;
- let values = [
- formatter('year', `${value.getFullYear()}`),
- formatter('month', padZero(value.getMonth() + 1)),
- formatter('day', padZero(value.getDate())),
- ];
-
- if (this.type === 'datetime') {
- values.push(
- formatter('hour', padZero(value.getHours())),
- formatter('minute', padZero(value.getMinutes()))
- );
- }
-
- if (this.type === 'datehour') {
- values.push(
- formatter('hour', padZero(value.getHours()))
- );
- }
-
- if (this.type === 'year-month') {
- values = values.slice(0, 2);
- }
-
- if (this.type === 'month-day') {
- values = values.slice(1, 3);
- }
+ const values = this.originColumns.map((column) => {
+ switch (column.type) {
+ case 'year':
+ return formatter('year', `${value.getFullYear()}`);
+ case 'month':
+ return formatter('month', padZero(value.getMonth() + 1));
+ case 'day':
+ return formatter('day', padZero(value.getDate()));
+ case 'hour':
+ return formatter('hour', padZero(value.getHours()));
+ case 'minute':
+ return formatter('minute', padZero(value.getMinutes()));
+ default:
+ // no default
+ return null;
+ }
+ });
this.$nextTick(() => {
this.getPicker().setValues(values);
diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md
index bd5539af8..bd27f1e51 100644
--- a/src/datetime-picker/README.md
+++ b/src/datetime-picker/README.md
@@ -208,6 +208,42 @@ export default {
};
```
+### Columns Order
+
+```html
+