html
<div class="date-picker">
<div class="scroll-container">
<div class="target-center"></div>
<div class="mask"></div>
<div class="wrapper year-wrapper">
<div class="scroll-wrapper">
<!-- 預(yù)留頂部和底部4個(等于200px)
<div class="item"></div>
<div class="item"></div>
<div class="item">2000</div>
<div class="item">2001</div>
<div class="item">2002</div>
<div class="item"></div>
<div class="item"></div> -->
</div>
</div>
</div>
<div class="scroll-container">
<div class="target-center"></div>
<div class="mask"></div>
<div class="wrapper month-wrapper">
<div class="scroll-wrapper">
</div>
</div>
</div>
<div class="scroll-container">
<div class="target-center"></div>
<div class="mask"></div>
<div class="wrapper day-wrapper">
<div class="scroll-wrapper">
</div>
</div>
</div>
</div>
ts
type typeCallback = (currentDate: number[]) => void;
interface IDatePicker {
getCurrentDate(): number[];
watch(callback: typeCallback): void;
}
enum DateMark {
YEAR = "YEAR",
MONTH = "MONTH",
DAY = "DAY",
}
class DatePicker {
private yearArr: number[];
private monthArr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
private dayArr: number[];
private currentDate: number[] = new Array<number>(3);
private callback: typeCallback;
private yearWrapper: HTMLElement = document.querySelector(".year-wrapper")!;
private monthWrapper: HTMLElement =
document.querySelector(".month-wrapper")!;
private dayWrapper: HTMLElement = document.querySelector(".day-wrapper")!;
constructor(yearArr: number[], currentDate: number[]) {
// 賦值年列
this.yearArr = yearArr;
this.currentDate = currentDate;
// 賦值日列 根據(jù)當(dāng)前年和月
this.dayArr = this.createDayArr(this.currentDate);
// 初始化3列
this.initDom();
// 綁定事件
this.bindEvent();
}
// 創(chuàng)建 天 數(shù)組
private createDayArr([year, month]: number[]): number[] {
const count = getDayCount(year, month);
const arr: number[] = [];
for (let i = 1; i <= count; i++) {
arr.push(i);
}
return arr;
}
private initDom() {
this.createItems(this.yearWrapper, this.yearArr);
this.createItems(this.monthWrapper, this.monthArr);
this.createItems(this.dayWrapper, this.dayArr);
this.initCurrentDate(this.currentDate);
}
// 初始化當(dāng)前時間的年月日初始高度
private initCurrentDate([year, month, day]: typeof this.currentDate) {
const yearIndex = this.yearArr.indexOf(year);
const monthIndex = this.monthArr.indexOf(month);
const dayIndex = this.dayArr.indexOf(day);
setScrollY(this.yearWrapper, yearIndex);
setScrollY(this.monthWrapper, monthIndex);
setScrollY(this.dayWrapper, dayIndex);
}
private bindEvent() {
this.yearWrapper.addEventListener(
"scrollend",
this.setCurrentDate.bind(this, this.yearWrapper, "YEAR"),
false
);
this.monthWrapper.addEventListener(
"scrollend",
this.setCurrentDate.bind(this, this.monthWrapper, "MONTH"),
false
);
this.dayWrapper.addEventListener(
"scrollend",
this.setCurrentDate.bind(this, this.dayWrapper, "DAY"),
false
);
}
private setCurrentDate(wrapper: HTMLElement, field: DateMark) {
// 根據(jù)滾動高度除以每條item50像素高度
const index = wrapper.scrollTop / 50;
if (field === DateMark.YEAR) {
this.currentDate[0] = this.yearArr[index];
this.dayArr = this.createDayArr(this.currentDate);
this.createItems(this.dayWrapper, this.dayArr);
this.callback && this.callback(this.currentDate);
}
if (field === DateMark.MONTH) {
this.currentDate[1] = this.monthArr[index];
this.dayArr = this.createDayArr(this.currentDate);
this.createItems(this.dayWrapper, this.dayArr);
this.callback && this.callback(this.currentDate);
}
if (field === DateMark.DAY) {
this.currentDate[2] = this.dayArr[index];
this.callback && this.callback(this.currentDate);
}
}
// 初始化列數(shù)據(jù) - 動態(tài)創(chuàng)建列數(shù)據(jù)
private createItems(wrapper: HTMLElement, arr: number[]) {
const frag = document.createDocumentFragment();
// 先創(chuàng)建2空的個item;
for (let i = 0; i < 2; i++) {
const item = createItem();
frag.appendChild(item);
}
arr.forEach((year) => {
const item = createItem();
item.innerText = year + "";
frag.appendChild(item);
});
// 后創(chuàng)建2空的個item;
for (let i = 0; i < 2; i++) {
const item = createItem();
frag.appendChild(item);
}
// 清空上一次創(chuàng)建的數(shù)據(jù)
const scrollWrapper = wrapper.querySelector(".scroll-wrapper")!;
scrollWrapper.innerHTML = "";
scrollWrapper.appendChild(frag);
}
// 獲取當(dāng)前日期
public getCurrentDate(): number[] {
return this.currentDate;
}
public watch(callback: typeCallback): void {
typeof callback === "function" && (this.callback = callback);
}
}
// 獲取多少天根據(jù)年和月抵恋；
function getDayCount(year: number, month: number): number {
return new Date(year, month, 0).getDate();
}
// 創(chuàng)建div元素
function createItem(): HTMLElement {
const item = document.createElement("div");
item.classList.add("item");
return item;
}
function setScrollY(wrapper: HTMLElement, index: number) {
wrapper.scrollTo(0, index * 50);
}
const datePicker = new DatePicker([2019, 2020, 2021], [2020, 2, 27]);
const getDate = datePicker.getCurrentDate();
console.log('獲取當(dāng)前選擇的日期：', getDate);
datePicker.watch((getDate)=>{
console.log('監(jiān)聽當(dāng)前選擇的日期：', getDate);
})
css
.date-picker{
display: flex;
flex-direction: row;
width: 100%;
height: 250px;
border: 1px solid black;
}
.scroll-container{
position: relative;
width: 100%;
height: 100%;
}
.scroll-container .wrapper{
overflow-y: auto;
height: 250px;
scroll-snap-type: y mandatory;
}
.wrapper .scroll-wrapper .item{
display: flex;
justify-content: center;
align-items: center;
height: 50px;
/* 滾動后吸附效果停在中間 */
scroll-snap-align: center;
}
/* 去除滾動條 */
::-webkit-scrollbar{
display: none;
}
.scroll-container .target-center{
position: absolute;
top: 100px;
left: 0;
z-index: -1;
width: 100%;
height: 50px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
box-sizing: border-box;
}
.scroll-container .mask{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
/* 設(shè)置可見清晰度 */
background-image: linear-gradient(
to top,
hsla(0, 0%, 100%, 1),
hsla(0, 0%, 100%, .8),
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, .8),
hsla(0, 0%, 100%, 1)
);
}
