SanoUI

Appearance

DatePicker 日期选择器 ​

用于选择日期的日期选择器组件。

基础用法 ​

html
<div id="demo-date-picker"></div>

<script>
const picker = new SaDatePicker('#demo-date-picker', {
  onChange: (value) => {
    console.log('选择的日期:', value);
  }
});

SA.init('body');
</script>
加载 SanoUI 组件中...

设置默认值 ​

通过 value 参数设置默认选中的日期。

html
<div id="demo-date-picker-default"></div>

<script>
const picker = new SaDatePicker('#demo-date-picker-default', {
  value: '2024-12-25'
});

SA.init('body');
</script>
加载 SanoUI 组件中...

日期范围限制 ​

通过 min 和 max 限制可选择的日期范围。

html
<div id="demo-date-picker-range"></div>

<script>
const picker = new SaDatePicker('#demo-date-picker-range', {
  min: '2024-01-01',
  max: '2025-12-31',
  onChange: (value) => {
    console.log('选择的日期:', value);
  }
});

SA.init('body');
</script>
加载 SanoUI 组件中...

不同尺寸 ​

通过 size 属性设置日期选择器大小。

html
<!-- 大尺寸 -->
<div id="demo-date-picker-large" style="width: 200px; margin-bottom: 12px;"></div>

<!-- 默认尺寸 -->
<div id="demo-date-picker-default-size" style="width: 200px; margin-bottom: 12px;"></div>

<!-- 小尺寸 -->
<div id="demo-date-picker-small" style="width: 200px;"></div>

<script>
new SaDatePicker('#demo-date-picker-large', {
  placeholder: '请选择日期',
  size: 'large'
});

new SaDatePicker('#demo-date-picker-default-size', {
  placeholder: '请选择日期'
});

new SaDatePicker('#demo-date-picker-small', {
  placeholder: '请选择日期',
  size: 'small'
});

SA.init('body');
</script>
加载 SanoUI 组件中...

禁用状态 ​

通过 disabled: true 禁用日期选择器。

html
<div id="demo-date-picker-disabled-state"></div>

<script>
const picker = new SaDatePicker('#demo-date-picker-disabled-state', {
  value: '2024-12-25',
  disabled: true
});

SA.init('body');
</script>
加载 SanoUI 组件中...

禁用特定日期 ​

通过 disabledDate 函数自定义禁用日期规则。

html
<div id="demo-date-picker-disabled"></div>
<div id="output-disabled-date" style="margin-top: 12px; font-size: 13px; color: #6b7280;">未选择日期</div>

<script>
const picker = new SaDatePicker('#demo-date-picker-disabled', {
  disabledDate: (date) => {
    // 禁用今天之前的日期
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    return date < today;
  },
  onChange: (value) => {
    const output = document.getElementById('output-disabled-date');
    if (output) {
      output.textContent = value ? `选择的日期：${value}` : '未选择日期';
    }
  }
});

SA.init('body');
</script>
加载 SanoUI 组件中...

不可清除 ​

通过 clearable: false 禁用清除按钮。

html
<div id="demo-date-picker-no-clear"></div>

<script>
const picker = new SaDatePicker('#demo-date-picker-no-clear', {
  value: '2024-12-25',
  clearable: false
});

SA.init('body');
</script>
加载 SanoUI 组件中...

API ​

构造函数 ​

javascript
new SaDatePicker(container, config)

参数 ​

参数说明类型默认值
container容器选择器或元素string | HTMLElement-
config配置选项SaDatePickerOptions{}

配置选项 ​

参数说明类型默认值
value当前选中的日期值string''
min最小可选日期stringnull
max最大可选日期stringnull
size尺寸'large' | 'default' | 'small''default'
disabled是否禁用booleanfalse
placeholder占位符文本string'请选择日期'
clearable是否显示清除按钮booleantrue
format日期显示格式string'YYYY-MM-DD'
onChange日期变化回调function(value: string): voidnull
disabledDate禁用特定日期的函数function(date: Date): booleannull

Data 属性 ​

属性说明类型默认值
data-value当前选中的日期值string-
data-min最小可选日期string-
data-max最大可选日期string-
data-size尺寸string'default'
data-disabled是否禁用booleanfalse
data-placeholder占位符文本string'请选择日期'
data-clearable是否显示清除按钮booleantrue

方法 ​

