Merge pull request #64 from Hufe921/feature/date

Feature/date

cypress/integration/menus/date.spec.ts

@@ -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')
+    })
+  })
+
+})

index.html

@@ -176,6 +176,15 @@
         <div class="menu-item__latex">
           <i></i>
         </div>
+        <div class="menu-item__date">
+          <i></i>
+          <div class="options">
+            <ul>
+              <li data-format="yyyy-MM-dd"></li>
+              <li data-format="yyyy-MM-dd hh:mm:ss"></li>
+            </ul>
+          </div>
+        </div>
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">

src/assets/images/date.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M7.5 14.154a5.654 5.654 0 100-11.308 5.654 5.654 0 000 11.308zm0 .846a6.5 6.5 0 110-13 6.5 6.5 0 010 13z" fill-rule="nonzero"/><path d="M8 8h4v1H7V4h1v4z"/></g></svg>

src/editor/assets/css/date/datePicker.css

@@ -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;
+}

src/editor/assets/css/index.css

@@ -1,4 +1,5 @@
 @import './control/select.css';
+@import './date/datePicker.css';
 
 .inputarea {
   width: 0;

src/editor/core/draw/Draw.ts

@@ -44,6 +44,7 @@ import { ControlComponent } from '../../dataset/enum/Control'
 import { formatElementList } from '../../utils/element'
 import { WorkerManager } from '../worker/WorkerManager'
 import { Previewer } from './particle/previewer/Previewer'
+import { DateParticle } from './particle/date/DateParticle'
 
 export class Draw {
 
@@ -78,6 +79,7 @@ export class Draw {
   private waterMark: Watermark
   private header: Header
   private hyperlinkParticle: HyperlinkParticle
+  private dateParticle: DateParticle
   private separatorParticle: SeparatorParticle
   private pageBreakParticle: PageBreakParticle
   private superscriptParticle: SuperscriptParticle
@@ -130,6 +132,7 @@ export class Draw {
     this.waterMark = new Watermark(this)
     this.header = new Header(this)
     this.hyperlinkParticle = new HyperlinkParticle(this)
+    this.dateParticle = new DateParticle(this)
     this.separatorParticle = new SeparatorParticle()
     this.pageBreakParticle = new PageBreakParticle(this)
     this.superscriptParticle = new SuperscriptParticle()
@@ -373,6 +376,10 @@ export class Draw {
     return this.hyperlinkParticle
   }
 
+  public getDateParticle(): DateParticle {
+    return this.dateParticle
+  }
+
   public getControl(): Control {
     return this.control
   }
@@ -801,6 +808,9 @@ export class Draw {
         } else if (element.type === ElementType.HYPERLINK) {
           this.textParticle.complete()
           this.hyperlinkParticle.render(ctx, element, x, y + offsetY)
+        } else if (element.type === ElementType.DATE) {
+          this.textParticle.complete()
+          this.dateParticle.render(ctx, element, x, y + offsetY)
         } else if (element.type === ElementType.SUPERSCRIPT) {
           this.textParticle.complete()
           this.superscriptParticle.render(ctx, element, x, y + offsetY)

src/editor/core/draw/particle/date/DateParticle.ts

@@ -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()
+  }
+
+}

src/editor/core/draw/particle/date/DatePicker.ts

@@ -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)
+  }
+
+}

src/editor/core/event/CanvasEvent.ts

@@ -21,6 +21,7 @@ import { CheckboxControl } from '../draw/control/checkbox/CheckboxControl'
 import { splitText } from '../../utils'
 import { Previewer } from '../draw/particle/previewer/Previewer'
 import { DeepRequired } from '../../interface/Common'
