Hufe
4 years ago
committed by
GitHub
commit
958629b512
@ -0,0 +1,31 @@
|
|||||||
|
import Editor from '../../../src/editor'
|
||||||
|
|
||||||
|
describe('菜单-日期选择器', () => {
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
cy.visit('http://localhost:3000/canvas-editor/')
|
||||||
|
|
||||||
|
cy.get('canvas').first().as('canvas').should('have.length', 1)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('LaTeX', () => {
|
||||||
|
cy.getEditor().then((editor: Editor) => {
|
||||||
|
editor.listener.saved = function (payload) {
|
||||||
|
const data = payload.data
|
||||||
|
|
||||||
|
expect(data[0].type).to.eq('date')
|
||||||
|
}
|
||||||
|
|
||||||
|
editor.command.executeSelectAll()
|
||||||
|
|
||||||
|
editor.command.executeBackspace()
|
||||||
|
|
||||||
|
cy.get('.menu-item__date').click()
|
||||||
|
|
||||||
|
cy.get('.menu-item__date li').first().click()
|
||||||
|
|
||||||
|
cy.get('@canvas').type('{ctrl}s')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
After Width: | Height: | Size: 276 B |
@ -0,0 +1,232 @@
|
|||||||
|
.date-container {
|
||||||
|
display: none;
|
||||||
|
width: 300px;
|
||||||
|
overflow: hidden;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
color: #606266;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
user-select: none;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-container.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-wrap {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-wrap.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
color: #606266;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-title>span {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-title>span:not(.date-title__now) {
|
||||||
|
font-family: cursive;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-title>span:not(.date-title__now):hover {
|
||||||
|
color: #5175F4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-title .date-title__pre-year {
|
||||||
|
width: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-title .date-title__pre-month {
|
||||||
|
width: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-title .date-title__now {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-title .date-title__next-year {
|
||||||
|
width: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-title .date-title__next-month {
|
||||||
|
width: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-week {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 15px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
border-bottom: 1px solid #e4e7ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-week>span {
|
||||||
|
list-style: none;
|
||||||
|
width: calc(100%/7);
|
||||||
|
text-align: center;
|
||||||
|
color: #606266;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-day {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-day>div {
|
||||||
|
width: calc(100%/7);
|
||||||
|
height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
color: #606266;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 40px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-day>div:hover {
|
||||||
|
color: #5175F4;
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-day>div.active {
|
||||||
|
color: #5175F4;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-day>div.disable {
|
||||||
|
color: #c0c4cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-day>div.select {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #5175F4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-wrap {
|
||||||
|
display: none;
|
||||||
|
padding: 10px;
|
||||||
|
height: 286px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-wrap ::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-wrap.active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-wrap li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-wrap>li {
|
||||||
|
width: 33.3%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-wrap>li>span {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-wrap>li>ol {
|
||||||
|
height: calc(100% - 20px);
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 1px solid #e2e2e2;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-wrap>li:first-child>ol {
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-wrap>li:last-child>ol {
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-wrap>li>ol>li {
|
||||||
|
line-height: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-wrap>li>ol>li:hover {
|
||||||
|
background-color: #eaeaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-wrap>li>ol>li.active {
|
||||||
|
color: #ffffff;
|
||||||
|
background: #5175F4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-menu {
|
||||||
|
width: 100%;
|
||||||
|
height: 28px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
position: relative;
|
||||||
|
border-top: 1px solid #e4e7ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-menu button {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
color: #606266;
|
||||||
|
appearance: none;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
outline: none;
|
||||||
|
margin: 0;
|
||||||
|
transition: .1s;
|
||||||
|
font-weight: 500;
|
||||||
|
user-select: none;
|
||||||
|
padding: 7px 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-menu button:hover {
|
||||||
|
color: #5175F4;
|
||||||
|
border-color: #5175F4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-menu button.date-menu__time {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-menu button.date-menu__time:hover {
|
||||||
|
color: #5175F4;
|
||||||
|
}
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
import { ElementType } from '../../../../dataset/enum/Element'
|
||||||
|
import { IElement, IElementPosition } from '../../../../interface/Element'
|
||||||
|
import { IRowElement } from '../../../../interface/Row'
|
||||||
|
import { RangeManager } from '../../../range/RangeManager'
|
||||||
|
import { Draw } from '../../Draw'
|
||||||
|
import { DatePicker } from './DatePicker'
|
||||||
|
|
||||||
|
export class DateParticle {
|
||||||
|
|
||||||
|
private draw: Draw
|
||||||
|
private range: RangeManager
|
||||||
|
private datePicker: DatePicker
|
||||||
|
|
||||||
|
constructor(draw: Draw) {
|
||||||
|
this.draw = draw
|
||||||
|
this.range = draw.getRange()
|
||||||
|
this.datePicker = new DatePicker({
|
||||||
|
mountDom: draw.getContainer(),
|
||||||
|
onSubmit: this._setValue.bind(this)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
private _setValue(date: string) {
|
||||||
|
if (!date) return
|
||||||
|
const range = this.getDateElementRange()
|
||||||
|
if (!range) return
|
||||||
|
const [leftIndex, rightIndex] = range
|
||||||
|
const elementList = this.draw.getElementList()
|
||||||
|
const startElement = elementList[leftIndex + 1]
|
||||||
|
// 删除旧时间
|
||||||
|
elementList.splice(leftIndex + 1, rightIndex - leftIndex)
|
||||||
|
this.range.setRange(leftIndex, leftIndex)
|
||||||
|
// 插入新时间
|
||||||
|
this.draw.insertElementList([{
|
||||||
|
type: ElementType.DATE,
|
||||||
|
value: '',
|
||||||
|
dateFormat: startElement.dateFormat,
|
||||||
|
valueList: [{
|
||||||
|
value: date
|
||||||
|
}]
|
||||||
|
}])
|
||||||
|
}
|
||||||
|
|
||||||
|
public getDateElementRange(): [number, number] | null {
|
||||||
|
let leftIndex = -1
|
||||||
|
let rightIndex = -1
|
||||||
|
const { startIndex, endIndex } = this.range.getRange()
|
||||||
|
if (!~startIndex && !~endIndex) return null
|
||||||
|
const elementList = this.draw.getElementList()
|
||||||
|
const startElement = elementList[startIndex]
|
||||||
|
if (startElement.type !== ElementType.DATE) return null
|
||||||
|
// 向左查找
|
||||||
|
let preIndex = startIndex
|
||||||
|
while (preIndex > 0) {
|
||||||
|
const preElement = elementList[preIndex]
|
||||||
|
if (preElement.dateId !== startElement.dateId) {
|
||||||
|
leftIndex = preIndex
|
||||||
|
break
|
||||||
|
}
|
||||||
|
preIndex--
|
||||||
|
}
|
||||||
|
// 向右查找
|
||||||
|
let nextIndex = startIndex + 1
|
||||||
|
while (nextIndex < elementList.length) {
|
||||||
|
const nextElement = elementList[nextIndex]
|
||||||
|
if (nextElement.dateId !== startElement.dateId) {
|
||||||
|
rightIndex = nextIndex - 1
|
||||||
|
break
|
||||||
|
}
|
||||||
|
nextIndex++
|
||||||
|
}
|
||||||
|
// 控件在最后
|
||||||
|
if (nextIndex === elementList.length) {
|
||||||
|
rightIndex = nextIndex - 1
|
||||||
|
}
|
||||||
|
if (!~leftIndex || !~rightIndex) return null
|
||||||
|
return [leftIndex, rightIndex]
|
||||||
|
}
|
||||||
|
|
||||||
|
public clearDatePicker() {
|
||||||
|
this.datePicker.dispose()
|
||||||
|
}
|
||||||
|
|
||||||
|
public renderDatePicker(element: IElement, position: IElementPosition) {
|
||||||
|
const height = this.draw.getHeight()
|
||||||
|
const pageGap = this.draw.getPageGap()
|
||||||
|
const startTop = this.draw.getPageNo() * (height + pageGap)
|
||||||
|
const elementList = this.draw.getElementList()
|
||||||
|
const range = this.getDateElementRange()
|
||||||
|
const value = range
|
||||||
|
? elementList.slice(range[0] + 1, range[1] + 1).map(el => el.value).join('')
|
||||||
|
: ''
|
||||||
|
this.datePicker.render({
|
||||||
|
value,
|
||||||
|
element,
|
||||||
|
position,
|
||||||
|
startTop
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) {
|
||||||
|
ctx.save()
|
||||||
|
ctx.font = element.style
|
||||||
|
if (element.color) {
|
||||||
|
ctx.fillStyle = element.color
|
||||||
|
}
|
||||||
|
ctx.fillText(element.value, x, y)
|
||||||
|
ctx.restore()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,481 @@
|
|||||||
|
import { IElement, IElementPosition } from '../../../../interface/Element'
|
||||||
|
|
||||||
|
export interface IDatePickerOption {
|
||||||
|
mountDom?: HTMLElement;
|
||||||
|
onSubmit?: (date: string) => any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IDatePickerDom {
|
||||||
|
container: HTMLDivElement;
|
||||||
|
dateWrap: HTMLDivElement;
|
||||||
|
timeWrap: HTMLUListElement;
|
||||||
|
title: {
|
||||||
|
preYear: HTMLSpanElement;
|
||||||
|
preMonth: HTMLSpanElement;
|
||||||
|
now: HTMLSpanElement;
|
||||||
|
nextMonth: HTMLSpanElement;
|
||||||
|
nextYear: HTMLSpanElement;
|
||||||
|
};
|
||||||
|
day: HTMLDivElement;
|
||||||
|
time: {
|
||||||
|
hour: HTMLOListElement;
|
||||||
|
minute: HTMLOListElement;
|
||||||
|
second: HTMLOListElement;
|
||||||
|
};
|
||||||
|
menu: {
|
||||||
|
time: HTMLButtonElement;
|
||||||
|
now: HTMLButtonElement;
|
||||||
|
submit: HTMLButtonElement;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IRenderOption {
|
||||||
|
value: string;
|
||||||
|
element: IElement;
|
||||||
|
position: IElementPosition;
|
||||||
|
startTop?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class DatePicker {
|
||||||
|
|
||||||
|
private options: IDatePickerOption
|
||||||
|
private now: Date
|
||||||
|
private dom: IDatePickerDom
|
||||||
|
private renderOptions: IRenderOption | null
|
||||||
|
private isDatePicker: boolean
|
||||||
|
private pickDate: Date | null
|
||||||
|
|
||||||
|
constructor(options: IDatePickerOption = {}) {
|
||||||
|
this.options = {
|
||||||
|
mountDom: document.body,
|
||||||
|
...options
|
||||||
|
}
|
||||||
|
this.now = new Date()
|
||||||
|
this.dom = this._createDom()
|
||||||
|
this.renderOptions = null
|
||||||
|
this.isDatePicker = true
|
||||||
|
this.pickDate = null
|
||||||
|
this._bindEvent()
|
||||||
|
}
|
||||||
|
|
||||||
|
private _createDom(): IDatePickerDom {
|
||||||
|
const datePickerContainer = document.createElement('div')
|
||||||
|
datePickerContainer.classList.add('date-container')
|
||||||
|
// title-切换年月、年月显示
|
||||||
|
const dateWrap = document.createElement('div')
|
||||||
|
dateWrap.classList.add('date-wrap')
|
||||||
|
const datePickerTitle = document.createElement('div')
|
||||||
|
datePickerTitle.classList.add('date-title')
|
||||||
|
const preYearTitle = document.createElement('span')
|
||||||
|
preYearTitle.classList.add('date-title__pre-year')
|
||||||
|
preYearTitle.innerText = `<<`
|
||||||
|
const preMonthTitle = document.createElement('span')
|
||||||
|
preMonthTitle.classList.add('date-title__pre-month')
|
||||||
|
preMonthTitle.innerText = `<`
|
||||||
|
const nowTitle = document.createElement('span')
|
||||||
|
nowTitle.classList.add('date-title__now')
|
||||||
|
const nextMonthTitle = document.createElement('span')
|
||||||
|
nextMonthTitle.classList.add('date-title__next-month')
|
||||||
|
nextMonthTitle.innerText = `>`
|
||||||
|
const nextYearTitle = document.createElement('span')
|
||||||
|
nextYearTitle.classList.add('date-title__next-year')
|
||||||
|
nextYearTitle.innerText = `>>`
|
||||||
|
datePickerTitle.append(preYearTitle)
|
||||||
|
datePickerTitle.append(preMonthTitle)
|
||||||
|
datePickerTitle.append(nowTitle)
|
||||||
|
datePickerTitle.append(nextMonthTitle)
|
||||||
|
datePickerTitle.append(nextYearTitle)
|
||||||
|
// week-星期显示
|
||||||
|
const datePickerWeek = document.createElement('div')
|
||||||
|
datePickerWeek.classList.add('date-week')
|
||||||
|
const weekList = ['日', '一', '二', '三', '四', '五', '六']
|
||||||
|
weekList.forEach(week => {
|
||||||
|
const weekDom = document.createElement('span')
|
||||||
|
weekDom.innerText = `${week}`
|
||||||
|
datePickerWeek.append(weekDom)
|
||||||
|
})
|
||||||
|
// day-天数显示
|
||||||
|
const datePickerDay = document.createElement('div')
|
||||||
|
datePickerDay.classList.add('date-day')
|
||||||
|
// 日期内容构建
|
||||||
|
dateWrap.append(datePickerTitle)
|
||||||
|
dateWrap.append(datePickerWeek)
|
||||||
|
dateWrap.append(datePickerDay)
|
||||||
|
// time-时间选择
|
||||||
|
const timeWrap = document.createElement('ul')
|
||||||
|
timeWrap.classList.add('time-wrap')
|
||||||
|
let hourTime: HTMLOListElement
|
||||||
|
let minuteTime: HTMLOListElement
|
||||||
|
let secondTime: HTMLOListElement
|
||||||
|
const timeList = ['时', '分', '秒']
|
||||||
|
timeList.forEach((t, i) => {
|
||||||
|
const li = document.createElement('li')
|
||||||
|
const timeText = document.createElement('span')
|
||||||
|
timeText.innerText = t
|
||||||
|
li.append(timeText)
|
||||||
|
const ol = document.createElement('ol')
|
||||||
|
const isHour = i === 0
|
||||||
|
const isMinute = i === 1
|
||||||
|
const endIndex = isHour ? 24 : 60
|
||||||
|
for (let i = 0; i < endIndex; i++) {
|
||||||
|
const time = document.createElement('li')
|
||||||
|
time.innerText = `${String(i).padStart(2, '0')}`
|
||||||
|
time.setAttribute('data-id', `${i}`)
|
||||||
|
ol.append(time)
|
||||||
|
}
|
||||||
|
if (isHour) {
|
||||||
|
hourTime = ol
|
||||||
|
} else if (isMinute) {
|
||||||
|
minuteTime = ol
|
||||||
|
} else {
|
||||||
|
secondTime = ol
|
||||||
|
}
|
||||||
|
li.append(ol)
|
||||||
|
timeWrap.append(li)
|
||||||
|
})
|
||||||
|
// menu-选择时间、现在、确定
|
||||||
|
const datePickerMenu = document.createElement('div')
|
||||||
|
datePickerMenu.classList.add('date-menu')
|
||||||
|
const timeMenu = document.createElement('button')
|
||||||
|
timeMenu.classList.add('date-menu__time')
|
||||||
|
timeMenu.innerText = '时间选择'
|
||||||
|
const nowMenu = document.createElement('button')
|
||||||
|
nowMenu.classList.add('date-menu__now')
|
||||||
|
nowMenu.innerText = '此刻'
|
||||||
|
const submitMenu = document.createElement('button')
|
||||||
|
submitMenu.classList.add('date-menu__submit')
|
||||||
|
submitMenu.innerText = '确定'
|
||||||
|
datePickerMenu.append(timeMenu)
|
||||||
|
datePickerMenu.append(nowMenu)
|
||||||
|
datePickerMenu.append(submitMenu)
|
||||||
|
// 构建
|
||||||
|
datePickerContainer.append(dateWrap)
|
||||||
|
datePickerContainer.append(timeWrap)
|
||||||
|
datePickerContainer.append(datePickerMenu)
|
||||||
|
this.options.mountDom!.append(datePickerContainer)
|
||||||
|
return {
|
||||||
|
container: datePickerContainer,
|
||||||
|
dateWrap,
|
||||||
|
timeWrap,
|
||||||
|
title: {
|
||||||
|
preYear: preYearTitle,
|
||||||
|
preMonth: preMonthTitle,
|
||||||
|
now: nowTitle,
|
||||||
|
nextMonth: nextMonthTitle,
|
||||||
|
nextYear: nextYearTitle
|
||||||
|
},
|
||||||
|
day: datePickerDay,
|
||||||
|
time: {
|
||||||
|
hour: hourTime!,
|
||||||
|
minute: minuteTime!,
|
||||||
|
second: secondTime!
|
||||||
|
},
|
||||||
|
menu: {
|
||||||
|
time: timeMenu,
|
||||||
|
now: nowMenu,
|
||||||
|
submit: submitMenu
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _bindEvent() {
|
||||||
|
this.dom.title.preYear.onclick = () => {
|
||||||
|
this._preYear()
|
||||||
|
}
|
||||||
|
this.dom.title.preMonth.onclick = () => {
|
||||||
|
this._preMonth()
|
||||||
|
}
|
||||||
|
this.dom.title.nextMonth.onclick = () => {
|
||||||
|
this._nextMonth()
|
||||||
|
}
|
||||||
|
this.dom.title.nextYear.onclick = () => {
|
||||||
|
this._nextYear()
|
||||||
|
}
|
||||||
|
this.dom.menu.time.onclick = () => {
|
||||||
|
this.isDatePicker = !this.isDatePicker
|
||||||
|
this._toggleDateTimePicker()
|
||||||
|
}
|
||||||
|
this.dom.menu.now.onclick = () => {
|
||||||
|
this._now()
|
||||||
|
this._submit()
|
||||||
|
}
|
||||||
|
this.dom.menu.submit.onclick = () => {
|
||||||
|
this.dispose()
|
||||||
|
this._submit()
|
||||||
|
}
|
||||||
|
this.dom.time.hour.onclick = (evt) => {
|
||||||
|
if (!this.pickDate) return
|
||||||
|
const li = <HTMLLIElement>evt.target
|
||||||
|
const id = li.dataset.id
|
||||||
|
if (!id) return
|
||||||
|
this.pickDate.setHours(Number(id))
|
||||||
|
this._setTimePick(false)
|
||||||
|
}
|
||||||
|
this.dom.time.minute.onclick = (evt) => {
|
||||||
|
if (!this.pickDate) return
|
||||||
|
const li = <HTMLLIElement>evt.target
|
||||||
|
const id = li.dataset.id
|
||||||
|
if (!id) return
|
||||||
|
this.pickDate.setMinutes(Number(id))
|
||||||
|
this._setTimePick(false)
|
||||||
|
}
|
||||||
|
this.dom.time.second.onclick = (evt) => {
|
||||||
|
if (!this.pickDate) return
|
||||||
|
const li = <HTMLLIElement>evt.target
|
||||||
|
const id = li.dataset.id
|
||||||
|
if (!id) return
|
||||||
|
this.pickDate.setSeconds(Number(id))
|
||||||
|
this._setTimePick(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _setPosition() {
|
||||||
|
if (!this.renderOptions) return
|
||||||
|
const {
|
||||||
|
position: {
|
||||||
|
coordinate: {
|
||||||
|
leftTop: [left, top]
|
||||||
|
},
|
||||||
|
lineHeight
|
||||||
|
},
|
||||||
|
startTop
|
||||||
|
} = this.renderOptions
|
||||||
|
// 位置
|
||||||
|
this.dom.container.style.left = `${left}px`
|
||||||
|
this.dom.container.style.top = `${top + (startTop || 0) + lineHeight}px`
|
||||||
|
}
|
||||||
|
|
||||||
|
public isInvalidDate(value: Date): boolean {
|
||||||
|
return value.toDateString() === 'Invalid Date'
|
||||||
|
}
|
||||||
|
|
||||||
|
private _setValue() {
|
||||||
|
const value = this.renderOptions?.value
|
||||||
|
if (value) {
|
||||||
|
const setDate = new Date(value)
|
||||||
|
this.now = this.isInvalidDate(setDate) ? new Date() : setDate
|
||||||
|
} else {
|
||||||
|
this.now = new Date()
|
||||||
|
}
|
||||||
|
this.pickDate = new Date(this.now)
|
||||||
|
}
|
||||||
|
|
||||||
|
private _update() {
|
||||||
|
// 本地年月日
|
||||||
|
const localDate = new Date()
|
||||||
|
const localYear = localDate.getFullYear()
|
||||||
|
const localMonth = localDate.getMonth() + 1
|
||||||
|
const localDay = localDate.getDate()
|
||||||
|
// 选择年月日
|
||||||
|
let pickYear: number | null = null
|
||||||
|
let pickMonth: number | null = null
|
||||||
|
let pickDay: number | null = null
|
||||||
|
if (this.pickDate) {
|
||||||
|
pickYear = this.pickDate.getFullYear()
|
||||||
|
pickMonth = this.pickDate.getMonth() + 1
|
||||||
|
pickDay = this.pickDate.getDate()
|
||||||
|
}
|
||||||
|
// 当前年月日
|
||||||
|
const year = this.now.getFullYear()
|
||||||
|
const month = this.now.getMonth() + 1
|
||||||
|
this.dom.title.now.innerText = `${year}年 ${String(month).padStart(2, '0')}月`
|
||||||
|
// 日期补差
|
||||||
|
const curDate = new Date(year, month, 0) // 当月日期
|
||||||
|
const curDay = curDate.getDate() // 当月总天数
|
||||||
|
let curWeek = new Date(year, month - 1, 1).getDay() // 当月第一天星期几
|
||||||
|
if (curWeek === 0) {
|
||||||
|
curWeek = 7
|
||||||
|
}
|
||||||
|
const preDay = new Date(year, month - 1, 0).getDate() // 上个月天数
|
||||||
|
this.dom.day.innerHTML = ''
|
||||||
|
// 渲染上个月日期
|
||||||
|
const preStartDay = preDay - curWeek + 1
|
||||||
|
for (let i = preStartDay; i <= preDay; i++) {
|
||||||
|
const dayDom = document.createElement('div')
|
||||||
|
dayDom.classList.add('disable')
|
||||||
|
dayDom.innerText = `${i}`
|
||||||
|
dayDom.onclick = () => {
|
||||||
|
const newMonth = month - 2
|
||||||
|
this.now = new Date(year, newMonth, i)
|
||||||
|
this._setDatePick(year, newMonth, i)
|
||||||
|
}
|
||||||
|
this.dom.day.append(dayDom)
|
||||||
|
}
|
||||||
|
// 渲染当月日期
|
||||||
|
for (let i = 1; i <= curDay; i++) {
|
||||||
|
const dayDom = document.createElement('div')
|
||||||
|
if (localYear === year && localMonth === month && localDay === i) {
|
||||||
|
dayDom.classList.add('active')
|
||||||
|
}
|
||||||
|
if (this.pickDate && pickYear === year && pickMonth === month && pickDay === i) {
|
||||||
|
dayDom.classList.add('select')
|
||||||
|
}
|
||||||
|
dayDom.innerText = `${i}`
|
||||||
|
dayDom.onclick = (evt) => {
|
||||||
|
const newMonth = month - 1
|
||||||
|
this.now = new Date(year, newMonth, i)
|
||||||
|
this._setDatePick(year, newMonth, i)
|
||||||
|
evt.stopPropagation()
|
||||||
|
}
|
||||||
|
this.dom.day.append(dayDom)
|
||||||
|
}
|
||||||
|
// 渲染下月日期
|
||||||
|
const nextEndDay = 6 * 7 - curWeek - curDay
|
||||||
|
for (let i = 1; i <= nextEndDay; i++) {
|
||||||
|
const dayDom = document.createElement('div')
|
||||||
|
dayDom.classList.add('disable')
|
||||||
|
dayDom.innerText = `${i}`
|
||||||
|
dayDom.onclick = () => {
|
||||||
|
this.now = new Date(year, month, i)
|
||||||
|
this._setDatePick(year, month, i)
|
||||||
|
}
|
||||||
|
this.dom.day.append(dayDom)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _toggleDateTimePicker() {
|
||||||
|
if (this.isDatePicker) {
|
||||||
|
this.dom.dateWrap.classList.add('active')
|
||||||
|
this.dom.timeWrap.classList.remove('active')
|
||||||
|
this.dom.menu.time.innerText = `时间选择`
|
||||||
|
} else {
|
||||||
|
this.dom.dateWrap.classList.remove('active')
|
||||||
|
this.dom.timeWrap.classList.add('active')
|
||||||
|
this.dom.menu.time.innerText = `返回日期`
|
||||||
|
// 设置时分秒选择
|
||||||
|
this._setTimePick()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _setDatePick(year: number, month: number, day: number) {
|
||||||
|
this.now = new Date(year, month, day)
|
||||||
|
this.pickDate?.setFullYear(year)
|
||||||
|
this.pickDate?.setMonth(month)
|
||||||
|
this.pickDate?.setDate(day)
|
||||||
|
this._update()
|
||||||
|
}
|
||||||
|
|
||||||
|
private _setTimePick(isIntoView = true) {
|
||||||
|
const hour = this.pickDate?.getHours() || 0
|
||||||
|
const minute = this.pickDate?.getMinutes() || 0
|
||||||
|
const second = this.pickDate?.getSeconds() || 0
|
||||||
|
const { hour: hourDom, minute: minuteDom, second: secondDom } = this.dom.time
|
||||||
|
const timeDomList = [hourDom, minuteDom, secondDom]
|
||||||
|
// 清空
|
||||||
|
timeDomList.forEach(timeDom => {
|
||||||
|
timeDom.querySelectorAll('li')
|
||||||
|
.forEach(li => li.classList.remove('active'))
|
||||||
|
})
|
||||||
|
const pickList: [HTMLOListElement, number][] = [[hourDom, hour], [minuteDom, minute], [secondDom, second]]
|
||||||
|
pickList.forEach(([dom, time]) => {
|
||||||
|
const pickDom = dom.querySelector<HTMLLIElement>(`[data-id='${time}']`)!
|
||||||
|
pickDom.classList.add('active')
|
||||||
|
if (isIntoView) {
|
||||||
|
this._scrollIntoView(dom, pickDom)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
private _scrollIntoView(container: HTMLElement, selected: HTMLElement) {
|
||||||
|
if (!selected) {
|
||||||
|
container.scrollTop = 0
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const offsetParents: HTMLElement[] = []
|
||||||
|
let pointer = <HTMLElement>selected.offsetParent
|
||||||
|
while (pointer && container !== pointer && container.contains(pointer)) {
|
||||||
|
offsetParents.push(pointer)
|
||||||
|
pointer = <HTMLElement>pointer.offsetParent
|
||||||
|
}
|
||||||
|
const top = selected.offsetTop + offsetParents.reduce((prev, curr) => (prev + curr.offsetTop), 0)
|
||||||
|
const bottom = top + selected.offsetHeight
|
||||||
|
const viewRectTop = container.scrollTop
|
||||||
|
const viewRectBottom = viewRectTop + container.clientHeight
|
||||||
|
if (top < viewRectTop) {
|
||||||
|
container.scrollTop = top
|
||||||
|
} else if (bottom > viewRectBottom) {
|
||||||
|
container.scrollTop = bottom - container.clientHeight
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _preMonth() {
|
||||||
|
this.now.setMonth(this.now.getMonth() - 1)
|
||||||
|
this._update()
|
||||||
|
}
|
||||||
|
|
||||||
|
private _nextMonth() {
|
||||||
|
this.now.setMonth(this.now.getMonth() + 1)
|
||||||
|
this._update()
|
||||||
|
}
|
||||||
|
|
||||||
|
private _preYear() {
|
||||||
|
this.now.setFullYear(this.now.getFullYear() - 1)
|
||||||
|
this._update()
|
||||||
|
}
|
||||||
|
|
||||||
|
private _nextYear() {
|
||||||
|
this.now.setFullYear(this.now.getFullYear() + 1)
|
||||||
|
this._update()
|
||||||
|
}
|
||||||
|
|
||||||
|
private _now() {
|
||||||
|
this.pickDate = new Date()
|
||||||
|
this.dispose()
|
||||||
|
}
|
||||||
|
|
||||||
|
private _toggleVisible(isVisible: boolean) {
|
||||||
|
if (isVisible) {
|
||||||
|
this.dom.container.classList.add('active')
|
||||||
|
} else {
|
||||||
|
this.dom.container.classList.remove('active')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _submit() {
|
||||||
|
if (this.options.onSubmit && this.pickDate) {
|
||||||
|
const format = this.renderOptions?.element.dateFormat
|
||||||
|
const pickDateString = this.formatDate(this.pickDate, format)
|
||||||
|
this.options.onSubmit(pickDateString)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public formatDate(date: Date, format = 'yyyy-MM-dd hh:mm:ss'): string {
|
||||||
|
let dateString = format
|
||||||
|
const dateOption = {
|
||||||
|
'y+': date.getFullYear().toString(),
|
||||||
|
'M+': (date.getMonth() + 1).toString(),
|
||||||
|
'd+': date.getDate().toString(),
|
||||||
|
'h+': date.getHours().toString(),
|
||||||
|
'm+': date.getMinutes().toString(),
|
||||||
|
's+': date.getSeconds().toString()
|
||||||
|
}
|
||||||
|
for (const k in dateOption) {
|
||||||
|
const reg = new RegExp('(' + k + ')').exec(format)
|
||||||
|
const key = <keyof typeof dateOption>k
|
||||||
|
if (reg) {
|
||||||
|
dateString = dateString.replace(
|
||||||
|
reg[1],
|
||||||
|
reg[1].length === 1
|
||||||
|
? (dateOption[key])
|
||||||
|
: (dateOption[key].padStart(reg[1].length, '0'))
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return dateString
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(option: IRenderOption) {
|
||||||
|
this.renderOptions = option
|
||||||
|
this._setValue()
|
||||||
|
this._update()
|
||||||
|
this._setPosition()
|
||||||
|
this.isDatePicker = true
|
||||||
|
this._toggleDateTimePicker()
|
||||||
|
this._toggleVisible(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
public dispose() {
|
||||||
|
this._toggleVisible(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in new issue