diff --git a/src/config.json b/src/config.json index e4fdcdbbca..f03f604839 100644 --- a/src/config.json +++ b/src/config.json @@ -223,17 +223,17 @@ "dd": true }, { - "version": "3.0.0", - "name": "Col", - "type": "component", - "cName": "列", - "desc": "布局组件中的列", - "sort": 3, - "show": false, - "exportEmpty": true, - "author": "yushuang24", - "dd": true - }, + "version": "3.0.0", + "name": "Col", + "type": "component", + "cName": "列", + "desc": "布局组件中的列", + "sort": 3, + "show": false, + "exportEmpty": true, + "author": "yushuang24", + "dd": true + }, { "version": "3.0.0", "name": "Row", @@ -584,6 +584,19 @@ "author": "dsj", "dd": false }, + { + "version": "3.0.0", + "name": "DatePickerView", + "type": "component", + "cName": "日期选择器视图", + "desc": "DatePickerView 是 DatePicker 的内容区域", + "sort": 16, + "show": true, + "taro": true, + "v15": false, + "dd": false, + "author": "songsong" + }, { "version": "2.0.0", "name": "Form", diff --git a/src/packages/datepicker/datepicker.taro.tsx b/src/packages/datepicker/datepicker.taro.tsx index 4cf3c985eb..0824dd06ee 100644 --- a/src/packages/datepicker/datepicker.taro.tsx +++ b/src/packages/datepicker/datepicker.taro.tsx @@ -4,6 +4,8 @@ import React, { ForwardRefRenderFunction, useImperativeHandle, } from 'react' +import isEqual from 'react-fast-compare' +import classNames from 'classnames' import { View } from '@tarojs/components' import Picker from '@/packages/picker/index.taro' import { useConfig } from '@/packages/configprovider/index.taro' @@ -77,6 +79,9 @@ const InternalPicker: ForwardRefRenderFunction< seconds: lang.seconds, } + const classPrefix = 'nut-datepicker' + const cls = classNames(classPrefix, className) + const [pickerValue, setPickerValue] = useState([]) const [pickerOptions, setPickerOptions] = useState([]) @@ -111,9 +116,8 @@ const InternalPicker: ForwardRefRenderFunction< selectedOptions: PickerOptions, index: number ) => { - const isEqual = new Date(innerDate)?.getTime() === newDate?.getTime() if (newDate && isDate(newDate)) { - if (!isEqual) { + if (!isEqual(new Date(selectedDate)?.getTime(), newDate?.getTime())) { setInnerDate(formatValue(newDate, startDate, endDate)) } onChange?.( @@ -130,8 +134,7 @@ const InternalPicker: ForwardRefRenderFunction< const handleConfirmDateComparison = (newDate: Date | null) => { if (newDate && isDate(newDate)) { - const isEqual = new Date(selectedDate)?.getTime() === newDate?.getTime() - if (!isEqual) { + if (!isEqual(new Date(selectedDate)?.getTime(), newDate?.getTime())) { setSelectedDate(formatValue(newDate, startDate, endDate)) } } @@ -223,7 +226,7 @@ const InternalPicker: ForwardRefRenderFunction< return ( <> {typeof children === 'function' && children(selectedDate)} - + {pickerOptions.length && ( ([]) const [pickerOptions, setPickerOptions] = useState([]) @@ -109,9 +114,8 @@ const InternalPicker: ForwardRefRenderFunction< selectedOptions: PickerOptions, index: number ) => { - const isEqual = new Date(innerDate)?.getTime() === newDate?.getTime() if (newDate && isDate(newDate)) { - if (!isEqual) { + if (!isEqual(new Date(selectedDate)?.getTime(), newDate?.getTime())) { setInnerDate(formatValue(newDate, startDate, endDate)) } onChange?.( @@ -128,8 +132,7 @@ const InternalPicker: ForwardRefRenderFunction< const handleConfirmDateComparison = (newDate: Date | null) => { if (newDate && isDate(newDate)) { - const isEqual = new Date(selectedDate)?.getTime() === newDate?.getTime() - if (!isEqual) { + if (!isEqual(new Date(selectedDate)?.getTime(), newDate?.getTime())) { setSelectedDate(formatValue(newDate, startDate, endDate)) } } @@ -221,7 +224,7 @@ const InternalPicker: ForwardRefRenderFunction< return ( <> {typeof children === 'function' && children(selectedDate)} -
+
{pickerOptions.length && ( +
+
+
+
+
+ 2015 +
+
+ 2016 +
+
+ 2017 +
+
+ 2018 +
+
+ 2019 +
+
+ 2020 +
+
+ 2021 +
+
+ 2022 +
+
+ 2023 +
+
+ 2024 +
+
+ 2025 +
+
+ 2026 +
+
+ 2027 +
+
+ 2028 +
+
+ 2029 +
+
+ 2030 +
+
+ 2031 +
+
+ 2032 +
+
+ 2033 +
+
+ 2034 +
+
+ 2035 +
+
+
+
+
+
+ 01 +
+
+ 02 +
+
+ 03 +
+
+ 04 +
+
+ 05 +
+
+ 06 +
+
+ 07 +
+
+ 08 +
+
+ 09 +
+
+ 10 +
+
+ 11 +
+
+ 12 +
+
+
+
+
+
+ 01 +
+
+ 02 +
+
+ 03 +
+
+ 04 +
+
+ 05 +
+
+ 06 +
+
+ 07 +
+
+ 08 +
+
+ 09 +
+
+ 10 +
+
+ 11 +
+
+ 12 +
+
+ 13 +
+
+ 14 +
+
+ 15 +
+
+ 16 +
+
+ 17 +
+
+ 18 +
+
+ 19 +
+
+ 20 +
+
+ 21 +
+
+ 22 +
+
+ 23 +
+
+ 24 +
+
+ 25 +
+
+ 26 +
+
+ 27 +
+
+ 28 +
+
+ 29 +
+
+ 30 +
+
+ 31 +
+
+
+
+
+
+
+
+`; diff --git a/src/packages/datepickerview/__test__/datepickerview.spec.tsx b/src/packages/datepickerview/__test__/datepickerview.spec.tsx new file mode 100644 index 0000000000..1900e67242 --- /dev/null +++ b/src/packages/datepickerview/__test__/datepickerview.spec.tsx @@ -0,0 +1,153 @@ +import React from 'react' +import { render } from '@testing-library/react' +import '@testing-library/jest-dom' +import { DatePickerView } from '../datepickerview' + +const currentYear = new Date().getFullYear() +test('Show Chinese', async () => { + const { container } = render( + + ) + + expect( + container.querySelectorAll('.nut-pickerview-roller-item')[0] + ).toHaveTextContent('年') +}) + +test('Min date & Max date', async () => { + const { container, rerender } = render( + + ) + + const columns = container.querySelectorAll('.nut-pickerview-list') + const lists = columns[0].querySelectorAll('.nut-pickerview-roller-item-tiled') + expect(lists.length).toBe(3) + rerender( + + ) + rerender( + + ) + rerender( + + ) + rerender( + + ) + const formatter = (type: string, option: any) => { + switch (type) { + case 'year': + option.label += '' + break + case 'month': + option.label += 'M' + break + case 'day': + option.label += 'D' + break + case 'hour': + option.label += 'H' + break + case 'minute': + option.label += 'M' + break + default: + option.label += '' + } + return option + } + rerender( + + ) +}) + +test('Increment step setting', async () => { + const { container } = render( + + ) + + const columns = container.querySelectorAll('.nut-pickerview-list') + const lists = columns[1].querySelectorAll('.nut-pickerview-roller-item') + expect(lists.length).toBe(12) +}) + +test('Filter Time', async () => { + const filter = vi.fn((type, options) => { + if (type === 'hour') { + return options.filter((option: any) => Number(option.value) % 6 === 0) + } + return options + }) + + const { container } = render( + + ) + + const columns = container.querySelectorAll('.nut-pickerview-list') + const lists = columns[3].querySelectorAll('.nut-pickerview-roller-item') + expect(lists.length).toBe(4) +}) diff --git a/src/packages/datepickerview/datepickerview.scss b/src/packages/datepickerview/datepickerview.scss new file mode 100644 index 0000000000..cc903b87ef --- /dev/null +++ b/src/packages/datepickerview/datepickerview.scss @@ -0,0 +1,4 @@ +.nut-datepickerview { + display: flex; + width: 100%; +} diff --git a/src/packages/datepickerview/datepickerview.taro.tsx b/src/packages/datepickerview/datepickerview.taro.tsx new file mode 100644 index 0000000000..5fd29ae0c9 --- /dev/null +++ b/src/packages/datepickerview/datepickerview.taro.tsx @@ -0,0 +1,184 @@ +import React, { useState, useEffect, FunctionComponent } from 'react' +import classNames from 'classnames' +import { View } from '@tarojs/components' +import isEqual from 'react-fast-compare' +import { padZero } from '@/utils/pad-zero' +import PickerView, { + PickerOptions, + PickerValue, +} from '@/packages/pickerview/index.taro' +import { useConfig } from '@/packages/configprovider' +import { usePropsValue } from '@/hooks/use-props-value' +import { ComponentDefaults } from '@/utils/typings' +import { isDate } from '@/utils/is-date' +import { + formatValue, + generateDatePickerRanges, + generatePickerColumnWithCallback, + getDatePartValue, + handlePickerValueChange, +} from '@/packages/datepicker/utils' +import { DatePickerViewProps } from './types' + +const currentYear = new Date().getFullYear() + +const defaultProps = { + ...ComponentDefaults, + type: 'date', + showChinese: false, + threeDimensional: true, + minuteStep: 1, + startDate: new Date(currentYear - 10, 0, 1), + endDate: new Date(currentYear + 10, 11, 31), +} as DatePickerViewProps + +export const DatePickerView: FunctionComponent> = ( + props +) => { + const { + startDate, + endDate, + type, + showChinese, + minuteStep, + defaultValue, + formatter, + filter, + onChange, + threeDimensional, + className, + style, + } = { + ...defaultProps, + ...props, + } + + const classPrefix = 'nut-datepickerview' + const cls = classNames(classPrefix, className) + + const { locale } = useConfig() + const lang = locale.datepicker + + const zhCNType: { [key: string]: string } = { + day: lang.day, + year: lang.year, + month: lang.month, + hour: lang.hour, + minute: lang.min, + seconds: lang.seconds, + } + + const [pickerValue, setPickerValue] = useState([]) + const [pickerOptions, setPickerOptions] = useState([]) + + const [selectedDate, setSelectedDate] = usePropsValue({ + value: props.value && formatValue(props.value, startDate, endDate), + defaultValue: defaultValue && formatValue(defaultValue, startDate, endDate), + finalValue: 0, + }) + + const handleDateComparison = ( + newDate: Date | null, + selectedOptions: PickerOptions, + index: number + ) => { + if (newDate && isDate(newDate)) { + if (!isEqual(new Date(selectedDate)?.getTime(), newDate?.getTime())) { + setSelectedDate(formatValue(newDate, startDate, endDate)) + onChange?.( + selectedOptions, + [ + String(newDate.getFullYear()), + padZero(newDate.getMonth() + 1), + padZero(newDate.getDate()), + ], + index + ) + } + } + } + + const handleChange = ( + selectedOptions: PickerOptions, + selectedValue: PickerValue[], + index: number + ) => { + handlePickerValueChange( + selectedOptions, + selectedValue, + index, + type, + defaultValue || startDate || endDate, + handleDateComparison + ) + } + + const generatePickerColumns = (): PickerOptions[] => { + const dateRanges = generateDatePickerRanges( + type, + selectedDate, + startDate, + endDate + ) + + const columns = dateRanges.map((rangeConfig, columnIndex) => { + const { type: columnType, range } = rangeConfig + const selectedValue = getDatePartValue(columnType, selectedDate) + + const pickerColumn = generatePickerColumnWithCallback( + range[0], + range[1], + selectedValue, + columnType, + minuteStep, + (selectedIndex, options) => { + pickerValue[columnIndex] = options[selectedIndex]?.value + setPickerValue([...pickerValue]) + }, + showChinese, + zhCNType, + formatter + ) + + if (filter?.(columnType, pickerColumn)) { + return filter(columnType, pickerColumn) + } + + return pickerColumn + }) + + return columns || [] + } + + useEffect(() => { + if ( + !isEqual( + new Date(selectedDate)?.getTime(), + new Date(selectedDate)?.getTime() + ) + ) { + setSelectedDate(selectedDate) + } + }, [selectedDate]) + + useEffect(() => { + setPickerOptions(generatePickerColumns()) + }, [selectedDate, startDate, endDate]) + + return ( + + {pickerOptions.length && ( + { + handleChange(selectedOptions, value, index) + }} + threeDimensional={threeDimensional} + /> + )} + + ) +} + +DatePickerView.displayName = 'NutDatePickerView' diff --git a/src/packages/datepickerview/datepickerview.tsx b/src/packages/datepickerview/datepickerview.tsx new file mode 100644 index 0000000000..fb3742820e --- /dev/null +++ b/src/packages/datepickerview/datepickerview.tsx @@ -0,0 +1,183 @@ +import React, { useState, useEffect, FunctionComponent } from 'react' +import classNames from 'classnames' +import isEqual from 'react-fast-compare' +import { padZero } from '@/utils/pad-zero' +import PickerView, { + PickerOptions, + PickerValue, +} from '@/packages/pickerview/index' +import { useConfig } from '@/packages/configprovider' +import { usePropsValue } from '@/hooks/use-props-value' +import { ComponentDefaults } from '@/utils/typings' +import { isDate } from '@/utils/is-date' +import { + formatValue, + generateDatePickerRanges, + generatePickerColumnWithCallback, + getDatePartValue, + handlePickerValueChange, +} from '@/packages/datepicker/utils' +import { DatePickerViewProps } from './types' + +const currentYear = new Date().getFullYear() + +const defaultProps = { + ...ComponentDefaults, + type: 'date', + showChinese: false, + threeDimensional: true, + minuteStep: 1, + startDate: new Date(currentYear - 10, 0, 1), + endDate: new Date(currentYear + 10, 11, 31), +} as DatePickerViewProps + +export const DatePickerView: FunctionComponent> = ( + props +) => { + const { + startDate, + endDate, + type, + showChinese, + minuteStep, + defaultValue, + formatter, + filter, + onChange, + threeDimensional, + className, + style, + } = { + ...defaultProps, + ...props, + } + + const classPrefix = 'nut-datepickerview' + const cls = classNames(classPrefix, className) + + const { locale } = useConfig() + const lang = locale.datepicker + + const zhCNType: { [key: string]: string } = { + day: lang.day, + year: lang.year, + month: lang.month, + hour: lang.hour, + minute: lang.min, + seconds: lang.seconds, + } + + const [pickerValue, setPickerValue] = useState([]) + const [pickerOptions, setPickerOptions] = useState([]) + + const [selectedDate, setSelectedDate] = usePropsValue({ + value: props.value && formatValue(props.value, startDate, endDate), + defaultValue: defaultValue && formatValue(defaultValue, startDate, endDate), + finalValue: 0, + }) + + const handleDateComparison = ( + newDate: Date | null, + selectedOptions: PickerOptions, + index: number + ) => { + if (newDate && isDate(newDate)) { + if (!isEqual(new Date(selectedDate)?.getTime(), newDate?.getTime())) { + setSelectedDate(formatValue(newDate, startDate, endDate)) + onChange?.( + selectedOptions, + [ + String(newDate.getFullYear()), + padZero(newDate.getMonth() + 1), + padZero(newDate.getDate()), + ], + index + ) + } + } + } + + const handleChange = ( + selectedOptions: PickerOptions, + selectedValue: PickerValue[], + index: number + ) => { + handlePickerValueChange( + selectedOptions, + selectedValue, + index, + type, + defaultValue || startDate || endDate, + handleDateComparison + ) + } + + const generatePickerColumns = (): PickerOptions[] => { + const dateRanges = generateDatePickerRanges( + type, + selectedDate, + startDate, + endDate + ) + + const columns = dateRanges.map((rangeConfig, columnIndex) => { + const { type: columnType, range } = rangeConfig + const selectedValue = getDatePartValue(columnType, selectedDate) + + const pickerColumn = generatePickerColumnWithCallback( + range[0], + range[1], + selectedValue, + columnType, + minuteStep, + (selectedIndex, options) => { + pickerValue[columnIndex] = options[selectedIndex]?.value + setPickerValue([...pickerValue]) + }, + showChinese, + zhCNType, + formatter + ) + + if (filter?.(columnType, pickerColumn)) { + return filter(columnType, pickerColumn) + } + + return pickerColumn + }) + + return columns || [] + } + + useEffect(() => { + if ( + !isEqual( + new Date(selectedDate)?.getTime(), + new Date(selectedDate)?.getTime() + ) + ) { + setSelectedDate(selectedDate) + } + }, [selectedDate]) + + useEffect(() => { + setPickerOptions(generatePickerColumns()) + }, [selectedDate, startDate, endDate]) + + return ( +
+ {pickerOptions.length && ( + { + handleChange(selectedOptions, value, index) + }} + threeDimensional={threeDimensional} + /> + )} +
+ ) +} + +DatePickerView.displayName = 'NutDatePickerView' diff --git a/src/packages/datepickerview/demo.taro.tsx b/src/packages/datepickerview/demo.taro.tsx new file mode 100644 index 0000000000..3e4da160ee --- /dev/null +++ b/src/packages/datepickerview/demo.taro.tsx @@ -0,0 +1,38 @@ +import React from 'react' +import Taro from '@tarojs/taro' +import { ScrollView, View } from '@tarojs/components' +import { useTranslate } from '@/sites/assets/locale/taro' +import Header from '@/sites/components/header' +import Demo1 from './demos/taro/demo1' +import Demo2 from './demos/taro/demo2' + +const DatePickerViewDemo = () => { + const [translated] = useTranslate({ + 'zh-CN': { + basic: '选择日期', + mmdd: '选择月日', + }, + + 'zh-TW': { + basic: '選擇日期', + mmdd: '選擇月日', + }, + 'en-US': { + basic: 'Choose Date', + mmdd: 'Choose Month-Day', + }, + }) + return ( + <> +
+ + {translated.basic} + +

{translated.mmdd}

+ + + + ) +} + +export default DatePickerViewDemo diff --git a/src/packages/datepickerview/demo.tsx b/src/packages/datepickerview/demo.tsx new file mode 100644 index 0000000000..636354eb7c --- /dev/null +++ b/src/packages/datepickerview/demo.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { useTranslate } from '@/sites/assets/locale' +import Demo1 from './demos/h5/demo1' +import Demo2 from './demos/h5/demo2' + +const DatePickerViewDemo = () => { + const [translated] = useTranslate({ + 'zh-CN': { + basic: '选择日期', + mmdd: '选择月日', + }, + 'zh-TW': { + basic: '選擇日期', + mmdd: '選擇月日', + }, + 'en-US': { + basic: 'Choose Date', + mmdd: 'Choose Month-Day', + }, + }) + + return ( + <> +
+

{translated.basic}

+ +

{translated.mmdd}

+ +
+ + ) +} +export default DatePickerViewDemo diff --git a/src/packages/datepickerview/demos/h5/demo1.tsx b/src/packages/datepickerview/demos/h5/demo1.tsx new file mode 100644 index 0000000000..0d023d57b5 --- /dev/null +++ b/src/packages/datepickerview/demos/h5/demo1.tsx @@ -0,0 +1,78 @@ +import React, { useState } from 'react' +import { + DatePickerView, + Cell, + PickerValue, + PickerOptions, + CellGroup, +} from '@nutui/nutui-react' +import isEqual from 'react-fast-compare' + +const useDatePicker = (initialDate: Date) => { + const defaultDateObj = { + year: initialDate.getFullYear(), + month: initialDate.getMonth() + 1, + day: initialDate.getDate(), + } + + const defaultDesc = `${defaultDateObj.year}年${defaultDateObj.month}月${defaultDateObj.day}日` + const defaultValue = Object.values(defaultDateObj).join('-') + + return { defaultDesc, defaultValue } +} + +const Demo1 = () => { + const defaultDate = new Date() + const { defaultDesc: defaultDesc1, defaultValue: defaultValue1 } = + useDatePicker(defaultDate) + const { defaultDesc: defaultDesc2, defaultValue: defaultValue2 } = + useDatePicker(defaultDate) + + const [desc1, setDesc1] = useState(defaultDesc1) + + const [value, setValue] = useState(defaultValue2) + const [desc2, setDesc2] = useState(defaultDesc2) + + const handleChange = + (setDesc: (desc: string) => void, setValue?: (value: string) => void) => + (selectedOptions: PickerOptions, value: PickerValue[]) => { + if (setValue) { + if (isEqual(value, ['2026', '02', '26'])) { + setValue('2026/03/22') + setDesc('2026年03月22日') + } else { + setValue(value.join('/')) + setDesc(selectedOptions.map((option) => option.label).join('')) + } + } else { + setDesc(selectedOptions.map((option) => option.label).join('')) + } + } + + return ( + <> + + + + + + + + + + + + + + ) +} + +export default Demo1 diff --git a/src/packages/datepickerview/demos/h5/demo2.tsx b/src/packages/datepickerview/demos/h5/demo2.tsx new file mode 100644 index 0000000000..2d627dc6b4 --- /dev/null +++ b/src/packages/datepickerview/demos/h5/demo2.tsx @@ -0,0 +1,33 @@ +import React, { useState } from 'react' +import { + DatePickerView, + Cell, + PickerOptions, + CellGroup, +} from '@nutui/nutui-react' + +const Demo2 = () => { + const defaultValue = new Date() + const [desc, setDesc] = useState( + `${defaultValue.getMonth() + 1}-${defaultValue.getDate()}` + ) + + const onChange = (options: PickerOptions) => { + setDesc(options.map((option) => option.label).join('-')) + } + return ( + + + + onChange(selectedOptions)} + /> + + + ) +} +export default Demo2 diff --git a/src/packages/datepickerview/demos/taro/demo1.tsx b/src/packages/datepickerview/demos/taro/demo1.tsx new file mode 100644 index 0000000000..2ae37c258b --- /dev/null +++ b/src/packages/datepickerview/demos/taro/demo1.tsx @@ -0,0 +1,78 @@ +import React, { useState } from 'react' +import { + DatePickerView, + Cell, + PickerValue, + PickerOptions, + CellGroup, +} from '@nutui/nutui-react-taro' +import isEqual from 'react-fast-compare' + +const useDatePicker = (initialDate: Date) => { + const defaultDateObj = { + year: initialDate.getFullYear(), + month: initialDate.getMonth() + 1, + day: initialDate.getDate(), + } + + const defaultDesc = `${defaultDateObj.year}年${defaultDateObj.month}月${defaultDateObj.day}日` + const defaultValue = Object.values(defaultDateObj).join('-') + + return { defaultDesc, defaultValue } +} + +const Demo1 = () => { + const defaultDate = new Date() + const { defaultDesc: defaultDesc1, defaultValue: defaultValue1 } = + useDatePicker(defaultDate) + const { defaultDesc: defaultDesc2, defaultValue: defaultValue2 } = + useDatePicker(defaultDate) + + const [desc1, setDesc1] = useState(defaultDesc1) + + const [value, setValue] = useState(defaultValue2) + const [desc2, setDesc2] = useState(defaultDesc2) + + const handleChange = + (setDesc: (desc: string) => void, setValue?: (value: string) => void) => + (selectedOptions: PickerOptions, value: PickerValue[]) => { + if (setValue) { + if (isEqual(value, ['2026', '02', '26'])) { + setValue('2026/03/22') + setDesc('2026年03月22日') + } else { + setValue(value.join('/')) + setDesc(selectedOptions.map((option) => option.label).join('')) + } + } else { + setDesc(selectedOptions.map((option) => option.label).join('')) + } + } + + return ( + <> + + + + + + + + + + + + + + ) +} + +export default Demo1 diff --git a/src/packages/datepickerview/demos/taro/demo2.tsx b/src/packages/datepickerview/demos/taro/demo2.tsx new file mode 100644 index 0000000000..68c59725a0 --- /dev/null +++ b/src/packages/datepickerview/demos/taro/demo2.tsx @@ -0,0 +1,33 @@ +import React, { useState } from 'react' +import { + DatePickerView, + Cell, + PickerOptions, + CellGroup, +} from '@nutui/nutui-react-taro' + +const Demo2 = () => { + const defaultValue = new Date() + const [desc, setDesc] = useState( + `${defaultValue.getMonth() + 1}-${defaultValue.getDate()}` + ) + + const onChange = (options: PickerOptions) => { + setDesc(options.map((option) => option.label).join('-')) + } + return ( + + + + onChange(selectedOptions)} + /> + + + ) +} +export default Demo2 diff --git a/src/packages/datepickerview/doc.en-US.md b/src/packages/datepickerview/doc.en-US.md new file mode 100644 index 0000000000..03ab86f457 --- /dev/null +++ b/src/packages/datepickerview/doc.en-US.md @@ -0,0 +1,43 @@ +# DatePicker + +Used to select time, support date and time dimensions. + +## Import + +```tsx +import { DatePickerView } from '@nutui/nutui' +``` + +### Choose Date + +:::demo + + + +::: + +### Choose Month-Day + +:::demo + + + +::: + +## DatePicker + +### Props + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| defaultValue | Default date | `Date` | `null` | +| value | controlled date | `Date` | `null` | +| type | Can be set to date time year-month month-day datehour hour-minutes | `string` | `date` | +| minuteStep | Option minute step | `number` | `1` | +| showChinese | Show Chinese | `boolean` | `false` | +| startDate | Start date | `Date` | `Ten years ago on January 1` | +| endDate | End date | `Date` | `Ten years later on December 31` | +| formatter | Option text formatter | `(type: string, option: PickerOption) => PickerOption` | `-` | +| filter | Option filter | `(type: string, options: PickerOptions) => PickerOptions` | `-` | +| threeDimensional | Turn on 3D effects | `boolean` | `true` | +| onChange | Emitted when current option changed. | `(options, value, index) => void` | `-` | diff --git a/src/packages/datepickerview/doc.md b/src/packages/datepickerview/doc.md new file mode 100644 index 0000000000..fa1e52b734 --- /dev/null +++ b/src/packages/datepickerview/doc.md @@ -0,0 +1,47 @@ +# DatePickerView 日期选择器视图 + +时间选择器，支持日期、年月、时分等维度。 + +## 引入 + +```tsx +import { DatePickerView } from '@nutui/nutui' +``` + +## 示例代码 + +### 选择日期 + +:::demo + + + +::: + +### 选择月日 + +通过 type 属性来定义需要选择的时间类型。将 type 设置为 year-month 即可选择年份和月份，设置为 month-day 即可选择月份和日期。 + +:::demo + + + +::: + +## DatePicker + +### Props + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| defaultValue | 初始值 | `Date` | `null` | +| value | 受控 | `Date` | `null` | +| type | 类时间类型，可选值 date time year-month month-day datehour datetime hour-minutes | `string` | `date` | +| minuteStep | 分钟步进值 | `number` | `1` | +| showChinese | 每列是否展示中文 | `boolean` | `false` | +| startDate | 开始日期 | `Date` | `十年前` | +| endDate | 结束日期 | `Date` | `十年后` | +| formatter | 选项格式化函数 | `(type: string, option: PickerOption) => PickerOption` | `-` | +| filter | 选项过滤函数 | `(type: string, options: PickerOptions) => PickerOptions` | `-` | +| threeDimensional | 是否开启3D效果 | `boolean` | `true` | +| onChange | 选项改变时触发 | `(options, value, index) => void` | `-` | diff --git a/src/packages/datepickerview/doc.taro.md b/src/packages/datepickerview/doc.taro.md new file mode 100644 index 0000000000..e68ed5b298 --- /dev/null +++ b/src/packages/datepickerview/doc.taro.md @@ -0,0 +1,47 @@ +# DatePickerView 日期选择器视图 + +时间选择器，支持日期、年月、时分等维度。 + +## 引入 + +```tsx +import { DatePickerView } from '@nutui/nutui-taro' +``` + +## 示例代码 + +### 选择日期 + +:::demo + + + +::: + +### 选择月日 + +通过 type 属性来定义需要选择的时间类型。将 type 设置为 year-month 即可选择年份和月份，设置为 month-day 即可选择月份和日期。 + +:::demo + + + +::: + +## DatePicker + +### Props + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| defaultValue | 初始值 | `Date` | `null` | +| value | 受控 | `Date` | `null` | +| type | 类时间类型，可选值 date time year-month month-day datehour datetime hour-minutes | `string` | `date` | +| minuteStep | 分钟步进值 | `number` | `1` | +| showChinese | 每列是否展示中文 | `boolean` | `false` | +| startDate | 开始日期 | `Date` | `十年前` | +| endDate | 结束日期 | `Date` | `十年后` | +| formatter | 选项格式化函数 | `(type: string, option: PickerOption) => PickerOption` | `-` | +| filter | 选项过滤函数 | `(type: string, options: PickerOptions) => PickerOptions` | `-` | +| threeDimensional | 是否开启3D效果 | `boolean` | `true` | +| onChange | 选项改变时触发 | `(options, value, index) => void` | `-` | diff --git a/src/packages/datepickerview/doc.zh-TW.md b/src/packages/datepickerview/doc.zh-TW.md new file mode 100644 index 0000000000..e24427b108 --- /dev/null +++ b/src/packages/datepickerview/doc.zh-TW.md @@ -0,0 +1,47 @@ +# DatePickerView 日期选择器視圖 + +時間選擇器，支持日期、年月、時分等維度。 + +## 引入 + +```tsx +import { DatePickerView } from '@nutui/nutui' +``` + +## 示例代碼 + +### 選擇日期 + +:::demo + + + +::: + +### 選擇月日 + +通過 type 屬性來定義需要選擇的時間類型。將 type 設置為 year-month 即可選擇年份和月份，設置為 month-day 即可選擇月份和日期。 + +:::demo + + + +::: + +## DatePicker + +### Props + +| 屬性 | 說明 | 類型 | 默認值 | +| --- | --- | --- | --- | +| defaultValue | 初始值 | `Date` | `null` | +| value | 受控 | `Date` | `null` | +| type | 類時間類型，可選值 date time year-month month-day datehour datetime hour-minutes | `string` | `date` | +| minuteStep | 分鐘步進值 | `number` | `1` | +| showChinese | 每列是否展示中文 | `boolean` | `false` | +| startDate | 開始日期 | `Date` | `十年前` | +| endDate | 結束日期 | `Date` | `十年後` | +| formatter | 選項格式化函數 | `(type: string, option: PickerOption) => PickerOption` | `-` | +| filter | 選項過濾函數 | `(type: string, options: PickerOptions) => PickerOptions` | `-` | +| threeDimensional | 是否開啟3D效果 | `boolean` | `true` | +| onChange | 選項改變時觸發 | `(options, value, index) => void` | `-` | diff --git a/src/packages/datepickerview/index.taro.ts b/src/packages/datepickerview/index.taro.ts new file mode 100644 index 0000000000..0a801ae90f --- /dev/null +++ b/src/packages/datepickerview/index.taro.ts @@ -0,0 +1,4 @@ +import { DatePickerView } from './datepickerview.taro' + +export type { DatePickerViewProps } from './types' +export default DatePickerView diff --git a/src/packages/datepickerview/index.ts b/src/packages/datepickerview/index.ts new file mode 100644 index 0000000000..a200f20d23 --- /dev/null +++ b/src/packages/datepickerview/index.ts @@ -0,0 +1,4 @@ +import { DatePickerView } from './datepickerview' + +export type { DatePickerViewProps } from './types' +export default DatePickerView diff --git a/src/packages/datepickerview/types.ts b/src/packages/datepickerview/types.ts new file mode 100644 index 0000000000..3f6a8414e0 --- /dev/null +++ b/src/packages/datepickerview/types.ts @@ -0,0 +1,31 @@ +import { BasicComponent } from '@/utils/typings' +import { + PickerOptions, + PickerValue, + PickerOption, +} from '@/packages/pickerview/types' + +export interface DatePickerViewProps extends BasicComponent { + value?: Date + defaultValue?: Date + type: + | 'date' + | 'time' + | 'year-month' + | 'month-day' + | 'datehour' + | 'datetime' + | 'hour-minutes' + showChinese: boolean + minuteStep: number + startDate: Date + endDate: Date + threeDimensional: boolean + formatter: (type: string, option: PickerOption) => PickerOption + filter: (type: string, options: PickerOptions) => PickerOptions + onChange: ( + selectedOptions: PickerOptions, + selectedValue: PickerValue[], + columnIndex: number + ) => void +}