spz-date-picker 日期选择器

用于选择某一个日期

布局

container

何时使用

当需要选择一个具体的日期时。

代码演示

基本用法

最基本的用法，在一个弹窗中选择一个具体的日期。

<div id="date-picker-input-container" class="date-picker" @tap="datePickerDropdown.open;date-picker-input-container.toggleClass(class='focused', force=true);">
    <div class="date-picker-input">
      <spz-render class="date-picker-input-render" id="date-picker-input-render" layout="container">
        <template>
          ${function(){
            if (data.datetime) {
              return `<spz-date layout="container" datetime="${data.datetime}" format="YYYY-M-D"></spz-date>`
            }
            return `<input id="date-input" class="date-input" readonly placeholder="Select Date" type="text" name="date-input">`
          }()}
        </template>
      </spz-render>
      <div style="width: 16px;height: 16px;">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M6.00528 0.799805C6.21649 0.799805 6.3877 0.971216 6.3877 1.18266V1.94838H10.0186V1.18266C10.0186 0.971216 10.1898 0.799805 10.401 0.799805H11.1658C11.377 0.799805 11.5482 0.971216 11.5482 1.18266V1.94838H14.4398C14.8622 1.94838 15.1998 2.31024 15.1998 2.75663V14.3898C15.1998 14.8362 14.8622 15.1998 14.4398 15.1998H1.56464C1.14224 15.1998 0.799805 14.8362 0.799805 14.3898V2.75663C0.799805 2.31024 1.14224 1.94838 1.56464 1.94838H4.85764L4.85802 1.18266C4.85802 0.971216 5.02924 0.799805 5.24044 0.799805H6.00528ZM13.6698 8.52981H2.32949V13.6698H13.6698V8.52981ZM4.85764 3.4798H2.32949V6.99981H13.6698V3.4798H11.5482V4.24552C11.5482 4.45696 11.377 4.62838 11.1658 4.62838H10.401C10.1898 4.62838 10.0186 4.45696 10.0186 4.24552V3.4798H6.3877V4.24552C6.3877 4.45696 6.21649 4.62838 6.00528 4.62838H5.24044C5.02924 4.62838 4.85802 4.45696 4.85802 4.24552L4.85764 3.4798Z" fill="#8C9196"/>
        </svg>
      </div>
    </div>
  </div>
  <spz-dropdown id="datePickerDropdown" auto-orientation layout="nodisplay" placement="bottomLeft" overlay-style="top: 4px;" @dropdownClose="date-picker-input-container.toggleClass(class='focused', force=false);">
    <spz-date-picker id="date-picker-script" value="2024-06-13T06:00:00Z" min="1718344800000" max="1749794400000" layout="container" @change="datePickerDropdown.close;date-picker-input-render.rerender(data=event,redo=true)"></spz-date-picker>
  </spz-dropdown>

滑动选择

在移动端时可以使用滑动选择方式。

<div class="container">
    <spz-date-picker mode="slide" value="1736081862012" name="date" min="1718344800000" max="1749794400000" layout="container"></spz-date-picker>
</div>

属性

属性名	说明	类型	默认值	是否必需
mode	日期选择器的类型	`click`\|`slide`	`click`	否
name	在表单中的`name`名，用于表单提交	string	null	否
min	可选择的最小日期值, 可以是时间戳	dateType\|number	-	否
max	可选择的最大日期值, 可以是时间戳	dateType\|number	-	否
value	默认选中的日期, 可以是时间戳	dateType\|number	当前日期	否

dateType

支持的日期格式
YYYY/MM/DD
YYYY/MM/DD HH:mm
YYYY/MM/DD HH:mm:ss

事件

change

当选中的值发生变化时自动触发。

参数名	说明	类型
datetime	当前选中的日期值	`new Date()`