方法名说明参数返回值
getValue()获取当前选中的日期值-string
setValue(value)设置日期值value: string - 日期字符串void
setDisabled(disabled)设置禁用状态disabled: booleanvoid
setSize(size)设置尺寸size: 'large' | 'default' | 'small'void
open()打开日期选择面板-void
close()关闭日期选择面板-void
clear()清空日期值-void
focus()聚焦输入框-void
destroy()销毁实例-void

静态方法 ​

方法名说明参数返回值
normalize(dateStr)标准化日期字符串dateStr: stringstring
formatDate(date, format)格式化日期date: Date | string
format: string		string

实际使用场景 ​

场景 1：日期范围选择 ​

使用两个 DatePicker 实现日期范围选择。

html
<div style="display: flex; gap: 1rem; align-items: center;">
  <div id="start-date" style="width: 200px;"></div>
  <span>至</span>
  <div id="end-date" style="width: 200px;"></div>
</div>

<script>
  SA.init('body');
  
  const startPicker = new SaDatePicker('#start-date', {
    placeholder: '开始日期',
    onChange: (value) => {
      if (value) {
        endPicker.config.min = value;
      }
    }
  });
  
  const endPicker = new SaDatePicker('#end-date', {
    placeholder: '结束日期',
    onChange: (value) => {
      if (value) {
        startPicker.config.max = value;
      }
    }
  });
</script>
加载 SanoUI 组件中...

场景 2：禁用特定日期 ​

禁用周末和节假日。

html
<div id="disabled-date-picker" style="width: 200px;"></div>

<script>
  SA.init('body');
  
  const picker = new SaDatePicker('#disabled-date-picker', {
    placeholder: '选择日期（周末禁用）',
    disabledDate: (date) => {
      // 禁用周末
      const day = date.getDay();
      return day === 0 || day === 6;
    }
  });
</script>
加载 SanoUI 组件中...

场景 3：表单中的日期选择 ​

在表单中使用 DatePicker，配合表单验证。

html
<form class="sa-form" id="date-form" style="max-width: 500px;" data-label-position="right" data-label-width="100px">
  <div class="sa-form-item">
    <label class="sa-form-item__label">出生日期</label>
    <div class="sa-form-item__content">
      <div id="birth-date" style="width: 100%;"></div>
    </div>
  </div>
  
  <div class="sa-form-item">
    <label class="sa-form-item__label">入职日期</label>
    <div class="sa-form-item__content">
      <div id="join-date" style="width: 100%;"></div>
    </div>
  </div>
  
  <div style="margin-top: 20px;">
    <button type="button" class="sa-button sa-button--primary" onclick="submitDateForm()">提交</button>
  </div>
</form>

<script>
  SA.init('body');
  
  const birthPicker = new SaDatePicker('#birth-date', {
    placeholder: '请选择出生日期',
    max: new Date().toISOString().split('T')[0], // 不能选择未来日期
    onChange: (value) => {
      console.log('出生日期:', value);
    }
  });
  
  const joinPicker = new SaDatePicker('#join-date', {
    placeholder: '请选择入职日期',
    min: '2020-01-01', // 最早入职日期
    onChange: (value) => {
      console.log('入职日期:', value);
    }
  });
  
  function submitDateForm() {
    const birthDate = birthPicker.getValue();
    const joinDate = joinPicker.getValue();
    
    if (!birthDate) {
      alert('请选择出生日期');
      return;
    }
    
    if (!joinDate) {
      alert('请选择入职日期');
      return;
    }
    
    alert('提交成功：\n出生日期：' + birthDate + '\n入职日期：' + joinDate);
  }
</script>
加载 SanoUI 组件中...

注意事项 ​

  1. 日期格式：默认使用 YYYY-MM-DD 格式，可以通过 format 配置自定义
  2. 日期范围：min 和 max 必须是有效的日期字符串
  3. 禁用日期：disabledDate 函数接收 Date 对象，返回 true 表示禁用该日期
  4. 自动初始化：DatePicker 组件不会通过 SA.init() 自动初始化，需要手动创建实例

常见问题 ​

Q: 如何获取当前选中的日期？ ​

A: 使用 getValue() 方法：

javascript
const date = picker.getValue();

Q: 如何设置日期值？ ​

A: 使用 setValue() 方法：

javascript
picker.setValue('2024-12-25');

Q: 如何清空日期？ ​

A: 使用 clear() 方法：

javascript
picker.clear();

Q: 如何禁用特定日期？ ​

A: 使用 disabledDate 配置：

javascript
const picker = new SaDatePicker('#picker', {
  disabledDate: (date) => {
    // 禁用今天之前的日期
    return date < new Date();
  }
});

Released under the MIT License.

Copyright © 2025 SanoUI