@ datepicker- react/ styled (已删除)
建立一个易于国际化、可访问、便于移动的网络取枣图书馆 有风格的组件.
现场播放
关于正在取枣者的例子,请访问 https://datepicker-react.netlify.com/ 页面存档备份,存于互联网档案馆。 。 。 .
或
在自己的电脑上运行演示:
- 克隆此寄存器
yarn install && bootstrapyarn storybook- 访问http://localhost:6006/
开始
安装
yarn add @datepicker-react/styled styled-components
包含组件
import {DateRangeInput, DateSingleInput, Datepicker} from '@datepicker-react/styled'
日期距离输入
这个 DateRangeInput 是完全控制的组件,允许用户选择日期范围。 你个
能够使用 startDate, (中文(简体) ), endDate,以及 onDatesChange 显示的道具
见下文。 同样,您可以控制哪些输入是焦点和日历可见度(例如:
日历仅在 focusedInput 与 focusedInput 财务报告和审定财务报表 onFocusChange
道具如下所示.
这是最低的 需求 设置您需要得到 DateRangeInput 工作时间:
不支持 IE11
import React, {useReducer} from 'react'
import {DateRangeInput} from '@datepicker-react/styled'
const initialState = {
startDate: null,
endDate: null,
focusedInput: null,
}
function reducer(state, action) {
switch (action.type) {
case 'focusChange':
return {...state, focusedInput: action.payload}
case 'dateChange':
return action.payload
default:
throw new Error()
}
}
function App() {
const [state, dispatch] = useReducer(reducer, initialState)
return (
<DateRangeInput
onDatesChange={data => dispatch({type: 'dateChange', payload: data})}
onFocusChange={focusedInput => dispatch({type: 'focusChange', payload: focusedInput})}
startDate={state.startDate} // Date or null
endDate={state.endDate} // Date or null
focusedInput={state.focusedInput} // START_DATE, END_DATE or null
/>
)
}
以下列出其他 备选 你可以提供道具给 DateRangeInput 改为
将外表和行为定制为心愿.
displayFormat?: string | FormatFunction // Default: 'MM/DD/YYYY'
phrases?: DateRangeInputPhrases
showStartDateCalendarIcon?: boolean // Default: true
showEndDateCalendarIcon?: boolean // Default: true
onClose?(): void
vertical?: boolean // Default: false
showResetDates?: boolean // Default: true
showSelectedDates?: boolean // Default: true
showClose?: boolean // Default: true
rtl?: boolean // Default: false
placement?: 'top' | 'bottom' // Default: bottom
unavailableDates?: Date[] // Default: []
minBookingDate?: Date
maxBookingDate?: Date
numberOfMonths?: number // Default: 2
minBookingDays?: number // Default: 1
exactMinBookingDays?: boolean // Default: false
firstDayOfWeek?: FirstDayOfWeek // Default: 1
initialVisibleMonth?: Date
isDateBlocked?(date: Date): boolean
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNode
startDateInputId?: string
endDateInputId?: string
摘取日期者
这个 Datepicker 是完全控制的组件,允许用户选择日期范围。 你们可以
使用 startDate, (中文(简体) ), endDate,以及 onDatesChange 显示的道具
见下文。 类似地,您可以控制哪个输入与 focusedInput 道具 (英语).
这是最低的 需求 设置您需要得到 Datepicker 工作时间:
不支持 IE11
import React, {useState} from 'react'
import {Datepicker, START_DATE} from '@datepicker-react/styled'
function App() {
const [state, setState] = useState({
startDate: null,
endDate: null,
focusedInput: START_DATE,
})
function handleDatesChange(data: OnDatesChangeProps) {
if (!data.focusedInput) {
setState({...data, focusedInput: START_DATE})
} else {
setState(data)
}
}
return (
<Datepicker
onDatesChange={handleDatesChange}
startDate={state.startDate} // Date or null
endDate={state.endDate} // Date or null
focusedInput={state.focusedInput} // START_DATE, END_DATE or null
/>
)
}
以下列出其他 备选 你可以提供道具给 Datepicker 要自定义
外表和行为符合你内心的欲望.
phrases?: DatepickerPhrases
displayFormat?: string | FormatFunction // Default: 'MM/DD/YYYY'
onClose?(): void
showResetDates?: boolean // Default: true
showSelectedDates?: boolean // Default: true
showClose?: boolean // Default: true
vertical?: boolean // Default: false
rtl?: boolean // Default: false
unavailableDates?: Date[] // Default: []
minBookingDate?: Date
maxBookingDate?: Date
numberOfMonths?: number // Default: 2
minBookingDays?: number // Default: 1
exactMinBookingDays?: boolean // Default: false
firstDayOfWeek?: FirstDayOfWeek // Default: 0
initialVisibleMonth?: Date
isDateBlocked?(date: Date): boolean
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNode
日期单输入
这个 DateSingleInput 是一个完全控制的组件,允许用户选择日期。 你们可以
使用 date 财务报告和审定财务报表 onDateChange 道具如下所示. 同样,你
能够控制日历的能见度(日历仅在 showDatepicker 实值 true与
页:1 showDatepicker 财务报告和审定财务报表 onFocusChange 道具如下所示.
这是最低的 需求 设置您需要得到 DateSingleInput 工作时间:
不支持 IE11
import React, {useReducer} from 'react'
import {DateSingleInput} from '@datepicker-react/styled'
const initialState = {
date: null,
showDatepicker: false,
}
function reducer(state, action) {
switch (action.type) {
case 'focusChange':
return {...state, showDatepicker: action.payload}
case 'dateChange':
return action.payload
default:
throw new Error()
}
}
function App() {
const [state, dispatch] = useReducer(reducer, initialState)
return (
<DateSingleInput
onDateChange={data => dispatch({type: 'dateChange', payload: data})}
onFocusChange={focusedInput => dispatch({type: 'focusChange', payload: focusedInput})}
date={state.date} // Date or null
showDatepicker={state.showDatepicker} // Boolean
/>
)
}
以下列出其他 备选 你可以提供道具给 DateSingleInput 改为
将外表和行为定制为心愿.
minBookingDate?: Date
maxBookingDate?: Date
numberOfMonths?: number
firstDayOfWeek?: FirstDayOfWeek
displayFormat?: string | FormatFunction
phrases?: DateSingleInputPhrases
showCalendarIcon?: boolean
vertical?: boolean
showResetDate?: boolean
showClose?: boolean
rtl?: boolean
placement?: 'top' | 'bottom'
unavailableDates?: Date[] // Default: []
initialVisibleMonth?: Date
isDateBlocked?(date: Date): boolean
onClose?(): void
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNode
inputId?: string
他们
@datepicker-react/styled 支持带有样式组件的主题 ThemeProvider 财务报告和审定财务报表
Styled System 主题样式.
<ThemeProvider
theme={{
breakpoints: ['32em', '48em', '64em'],
reactDatepicker: {
daySize: [36, 40],
fontFamily: 'system-ui, -apple-system',
colors: {
accessibility: '#D80249',
selectedDay: '#f7518b',
selectedDayHover: '#F75D95',
primaryColor: '#d8366f',
},
},
}}
>
...
</ThemeProvider>
如何建造自己的取枣机?
很简单 使用 反应钩 (@ datepicker- react/ hooks)。 。 。 .
谁用
文章
许可证
获得麻省理工学院许可,版权为2019年至今的Miha Sedej.
见 自由主义 更多信息.