momentjs實現(xiàn)DatePicker時間禁用的項目實踐
更新時間：2023年09月16日 10:36:40 作者：會做夢的辣條魚
momentjs是一個處理時間的js庫,簡潔易用,本文來介紹一下momentjs實現(xiàn)DatePicker時間禁用,具有一定的參考價值,感興趣的可以了解一下
momentjs是一個處理時間的js庫，簡潔易用。
淺析一下， momentjs 在vue中對DatePicker時間組件的禁用實踐。
一，npm下載
npm install moment --save
二，particles.json中
"dependencies": {
"axios": "^0.18.0",
"iview": "^3.4.0",
"moment": "^2.24.0",
"vue": "^2.5.10",
"vue-i18n": "^7.8.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},三，引入使用
1.main.js中引入
import 'moment/locale/zh-cn'
moment.locale('zh-cn');
Vue.prototype.$moment = moment;2.頁面或組件引入使用
import moment from "moment"
3.方法使用
moment().format('YYYY-MM-DD'); //獲取格式
moment().startOf('month') //獲取當月第一天
moment().endOf('month') //獲取當月最后一天
moment().subtract(7, 'days') //獲取前7天 moment().subtract(4,'month') //獲取前4個月
更多方法參考momentjs官網(wǎng)：momentjs
4.應(yīng)用實例
a,日期禁用
pickerStart: {
disabledDate(time) {
let startDate;
let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
if(today<4){
startDate=moment().subtract(5,'month').endOf('month').format('YYYY-MM-DD');
}
if(today>4||today==4){
startDate=moment().subtract(4,'month').endOf('month').format('YYYY-MM-DD');
}
return (
time && time.valueOf() < new Date(startDate).getTime() ||
time.valueOf() > new Date(endDate).getTime()
);
}
},
pickerEnd: {
disabledDate(time) {
let startDate;
let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
if(today<4){
startDate=moment().subtract(5,'month').endOf('month').format('YYYY-MM-DD');
}
if(today>4||today==4){
startDate=moment().subtract(4,'month').endOf('month').format('YYYY-MM-DD');
}
return (
time && time.valueOf() < new Date(startDate).getTime() ||
time.valueOf() > new Date(endDate).getTime()
);
},
},b,月份禁用
pickerStart: {
disabledDate(time) {
let startMonth;
let endMonth;
if(today<4){
startMonth=moment().subtract(5, "month").format("YYYY-MM");
endMonth=moment().subtract(2, "month").format("YYYY-MM");
}
if(today>4||today==4){
startMonth=moment().subtract(4, "month").format("YYYY-MM");
endMonth=moment().subtract(1, "month").format("YYYY-MM");
}
return (
time && time.valueOf() < new Date(startMonth).getTime() ||
time.valueOf() > new Date(endMonth).getTime()
);
}
},
pickerEnd: {
disabledDate(time) {
let startMonth;
let endMonth;
if(today<4){
startMonth=moment().subtract(5, "month").format("YYYY-MM");
endMonth=moment().subtract(2, "month").format("YYYY-MM");
}
if(today>4||today==4){
startMonth=moment().subtract(4, "month").format("YYYY-MM");
endMonth=moment().subtract(1, "month").format("YYYY-MM");
}
return (
time && time.valueOf() < new Date(startMonth).getTime() ||
time.valueOf() > new Date(endMonth).getTime()
);
},
},四，頁面效果
a，禁用月份
b，禁用日期
五，完整代碼
1，頁面查詢組件引用
a.引入
import DateSearch from "_c/date-search";
components: {DateSearch},
b.渲染
<date-search ref="dateSearch">
<span class="search-label">查詢時間</span>
</date-search>c.獲取時間
let {S_createTime_GTOE, S_createTime_LTOE} = this.$refs.dateSearch.getDateSearch();
this.queryParam.endTime =S_createTime_LTOE;
this.queryParam.startTime=S_createTime_GTOE;
2.時間組件
a.月份組件
<template>
<span>
<slot />
<FormItem>
<DatePicker
v-model="condition.S_createTime_GTOE"
confirm
clearable
placement="bottom-end"
class="search-input"
:type="type"
:format="format"
:options="pickerStart"
transfer
@on-change="onStartDateChange"
></DatePicker>
</FormItem>
<span class="search-label">至</span>
<FormItem>
<DatePicker
v-model="condition.S_createTime_LTOE"
confirm
clearable
placement="bottom-end"
:type="type"
:format="format"
class="search-input"
:options="pickerEnd"
transfer
@on-change="onEndDateChange"
></DatePicker>
</FormItem>
</span>
</template>
<script>
import { convertUTCTimeToMonth } from "@/libs/tools";
import moment from "moment"
export default {
props: {
format: {
type: String,
default: "yyyy-MM",
},
type: {
type: String,
default: "month",
},
defaultTime: {
type: Boolean,
default: true,
},
searchField: {
type: String,
default: "createTime",
},
},
data() {
const today= moment().format('DD');
return {
condition: {
S_createTime_GTOE: "",
S_createTime_LTOE: "",
},
pickerStart: {
disabledDate(time) {
let startMonth;
let endMonth;
if(today<4){
startMonth=moment().subtract(5, "month").format("YYYY-MM");
endMonth=moment().subtract(2, "month").format("YYYY-MM");
}
if(today>4||today==4){
startMonth=moment().subtract(4, "month").format("YYYY-MM");
endMonth=moment().subtract(1, "month").format("YYYY-MM");
}
return (
time && time.valueOf() < new Date(startMonth).getTime() ||
time.valueOf() > new Date(endMonth).getTime()
);
}
},
pickerEnd: {
disabledDate(time) {
let startMonth;
let endMonth;
if(today<4){
startMonth=moment().subtract(5, "month").format("YYYY-MM");
endMonth=moment().subtract(2, "month").format("YYYY-MM");
}
if(today>4||today==4){
startMonth=moment().subtract(4, "month").format("YYYY-MM");
endMonth=moment().subtract(1, "month").format("YYYY-MM");
}
return (
time && time.valueOf() < new Date(startMonth).getTime() ||
time.valueOf() > new Date(endMonth).getTime()
);
},
},
};
},
methods: {
getDateSearch() {
const defaultTime = this.defaultTime;
let valid = true;
let { S_createTime_GTOE, S_createTime_LTOE } = this.condition;
if (S_createTime_GTOE && typeof S_createTime_GTOE === "object") {
S_createTime_GTOE = convertUTCTimeToMonth(S_createTime_GTOE, true);
}
if (S_createTime_LTOE && typeof S_createTime_LTOE === "object") {
S_createTime_LTOE = convertUTCTimeToMonth(S_createTime_LTOE, true);
}
if (defaultTime) {
if (!S_createTime_GTOE) {
this.$Message.warning("查詢起始時間不能為空");
valid = false;
} else if (!S_createTime_LTOE) {
this.$Message.warning("查詢結(jié)束時間不能為空");
valid = false;
}
else if (S_createTime_LTOE < S_createTime_GTOE) {
this.$Message.warning("結(jié)束時間不能早于起始時間");
valid = false;
}
} else {
if (S_createTime_LTOE && S_createTime_LTOE < S_createTime_GTOE) {
this.$Message.warning("結(jié)束時間不能早于起始時間");
valid = false;
}
}
return {
valid,
[`S_${this.searchField}_GTOE`]: S_createTime_GTOE,
[`S_${this.searchField}_LTOE`]: S_createTime_LTOE,
};
},
onStartDateChange(date) {
this.condition.S_createTime_GTOE = date;
},
onEndDateChange(date) {
this.condition.S_createTime_LTOE = date;
},
getDefaultTime() {
let startMonth;
let endMonth;
let today= moment().format('DD'); //30
if(today<4){
startMonth=moment().subtract(4, "month").format("YYYY-MM");
endMonth=moment().subtract(2, "month").format("YYYY-MM");
}
if(today>4||today==4){
startMonth=moment().subtract(3, "month").format("YYYY-MM");
endMonth=moment().subtract(1, "month").format("YYYY-MM");
}
return [startMonth,endMonth]
},
resetDateSearch(){
if(this.defaultTime){
this.condition.S_createTime_GTOE = this.getDefaultTime()[0],
this.condition.S_createTime_LTOE = this.getDefaultTime()[1]
}else{
this.condition.S_createTime_GTOE = ""
this.condition.S_createTime_LTOE = ""
}
}
},
created() {
this.resetDateSearch();
},
};
</script>convertUTCTimeToMonth 方法
// 時間到月(年/月)
export const convertUTCTimeToMonth = (UTCDateString) => {
if (!UTCDateString) {
return '-'
}
function formatFunc (str) {
return str > 9 ? str : '0' + str
}
let date2 = new Date(UTCDateString)
let year = date2.getFullYear()
let mon = formatFunc(date2.getMonth() + 1)
let day = formatFunc(date2.getDate())
let hour = date2.getHours()
hour = formatFunc(hour)
let min = formatFunc(date2.getMinutes())
let second = formatFunc(date2.getSeconds())
let dateStr = year + '-' + mon
return dateStr
}
b.日期組件
<template>
<span>
<slot />
<FormItem>
<DatePicker
v-model="condition.S_createTime_GTOE"
confirm
clearable
placement="bottom-end"
class="search-input"
:type="type"
:format="format"
:options="pickerStart"
transfer
@on-change="onStartDateChange"
></DatePicker>
</FormItem>
<span class="search-label">至</span>
<FormItem>
<DatePicker
v-model="condition.S_createTime_LTOE"
confirm
clearable
placement="bottom-end"
:type="type"
:format="format"
class="search-input"
:options="pickerEnd"
transfer
@on-change="onEndDateChange"
></DatePicker>
</FormItem>
</span>
</template>
<script>
import { convertUTCTimeToDate } from "@/libs/tools";
import moment from "moment"
export default {
props: {
format: {
type: String,
default: "yyyy-MM-dd",
},
type: {
type: String,
default: "date",
},
defaultTime: {
type: Boolean,
default: true,
},
searchField: {
type: String,
default: "createTime",
},
},
data() {
const today= moment().format('DD');
return {
condition: {
S_createTime_GTOE: "",
S_createTime_LTOE: "",
},
pickerStart: {
disabledDate(time) {
let startDate;
let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
if(today<4){
startDate=moment().subtract(5,'month').endOf('month').format('YYYY-MM-DD');
}
if(today>4||today==4){
startDate=moment().subtract(4,'month').endOf('month').format('YYYY-MM-DD');
}
return (
time && time.valueOf() < new Date(startDate).getTime() ||
time.valueOf() > new Date(endDate).getTime()
);
}
},
pickerEnd: {
disabledDate(time) {
let startDate;
let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
if(today<4){
startDate=moment().subtract(5,'month').endOf('month').format('YYYY-MM-DD');
}
if(today>4||today==4){
startDate=moment().subtract(4,'month').endOf('month').format('YYYY-MM-DD');
}
return (
time && time.valueOf() < new Date(startDate).getTime() ||
time.valueOf() > new Date(endDate).getTime()
);
},
},
};
},
methods: {
getDateSearch() {
const defaultTime = this.defaultTime;
let valid = true;
let { S_createTime_GTOE, S_createTime_LTOE } = this.condition;
if (S_createTime_GTOE && typeof S_createTime_GTOE === "object") {
S_createTime_GTOE = convertUTCTimeToDate(S_createTime_GTOE, true);
}
if (S_createTime_LTOE && typeof S_createTime_LTOE === "object") {
S_createTime_LTOE = convertUTCTimeToDate(S_createTime_LTOE, true);
}
if (defaultTime) {
if (!S_createTime_GTOE) {
this.$Message.warning("查詢起始時間不能為空");
valid = false;
} else if (!S_createTime_LTOE) {
this.$Message.warning("查詢結(jié)束時間不能為空");
valid = false;
}
else if (S_createTime_LTOE < S_createTime_GTOE) {
this.$Message.warning("結(jié)束時間不能早于起始時間");
valid = false;
}
} else {
if (S_createTime_LTOE && S_createTime_LTOE < S_createTime_GTOE) {
this.$Message.warning("結(jié)束時間不能早于起始時間");
valid = false;
}
}
return {
valid,
[`S_${this.searchField}_GTOE`]: S_createTime_GTOE.split(" ")[0],
[`S_${this.searchField}_LTOE`]: S_createTime_LTOE.split(" ")[0],
};
},
onStartDateChange(date) {
this.condition.S_createTime_GTOE = date;
},
onEndDateChange(date) {
this.condition.S_createTime_LTOE = date;
},
getDefaultTime() {
let startDate;
let today= moment().format('DD'); //30
let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
if(today<4){
startDate=moment().subtract(4,'month').startOf('month').format('YYYY-MM-DD');
}
if(today>4||today==4){
startDate=moment().subtract(3,'month').startOf('month').format('YYYY-MM-DD');
}
return [startDate,endDate]
},
resetDateSearch(){
if(this.defaultTime){
this.condition.S_createTime_GTOE = this.getDefaultTime()[0],
this.condition.S_createTime_LTOE = this.getDefaultTime()[1]
}else{
this.condition.S_createTime_GTOE = ""
this.condition.S_createTime_LTOE = ""
}
}
},
created() {
this.resetDateSearch();
},
};
</script>convertUTCTimeToDate
// 時間到日期(年/月/日)
export const convertUTCTimeToDate = (UTCDateString) => {
if (!UTCDateString) {
return '-'
}
function formatFunc (str) {
return str > 9 ? str : '0' + str
}
let date2 = new Date(UTCDateString)
let year = date2.getFullYear()
let mon = formatFunc(date2.getMonth() + 1)
let day = formatFunc(date2.getDate())
let hour = date2.getHours()
hour = formatFunc(hour)
let min = formatFunc(date2.getMinutes())
let second = formatFunc(date2.getSeconds())
let dateStr = year + '-' + mon + '-' + day
return dateStr
}到此這篇關(guān)于momentjs實現(xiàn)DatePicker時間禁用的項目實踐的文章就介紹到這了,更多相關(guān)momentjs DatePicker時間禁用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
如何解決Webview和H5緩存問題確保每次加載最新版本的資源詳解
WebView在加載H5頁面時,可能會因為緩存機制導(dǎo)致用戶看到舊版本的頁面,這篇文章主要介紹了如何解決Webview和H5緩存問題確保每次加載最新版本的資源的相關(guān)資料,需要的朋友可以參考下2025-02-02
用js獲取當前網(wǎng)頁的網(wǎng)址，平時一直用location.href;下一篇我會把document.url和location.href對比一下2008-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)秒表計時器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
對JavaScript的eval()中使用函數(shù)的進一步討論
《JavaScript語言精髓與編程實踐》的讀者I22141提出了一問題：為什么下面這段代碼在JScript 和SpiderMonkey中表現(xiàn)不一樣：2008-07-07
這篇文章主要介紹了關(guān)于RxJS Subject的學習筆記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本篇主要簡單介紹了knockoutjs中最重要的概念：可觀察對象（數(shù)組）。非常不錯具有參考借鑒價值，感興趣的朋友快來圍觀吧2016-06-06
這篇文章主要為大家詳細介紹了js通過audioContext實現(xiàn)3D音效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
雖然很少會遇到給bind返回的函數(shù)做new操作的場景，但面試中還是會涉及到的，所以本文將實現(xiàn)一下兼容new操作的bind寫法，順便學習一下new操作符，需要的可以參考一下2022-07-07
這篇文章主要來和大家一起探討一下20?種?JavaScript?技巧和竅門,每種技巧和竅門都有通俗易懂的示例,讓我們一起來提升你的?JavaScript?技能吧2023-10-10
淺談類似于(function(){}).call()的js語句
這篇文章主要介紹了淺談類似于(function(){}).call()的js語句,的相關(guān)資料,需要的朋友可以參考下2015-03-03