+import { DateParticle } from '../draw/particle/date/DateParticle'
 
 export class CanvasEvent {
 
@@ -39,6 +40,7 @@ export class CanvasEvent {
   private previewer: Previewer
   private tableTool: TableTool
   private hyperlinkParticle: HyperlinkParticle
+  private dateParticle: DateParticle
   private listener: Listener
   private control: Control
 
@@ -58,6 +60,7 @@ export class CanvasEvent {
     this.previewer = this.draw.getPreviewer()
     this.tableTool = this.draw.getTableTool()
     this.hyperlinkParticle = this.draw.getHyperlinkParticle()
+    this.dateParticle = this.draw.getDateParticle()
     this.listener = this.draw.getListener()
     this.control = this.draw.getControl()
   }
@@ -284,6 +287,11 @@ export class CanvasEvent {
     if (curElement.type === ElementType.HYPERLINK) {
       this.hyperlinkParticle.drawHyperlinkPopup(curElement, positionList[curIndex])
     }
+    // 日期控件
+    this.dateParticle.clearDatePicker()
+    if (curElement.type === ElementType.DATE) {
+      this.dateParticle.renderDatePicker(curElement, positionList[curIndex])
+    }
   }
 
   public mouseleave(evt: MouseEvent) {
@@ -519,7 +527,7 @@ export class CanvasEvent {
       return
     }
     const activeControl = this.control.getActiveControl()
-    const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT } = ElementType
+    const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT, DATE } = ElementType
     const text = data.replaceAll(`\n`, ZERO)
     const elementList = this.draw.getElementList()
     const agentDom = this.cursor.getAgentDom()
@@ -545,6 +553,7 @@ export class CanvasEvent {
         element.type === TEXT
         || (!element.type && element.value !== ZERO)
         || (element.type === HYPERLINK && nextElement?.type === HYPERLINK)
+        || (element.type === DATE && nextElement?.type === DATE)
         || (element.type === SUBSCRIPT && nextElement?.type === SUBSCRIPT)
         || (element.type === SUPERSCRIPT && nextElement?.type === SUPERSCRIPT)
       ) {

src/editor/dataset/constant/Element.ts

@@ -24,7 +24,9 @@ export const EDITOR_ELEMENT_COPY_ATTR: Array<keyof IElement> = [
   'strikeout',
   'rowFlex',
   'url',
-  'hyperlinkId'
+  'hyperlinkId',
+  'dateId',
+  'dateFormat'
 ]
 
 export const EDITOR_ELEMENT_ZIP_ATTR: Array<keyof IElement> = [
@@ -47,7 +49,8 @@ export const EDITOR_ELEMENT_ZIP_ATTR: Array<keyof IElement> = [
   'colgroup',
   'valueList',
   'control',
-  'checkbox'
+  'checkbox',
+  'dateFormat'
 ]
 
 export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [
@@ -55,5 +58,6 @@ export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [
   ElementType.HYPERLINK,
   ElementType.SUBSCRIPT,
   ElementType.SUPERSCRIPT,
-  ElementType.CONTROL
+  ElementType.CONTROL,
+  ElementType.DATE
 ]

src/editor/dataset/enum/Element.ts

@@ -10,5 +10,6 @@ export enum ElementType {
   CONTROL = 'control',
   CHECKBOX = 'checkbox',
   LATEX = 'latex',
-  TAB = 'tab'
+  TAB = 'tab',
+  DATE = 'date'
 }

src/editor/interface/Element.ts

@@ -69,6 +69,11 @@ export interface ILaTexElement {
   laTexSVG?: string;
 }
 
+export interface IDateElement {
+  dateFormat?: string;
+  dateId?: string;
+}
+
 export type IElement = IElementBasic
   & IElementStyle
   & ITable
@@ -78,6 +83,7 @@ export type IElement = IElementBasic
   & IControlElement
   & ICheckboxElement
   & ILaTexElement
+  & IDateElement
 
 export interface IElementMetrics {
   width: number;

src/editor/utils/element.ts

@@ -72,6 +72,31 @@ export function formatElementList(elementList: IElement[], options: IFormatEleme
         }
       }
       i--
+    } else if (el.type === ElementType.DATE) {
+      const valueList = el.valueList || []
+      // 移除父节点
+      elementList.splice(i, 1)
+      // 追加字节点
+      if (valueList.length) {
+        // 元素展开
+        if (valueList[0].value.length > 1) {
+          const deleteValue = valueList.splice(0, 1)[0]
+          const deleteTextList = splitText(deleteValue.value)
+          for (let d = 0; d < deleteTextList.length; d++) {
+            valueList.splice(d, 0, { ...deleteValue, value: deleteTextList[d] })
+          }
+        }
+        const dateId = getUUID()
+        for (let v = 0; v < valueList.length; v++) {
+          const value = valueList[v]
+          value.type = el.type
+          value.dateFormat = el.dateFormat
+          value.dateId = dateId
+          elementList.splice(i, 0, value)
+          i++
+        }
+      }
+      i--
     } else if (el.type === ElementType.CONTROL) {
       const { prefix, postfix, value, placeholder, code, type, valueSets } = el.control!
       const controlId = getUUID()
@@ -302,6 +327,27 @@ export function zipElementList(payload: IElement[]): IElement[] {
       }
       hyperlinkElement.valueList = zipElementList(valueList)
       element = hyperlinkElement
+    } else if (element.type === ElementType.DATE) {
+      const dateId = element.dateId
+      const dateElement: IElement = {
+        type: ElementType.DATE,
+        value: '',
+        dateFormat: element.dateFormat
+      }
+      const valueList: IElement[] = []
+      while (e < elementList.length) {
+        const dateE = elementList[e]
+        if (dateId !== dateE.dateId) {
+          e--
+          break
+        }
+        delete dateE.type
+        delete dateE.dateFormat
+        valueList.push(dateE)
+        e++
+      }
+      dateElement.valueList = zipElementList(valueList)
+      element = dateElement
     } else if (element.type === ElementType.CONTROL) {
       // 控件处理
       const controlId = element.controlId

src/main.ts

@@ -156,7 +156,7 @@ window.onload = function () {
     instance.command.executeRowMargin(Number(li.dataset.rowmargin!))
   }
 
-  // 4. | 表格 | 图片 | 超链接 | 分割线 | 水印 | 代码块 | 分隔符 | 控件 | 复选框 | LaTeX
+  // 4. | 表格 | 图片 | 超链接 | 分割线 | 水印 | 代码块 | 分隔符 | 控件 | 复选框 | LaTeX | 日期选择器
   const tableDom = document.querySelector<HTMLDivElement>('.menu-item__table')!
   const tablePanelContainer = document.querySelector<HTMLDivElement>('.menu-item__table__collapse')!
   const tableClose = document.querySelector<HTMLDivElement>('.table-close')!
@@ -563,6 +563,48 @@ window.onload = function () {
     })
   }
 
+  const dateDom = document.querySelector<HTMLDivElement>('.menu-item__date')!
+  const dateDomOptionDom = dateDom.querySelector<HTMLDivElement>('.options')!
+  dateDom.onclick = function () {
+    console.log('date')
+    dateDomOptionDom.classList.toggle('visible')
+    // 定位调整
+    const bodyRect = document.body.getBoundingClientRect()
+    const dateDomOptionRect = dateDomOptionDom.getBoundingClientRect()
+    if (dateDomOptionRect.left + dateDomOptionRect.width > bodyRect.width) {
+      dateDomOptionDom.style.right = '0px'
+      dateDomOptionDom.style.left = 'unset'
+    } else {
+      dateDomOptionDom.style.right = 'unset'
+      dateDomOptionDom.style.left = '0px'
+    }
+    // 当前日期
+    const date = new Date()
+    const year = date.getFullYear().toString()
+    const month = (date.getMonth() + 1).toString().padStart(2, '0')
+    const day = date.getDate().toString().padStart(2, '0')
+    const hour = date.getHours().toString().padStart(2, '0')
+    const minute = date.getMinutes().toString().padStart(2, '0')
+    const second = date.getSeconds().toString().padStart(2, '0')
+    const dateString = `${year}-${month}-${day}`
+    const dateTimeString = `${dateString} ${hour}:${minute}:${second}`
+    dateDomOptionDom.querySelector<HTMLLIElement>('li:first-child')!.innerText = dateString
+    dateDomOptionDom.querySelector<HTMLLIElement>('li:last-child')!.innerText = dateTimeString
+  }
+  dateDomOptionDom.onmousedown = function (evt) {
+    const li = evt.target as HTMLLIElement
+    const dateFormat = li.dataset.format!
+    dateDomOptionDom.classList.toggle('visible')
+    instance.command.executeInsertElementList([{
+      type: ElementType.DATE,
+      value: '',
+      dateFormat,
+      valueList: [{
+        value: li.innerText.trim(),
+      }]
+    }])
+  }
+
   // 5. | 搜索&替换 | 打印 |
   const searchCollapseDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')!
   const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')!

src/mock.ts

@@ -279,6 +279,20 @@ elementList.push(...<IElement[]>[{
   value: '\n'
 }])
 
+// 日期选择
+elementList.push(...<IElement[]>[{
+  value: '签署日期：'
+},
+{
+  value: '',
+  valueList: [{
+    value: `2022-08-10 17:30:01`
+  }],
+  type: ElementType.DATE
+}, {
+  value: '\n'
+}])
+
 // 模拟结尾文本
 elementList.push(...[{
   value: '',

src/style.css

@@ -59,7 +59,7 @@ ul {
 .menu-divider {
   width: 1px;
   height: 16px;
-  margin: 0 6px;
+  margin: 0 8px;
   display: inline-block;
   background-color: #cfd2d8;
 }
@@ -78,7 +78,7 @@ ul {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 5px;
+  margin: 0 4px;
 }
 
 .menu-item>div:hover {
@@ -447,6 +447,18 @@ ul {
   background-image: url('./assets/images/latex.svg');
 }
 
+.menu-item__date {
+  position: relative;
+}
+
+.menu-item__date i {
+  background-image: url('./assets/images/date.svg');
+}
+
+.menu-item__date .options {
+  width: 150px;
+}
+
 .menu-item .menu-item__control .options {
   width: 55px;
 }