react 自定義日曆元件

2021-10-20 04:41:51 字數 1845 閱讀 9404

基於hooks開發的自定義日曆元件,可以根據自己需要修改;

* @params searchbar => 搜尋引數; => 列表資料

* @description 修改請備註 location-grey

*/const main = (props) =>

//獲取當前年份

const getfullyear = (date: date): number =>

const getcurrentmonthdays = (month: number, year: number): number =>

return month_days[month]

}//當前月第一天是週幾

const getdatebyyearmonth = (year: number, month: number, day: number = 1): date =>

const getweeksbyfirstday = (year: number, month: number): number =>

const getdaytext = (line: number, weekindex: number, weekday: number, monthdays: number): any =>

return

可約 }

const setcurrentyearmonth = (date) =>

const monthchange = (monthchanged: number) => else

var monthafter = month + monthchanged

var date = getdatebyyearmonth(year, monthafter)

setcurrentyearmonth(date)

}const formatnumber = (num: number): string => ` : `$`

}// let monthdays = getcurrentmonthdays(month);

let weekday = getweeksbyfirstday(year, month);

let _startx = 0;

return

if (_startx < val.changedtouches[0]['clientx'] - 30)

}} ontouchstart=}

>

}>

年 月}>})}

)}})}

}export default main;

index.scss

.loins-calendar 

&-title

.title-c

width: 100%;

.day-content

.desc }}}

自定義React元件

如果還沒有專案,請看建立umi專案 訪問http localhost 8000實際由src pages index.js渲染,內容為 export default function 使用antd新增乙個輸入框和乙個按鈕 import from antd export default function...

Flutter 自定義日曆元件

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

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

廢話不多說,直接上 created methods 選擇天 changeday day,index this.day idx index 獲取兩個時間段之間的年月 getmonthbetween start,end this.months.push str curr.setmonth month 1...