vue自定義日曆元件(完美)

2021-10-09 13:04:44 字數 1506 閱讀 2373

廢話不多說,直接上**

created())

},methods: ,

// 選擇天

changeday(day,index)

this.day_idx = index

},// 獲取兩個時間段之間的年月

getmonthbetween(start,end)

this.months.push(str);

curr.setmonth(month+1);}},

// 為了獲得每個月的日期有多少,我們需要判斷 平年閏年[四年一閏,百年不閏,四百年再閏]

isleapyear (year) ,

// 獲得每個月的日期有多少,注意 month - [0-11]

getmonthcount (year, month) ,

// 3.獲得某年某月的 1號 是星期幾,這裡要注意的是 js 的 api-getday() 是從 [日-六](0-6),返回 number

getweekday (year, month),

// 4.獲得上個月的天數

getpremonthcount (year, month) else

},// 5.獲得下個月的天數

getnextmonthcount (year, month) else

},// 根據年月獲取天數

updatecalendar (months) = months,

currentmonth = this.getmonthcount(year, month),

premonth = this.getpremonthcount(year, month),

nextmonth = this.getnextmonthcount(year, month),

wheremonday = this.getweekday(year, month);

wheremonday = wheremonday === 0 ? 7 : wheremonday

// 上月

let prearr = premonth.slice(-1 * wheremonday);

prearr = this.setemptyarr(prearr.length);

// 下月

let nextarr = nextmonth.slice(0, 42 - currentmonth.length - wheremonday);

nextarr = this.setemptyarr(nextarr.length)

this.days = .concat(prearr, currentmonth, nextarr);

},// 除去前後月的天數

setemptyarr(len){

let arr=

for(let i=0; i 效果如圖:

Flutter 自定義日曆元件

顏色檔案和螢幕適配的檔案 可以自己給定 import package flutter cupertino.dart import package flutter rendering.dart import package flutter xiaoe utils screenutil.dart imp...

react 自定義日曆元件

基於hooks開發的自定義日曆元件,可以根據自己需要修改 params searchbar 搜尋引數 列表資料 description 修改請備註 location grey const main props 獲取當前年份 const getfullyear date date number con...

vue自定義元件,v model完美使用方式

當我們自定義form元件的時候,v mode是幾乎必須的,但v mode的正確寫法應該是怎樣呢?其實只要了解vue自定義元件保留的關鍵變數 value 和方法 input 就簡單很多了。我們定義了父子元件,並各自有自己的輸入框,父子的輸入框實現雙向繫結,效果如下 父元件 如下,插入了乙個自定義的子元...