blob: f2c489fb8c74733e6f2f2489a56b51d93a46a2db (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
import FieldGrid from './field-grid'
import { useState } from 'react'
import { NumberField } from '@react-spectrum/s2/NumberField'
import { Slider } from '@react-spectrum/s2/Slider'
import { RangeSlider } from '@react-spectrum/s2/RangeSlider'
import { DateField } from '@react-spectrum/s2/DateField'
import { TimeField } from '@react-spectrum/s2/TimeField'
import { DatePicker } from '@react-spectrum/s2/DatePicker'
import { DateRangePicker } from '@react-spectrum/s2/DateRangePicker'
import { Calendar } from '@react-spectrum/s2/Calendar'
import { RangeCalendar, type DateRange } from '@react-spectrum/s2/RangeCalendar'
import styles from './form-examples.module.css'
export default function DateNumberFields({ disabled }: { disabled: boolean }) {
const [day, setDay] = useState('')
const [range, setRange] = useState<DateRange | null>(null)
return (
<>
<section className={styles.section} aria-labelledby="number-fields-title">
<h2 id="number-fields-title">数字与滑块</h2>
<FieldGrid>
<NumberField name="quantity" label="数量" defaultValue={2} minValue={1} maxValue={20} step={1} description="范围 1–20，支持步进按钮。" />
<NumberField name="budget" label="预算" defaultValue={1000} minValue={0} step={100} formatOptions={{ style: 'currency', currency: 'CNY' }} />
<NumberField name="ratio" label="百分比" defaultValue={0.5} minValue={0} maxValue={1} step={0.05} formatOptions={{ style: 'percent' }} />
<Slider name="volume" label="音量" defaultValue={40} minValue={0} maxValue={100} />
<RangeSlider startName="priceMin" endName="priceMax" label="价格区间" defaultValue={{ start: 20, end: 80 }} minValue={0} maxValue={100} />
</FieldGrid>
</section>
<section className={styles.section} aria-labelledby="date-fields-title">
<h2 id="date-fields-title">日期与时间</h2>
<FieldGrid>
<DateField name="date" label="分段日期输入" />
<TimeField name="time" label="时间输入" hourCycle={24} granularity="minute" />
<DatePicker name="appointment" label="日期选择器" />
<DatePicker name="appointmentTime" label="日期和时间" granularity="minute" hourCycle={24} />
<DateRangePicker startName="tripStart" endName="tripEnd" label="日期范围" />
</FieldGrid>
<div className={styles.calendars}>
<div className={styles.stack}><span id="calendar-label">独立日历</span><Calendar isDisabled={disabled} aria-labelledby="calendar-label" onChange={(value) => setDay(value?.toString() ?? '')} /><input type="hidden" name="calendar" value={day} /></div>
<div className={styles.stack}><span id="range-calendar-label">独立范围日历</span><RangeCalendar isDisabled={disabled} aria-labelledby="range-calendar-label" value={range} onChange={setRange} /><input type="hidden" name="calendarStart" value={range?.start.toString() ?? ''} /><input type="hidden" name="calendarEnd" value={range?.end.toString() ?? ''} /></div>
</div>
</section>
</>
)
}
|
