Cuttlefish Docs
  • 简体中文

    • 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|slideclick否
    name在表单中的name名，用于表单提交stringnull否
    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()

    AI 摘要（LLM Ready）

    • 组件标识：spz-date-picker
    • 用途一句话：用于选择某一个日期
    • 可识别属性条目：8
    • 可识别方法小节：0
    • 可识别事件小节：1
    • 关键属性名（Top）：mode、name、min、max、value、YYYY/MM/DD
    • 关键方法名（Top）：无（待补充）
    • 关键事件名（Top）：change
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/