Problem description
Time picker to select the date, month is common in the project, such as the query history, we need to select a specific date or send a request, get the history data. So we need to have some control over the time picker, such as the history query, so we can’t select the current date and the future date. So it is necessary to disable the current date and future date, this article records the corresponding code writing method.
The use of ele. me UI must use the official API, here we use picker-options and disabledDate to control, attached is the official document address link:
https://element.eleme.cn/#/zh…
Disabled Date Cases
rendering
The following code
<template bb0 <div id="app"> <el-date-picker format=" yyyy-mm-dd "value-format=" yyyy-mm-dd" type="date" placeholder=" v-model="dayDate" :picker-options="setDisabled" ></el-date-picker> </div> </template> <script> export default { data() { return { timer: null, dayDate: "", setDisabled: { disabledDate(time) { return time.getTime() > Date.now(); Return date.getTime () > date.now () -8.64e7; return date.getTime () -8.64e7; Return time.getTime() < date.now () -8.64e7; return time.getTime() < date.now () -8.64e7; // return time.getTime() < date.now (); return time.getTime() < date.now (); },},}; // You can't select historical day, current day, future day},},}; }, /* 8.64e7 is the scientific notation 8.64 times 10 to the seventh, which is 86400000, which is 1000*60*60*24, which is the number of milliseconds in a day. Because the date.now () method returns the number of milliseconds since January 1, 1970, 00:00:00(UTC) to the current time. Picker-options: "1970/01/01 08:00:00" picker-options requires a final Boolean value, so whether to subtract 8.64e7 from the current number of days */}; </script> <style lang="less" scoped> #app { width: 950px; height: 600px; box-sizing: border-box; margin: 50px; } </style>Disable date is simple, let’s talk about the disabled month, the disabled month needs to do a conversion and judgment on the date format
Disallowed Month Case
rendering
The following code
<template> <div id="app"> <el-date-picker v-model="value" format="yyyy-MM" value-format="yyyy-MM" type="month" Placeholder =" select monthdisabled ":picker-options="setMonthDisabled" > </el-date-picker> </div> </template> <script> export default { Data () {return {value: "", setMonthDisabled: {disabledDate(time) {// Get the current month information const Date = new Date(); // Tue Jul 20 2021 14:59:43 GMT+0800 (Chinese Standard Time) const year = date.getFullYear(); Let month = date.getMonth() + 1; let month = date.getMonth(); // Get the current month. The value looks like this: If (month >= 1 && month <= 9) {if (month >= 1 && month <= 9) {if (month >= 1 && month <= 9) {if (month >= 1 && month <= 9) { Month = "0" + month; } const nowDate = year.toString() + month.toString(); // const timeyear = time.getFullYear(); // const timeyear = time.getFullYear(); // let TimeMonth = Time.getMonth () + 1; If (timemonth >= 1 &&timemonth <= 9) {timemonth = "0" + timemonth; } const elTimeData = timeyear.toString() + timemonth.toString(); // DisabledDate isa control month; // DisabledDate isa control month; // DisabledDate isa control month; // DisabledDate isa control month; Return elTimeData <= nowDate; '202107' > '202008'},},}; '202107' > '202008'},},}; }, methods: {}, }; </script> <style lang="less" scoped> #app { width: 950px; height: 600px; box-sizing: border-box; margin: 50px; } </style>In fact, the way of writing is also diverse, welcome everyone to exchange learning, common progress