{"_id":"@ambilight-taro/date-time-picker","name":"@ambilight-taro/date-time-picker","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ambilight-taro/date-time-picker","version":"1.0.0","description":"![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fdate-time-picker) ![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fdate-time-picker)","main":"./lib/index.js","types":"./lib/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","build:watch":"rollup -cw"},"repository":{"type":"git","url":"git+https://github.com/pesce-salato/ambilight-taro-ui.git"},"author":"","license":"MIT","bugs":{"url":"https://github.com/pesce-salato/ambilight-taro-ui/issues"},"homepage":"https://github.com/pesce-salato/ambilight-taro-ui#readme","devDependencies":{"@ambilight-taro/rollup-config":"*","@ambilight-taro/tsconfig":"*","@tarojs/components":"3.6.19","@tarojs/taro":"3.6.19","@types/react":"^18.2.38","react":"^18.0.0","rollup":"^4.5.1","typescript":"^5.3.2"},"dependencies":{"@ambilight-taro/basic-view":"^1.0.0","@ambilight-taro/core":"^1.0.0","@ambilight-taro/picker":"^1.0.0","@ambilight-taro/use-compatible-uncontrolled-value":"^1.0.0","dayjs":"^1.11.13"},"gitHead":"9ab8a57d0a8fda45ebfa6bd4e46e8ab04a420935","_id":"@ambilight-taro/date-time-picker@1.0.0","_nodeVersion":"20.18.2","_npmVersion":"lerna/7.4.2/node@v20.18.2+arm64 (darwin)","dist":{"integrity":"sha512-3QHQjmk/eiD9Ki/j5Rbwt5dNJrdDQuPQzXHuuYytHIOflaaD9fRWuqElYvbGmJr1SJ88P+CaQ/WjQ3dbnYTsWg==","shasum":"ed04685c2038aee154612a9e8e76008b8979c840","tarball":"https://registry.npmjs.org/@ambilight-taro/date-time-picker/-/date-time-picker-1.0.0.tgz","fileCount":13,"unpackedSize":21696,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDOTzyJQ1/HXP5slgorgWpqLTmznm8vALBMQmjpBEL84wIhAIlHUu/BoQlzabwP6gPKDgSXFOXlCr6IHhT0cGbDFsl8"}]},"_npmUser":{"name":"chicken_bro","email":"ordinary_person@outlook.com"},"directories":{},"maintainers":[{"name":"chicken_bro","email":"ordinary_person@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/date-time-picker_1.0.0_1742741476127_0.3608731822886524"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-23T14:51:16.065Z","1.0.0":"2025-03-23T14:51:16.291Z","modified":"2025-03-23T14:51:16.851Z"},"maintainers":[{"name":"chicken_bro","email":"ordinary_person@outlook.com"}],"description":"![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fdate-time-picker) ![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fdate-time-picker)","homepage":"https://github.com/pesce-salato/ambilight-taro-ui#readme","repository":{"type":"git","url":"git+https://github.com/pesce-salato/ambilight-taro-ui.git"},"bugs":{"url":"https://github.com/pesce-salato/ambilight-taro-ui/issues"},"license":"MIT","readme":"# @ambilight-taro/date-time-picker\n\n![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fdate-time-picker)\n![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fdate-time-picker)\n\n## Installation\n\n```shell\nnpm install @ambilight-taro/date-time-picker\n```\n\n## Usage\n\n日期时间选择器组件，其每一列使用 `AlPicker` 进行渲染\n\n> 组件会自动修正不符合要求的错误数据，此时会在控制台有如下 Warning\n>\n> 🌰 @ambilight-taro/date-time-picker: 自动转换非法值 [2025,5,30] -> [2025,5,29]\n\n> 组件会在初始化的时候自动查询组件本身的高度和选项的高度，故而需注意：\n> - 在初次渲染的时候就保证**组件、选项高度是预期**的，且**后续不改变**（组件默认会和父容器高度一致，可通过样式来设定**组件、选项**高度）\n> - 请保证一列所有的选项**高度保持一致**（出于性能考虑，组件会讲将有选项高度视作一致）\n\n### Basic\n\n```tsx\nimport { AlDateTimePicker } from '@ambilight-taro/date-time-picker'\n\n<AlDateTimePicker />\n```\n\n### 受控\n\n```tsx\nconst [value, setValue] = useState([])\n\n<AlDateTimePicker value={value} onChange={setValue}/>\n```\n\n### 非受控\n\n```tsx\n<AlDatTimePicker \n  defaultValue={[2023,1,1]} \n  onChange={e => console.log(`what a nice day`, e)}\n/>\n```\n\n### 信息丰富度\n\n```tsx\n// 某一天的某分钟\n<AlDateTimePicker fineness=\"minute-of-day\"/>\n```\n\n### 设定范围\n\n```tsx\n// 只允许选择今年的日期\n\n\n<AlDateTimePicker \n  range={{\n    date: [\n      dayjs().startOf('year').toDate().valueOf(),\n      dayjs().endOf('year').toDate().valueOf()\n    ]\n  }} \n/>\n```\n\n### 自定义渲染\n\n```tsx\n\n// 中文展示月份\nconst formatter = useCallback<AlDateTimePickerFormatter>((column, _, detail) => {\n  if (column === 'month') {\n    return [\n      '一月',\n      '二月',\n      '三月',\n      '四月',\n      '五月',\n      '六月',\n      '七月',\n      '八月',\n      '九月',\n      '十月',\n      '十一月',\n      '十二月'\n    ][detail.rowValue]\n  }\n\n  return detail.rowValue.toString().padStart(2, '0')\n}, [])\n\n<AlDateTimePicker formatter={formatter}/>\n```\n\n### 自定义过滤器\n\n```tsx\n// 只允许选择工作日！\n\nconst filter = useCallback<AlDateTimePickerFilter>((column, _, detail) => {\n  if (column === 'day') {\n    const day = dayjs()\n      .set('year', detail.currentSelectedValue[0])\n      .set('month', detail.currentSelectedValue[1])\n      .set('date', detail.rowValue)\n\n    return day.day() !== 0 && day.day() !== 6\n  }\n\n  return true\n}, [])\n\n<AlDateTimePicker filter={filter}/>\n```\n\n\n## Props & Types\n\n```tsx\ninterface AlDateTimePickerProps {\n  /**\n   * 选中值，其长度和每一项代表的值与 `fineness` 有关\n   * - 'year' -> [year]\n   * - 'month' -> [year, month]\n   * - 'day' -> [year, month, day]\n   * - 'hour' -> [hour]\n   * - 'minute' -> [hour, minute]\n   * - 'hour-of-day' -> [year, month, day, hour]\n   * - 'minute-of-day' -> [year, month, day, hour, minute]\n   */\n  value?: number[]\n  /**\n   * 默认选中值，其长度和每一项代表的值与 `fineness` 有关\n   * - 'year' -> [year]\n   * - 'month' -> [year, month]\n   * - 'day' -> [year, month, day]\n   * - 'hour' -> [hour]\n   * - 'minute' -> [hour, minute]\n   * - 'hour-of-day' -> [year, month, day, hour]\n   * - 'minute-of-day' -> [year, month, day, hour, minute]\n   */\n  defaultValue?: number[]\n  /**\n   * 值改变事件\n   */\n  onChange?: (v: number[]) => void\n\n  /**\n   * 日期时间选择器选择数据精细度\n   * @default 'day' value -> [year,month,day]\n   */\n  fineness?: AlDateTimePickerFineness\n  /**\n   * option 自定义格式化展示\n   */\n  formatter?: AlDateTimePickerFormatter\n  /**\n   * 过滤不需要展示的项\n   */\n  filter?: AlDateTimePickerFilter\n  /**\n   * 范围设定\n   */\n  range?: AlDateTimePickerRange\n  className?: string\n  style?: React.CSSProperties | string\n}\n```\n\n```tsx\ninterface AlDateTimePickerRange {\n  /**\n   * 日期范围，限定年、月、日范围（timestamp）\n   * @default [五年前, 五年后]\n   */\n  date?: [number, number]\n  /**\n   * 小时范围\n   * @default [0, 23]\n   */\n  hour?: [number, number]\n  /**\n   * 分钟范围\n   * @default [0, 59]\n   */\n  minute?: [number, number]\n}\n```\n\n```tsx\ntype AlDateTimePickerFineness = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'hour-of-day' | 'minute-of-day'\n\n\ntype AlDateTimePickerColumn = 'day' | 'hour' | 'minute' | 'month' | 'year'\n```\n\n```tsx\ntype AlDateTimePickerFormatter = (\n  /**\n   * 当前对应处理节点的类型\n   */\n  column: AlDateTimePickerColumn,\n  /**\n   * 列下标\n   */\n  columnIndex: number,\n  /**\n   * 上下文细节\n   */\n  detail: {\n    /**\n     * 正在处理的行对应值\n     */\n    rowValue: number\n    /**\n     * 当前整体选择的值\n     */\n    currentSelectedValue: number[]\n  }\n) => React.ReactNode\n```\n\n```tsx\ntype AlDateTimePickerFilter = (\n  /**\n   * 当前对应处理节点的类型\n   */\n  column: EnumValueUnion<AlDateTimePickerColumn>,\n  /**\n   * 列下标\n   */\n  columnIndex: number,\n  /**\n   * 上下文细节\n   */\n  detail: {\n    /**\n     * 正在处理的行对应值\n     */\n    rowValue: number\n    /**\n     * 当前整体选择的值\n     * @warning 只有时间范围大于当前列的选中数据才是准确的（系统会根据设定的 range 和 filter，从大至小确认具体的范围，然后约束其值）\n     */\n    currentSelectedValue: number[]\n  }\n) => boolean\n```\n","readmeFilename":"README.md","_rev":"1-9f362d39c33f65993a3f5b82aeccd8b0"}