Expected results
The default is this
But I hope that there will be a default today’s date, and the font color and style must also be modified (assuming today is 2023/10/6
Function implementation
There are quite a few pitfalls that I have stepped on, so I will record them here.
Official documentation
According to the official instructions, just bind a string to v-model.
Get the current time in js
Use
Date()to return today’s date and pass it to v-model.
Because the second selector has a start and end date and needs to pass an array (containing 2 elements), so here we first define two times, sTime and eTime.
let isDate = new Date();
//Start time start
let sTime = `${<!-- -->isDate.getFullYear()}-${<!-- -->isDate.getMonth() + 1}-${<!-- -->isDate.getDate ()}`;
//end time end
let eTime = `${<!-- -->isDate.getFullYear()}-${<!-- -->isDate.getMonth() + 1}-${<!-- --> isDate.getDate () + 6}`;
//If your time selector is not accurate to hours, minutes and seconds, it just ends with year, month and day, then there is no need to add 00:00:00 23:59:59
sTime = `${<!-- -->sTime} 00:00:00`;
eTime = `${<!-- -->eTime} 23:59:59`;
console.log("sTime", sTime);
console.log("eTime", eTime);
const tt = [sTime, eTime];
Explain sentence by sentence
new Date() returns the current time
isDate.getFullYear()Returns today’s yearisDate.getMonth()Returns today’s monthNote that it starts from 0, so October, but returns 9, so rememberisDate.getMonth() + 1< /mark>isDate.getDate()Returns date
Bind in template
<el-date-picker
v-model="sTime"
type="date"
value-format="YYYY-MM-DD"
format="YYYY/MM/DD"
placeholder="Please select a closing date"
>
</el-date-picker>
<el-date-picker
v-model="tt"
type="daterange"
range-separator="-"
start-placeholder="start time"
end-placeholder="end time"
size="default"
popper-class="data-picker"
value-format="YYYY-MM-DD"
/>
Error: October 1st is always displayed
However, today’s date is not displayed, it is strangely displayed as 10/01, but the obtained sTime and eTime are both correct.
Later, compared with other chestnuts, I found that the normal display is
In other words, my date and month were not filled with zeros, so the error was recognized and the date on the 1st was bound to me by default (I thought it was haunted, and without initialization, a 10/01 appeared on its own.
Correction: Month and date are automatically filled with zeros
var date = new Date();
const year = date.getFullYear();
// Note that the month starts from 0, + 1
const month = (date.getMonth() + 1).toString().padStart(2, "0"); // Zero padding to ensure two digits
const day = date.getDate().toString().padStart(2, "0"); // Also zero-padded
let day2 = date.getDate() + 10;
day2 = day2.toString().padStart(2, "0"); // Also pad with zeros
// You don’t need to write the time
const hour = " 00:00:00";
const collectDate1 = `${<!-- -->year}-${<!-- -->month}-${<!-- -->day}${<!-- -->hour} `;
console.log("collectDate1", collectDate1, typeof collectDate1);
const collectDate2 = `${<!-- -->year}-${<!-- -->month}-${<!-- -->day2}${<!-- -->hour} `;
console.log("collectDate2", collectDate2, typeof collectDate2);
const obj = [collectDate1, collectDate2];
<el-date-picker
v-model="collectDate1"
type="date"
value-format="YYYY-MM-DD"
format="YYYY/MM/DD"
placeholder="Please select a closing date"
>
</el-date-picker>
<el-date-picker
v-model="obj"
type="daterange"
range-separator="-"
start-placeholder="start time"
end-placeholder="end time"
size="default"
popper-class="data-picker"
value-format="YYYY-MM-DD"
/>
achieve desired results
Or if the date is specified, you can just pass the string directly.
const hh = ["2023-06-07", "2023-10-09"];
<el-date-picker
v-model="hh"
type="daterange"
range-separator="-"
start-placeholder="start time"
end-placeholder="end time"
size="default"
popper-class="data-picker"
value-format="YYYY-MM-DD"
/>
Style implementation
:deep(.el-date-editor) {<!-- -->
width: 300px;
height: 60px;
border: none;
background-color: #e498ce;
/* border: 3px solid rgb(47, 162, 24); */
}
:deep(.el-input__wrapper) {<!-- -->
background-color: #b2ba56;
border: 3px solid white;
}
:deep(.el-input) {<!-- -->
/* border: 3px solid white; */
}
:deep(.el-icon),
:deep(.el-input__icon) {<!-- -->
color: blue;
}
:deep(.el-input__inner) {<!-- -->
color: rgb(206, 206, 59);
}
If individual styles cannot be modified, you need to remove scoped and change the style to global;
There is also a reference in App.vue or style
There is another mistake, that is, the month is always 02, but now it is clearly October, which is very confusing.
Comparing the codes, I found that I made the wrong capitalization.
Perfect
I found that although the above can display the default, it is not easy to use after selecting it in the calendar, as if the data is dead, so for responsiveness, use ref, and change const to let
const hh = ref(["2023-06-07", "2023-10-09"]);
var date = new Date();
let year = date.getFullYear();
// Note that the month starts from 0, + 1
let month = (date.getMonth() + 1).toString().padStart(2, "0"); // Pad with zeros to ensure two digits
let day = date.getDate().toString().padStart(2, "0"); // Also pad with zeros
let day2 = date.getDate() + 10;
day2 = day2.toString().padStart(2, "0"); // Also pad with zeros
// You don’t need to write the time
let hour = " 00:00:00";
let collectDate1 = ref(`${<!-- -->year}-${<!-- -->month}-${<!-- -->day}${<!-- --> hour}`);
console.log("collectDate1", collectDate1.value, typeof collectDate1.value);
let collectDate2 = `${<!-- -->year}-${<!-- -->month}-${<!-- -->day2}${<!-- -->hour} `;
console.log("collectDate2", collectDate2, typeof collectDate2);
After adding watch monitoring, you can get the time after selection.
watch(
() => collectDate1,
() => {<!-- -->
console.log("watch monitor collectDate1", collectDate1.value);
},
{<!-- -->
deep: true,
immediate: true,
}
);
