基本介绍

@white-give/datepicker 是一个基于 Svelte 的本土化开源日期选择器组件。它提供了日期时间面板选择功能。 支持 Svelte、Vue3、React 等框架。

tip: 组件基于 Svelte 开发，不依赖任何框架。由于只需要面板展示，所以不支持触发元素。

安装

npm install @white-give/datepicker
或
yarn add @white-give/datepicker

快速上手

// svelte
<script>
import '@white-give/datepicker';

let date = '2024-01-01';

const handleChange = (e) => {
  console.log('change:', e.detail.value);
  date = e.detail.value;
};
</script>

<white-date-picker
  value={date}
  format="YYYY-MM-DD"
  on:change={handleChange}
/>

// vue3，需要配置 Vue 编译器忽略自定义元素标签，否则控制台会报警告。
<template>
  <white-date-picker
    :value="date"
    format="YYYY-MM-DD"
    @change="handleChange"
  ></white-date-picker>
</template>

<script setup>
import '@white-give/datepicker';

const date = ref('2024-01-01');

const handleChange = (e) => {
  console.log('日期改变:', e.detail.value);
  date.value = e.detail.value;
};
</script>

// react
import '@white-give/datepicker';

function App() {

  const pickerRef = useRef(null);
  const [date, setDate] = useState('2024-01-01');

  useEffect(() => {
    const element = pickerRef.current;

    // 处理 change 事件
    const handleChange = (e) => {
      const newValue = e.detail.value;
      console.log('日期改变:', newValue);
      setDate(newValue);
    };

    if (element) {
      element.addEventListener('change', handleChange);
    }

    // 清理监听器
    return () => {
      if (element) {
        element.removeEventListener('change', handleChange);
      }
    };
  }, []);

  return (
    <div>
      <white-date-picker
        ref={pickerRef}
        value={date}
        format="YYYY-MM-DD"
      ></white-date-picker>
    </div>
  );
}

作为 Web Component 使用

import '@white-give/datepicker';

<white-date-picker></white-date-picker>

配置项

配置项 | 说明 | 类型 | 默认值 ---|---|---|--- value | 绑定值 | string | - format | 日期格式 | string | 'YYYY-MM-DD' scrollToSelected | 是否滚动到选中日期 | boolean | false

事件

事件名 | 说明 | 回调参数 ---|---|--- change | 值改变时触发 | (value: string) => void