日期采摘器|种子 - 爱游戏体育首页

组件

日期选择器

日期选择器使用户能够选择单个日期或日期范围，以便过滤特定时间段的数据。

单日期选择器">

从“@sproutsocial/racine”中导入{SingleDa爱游戏体育官网首页tePicker}

) }" language="jsx" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:monospace;color:#c8cccc">

({date = moment()， onDateChange，…休息}）= >｛常量［stateDate，设置当前日期]= useState(date) const handleDateChange = (date) => { onDateChange && onDateChange(date) setDate(date) } return ( <Box display="flex" justifyContent="center"> <SingleDatePicker date={stateDate} onDateChange={handleDateChange} {...rest} /> </Box> ) }

            
             （
             ｛
             日期
             =
             
             时刻
             （
             ）
             ，
             onDateChange
             ，
             
             …
             休息
             }
             ）
             
             = >
             
             ｛
             
            
            
             
             常量
             
             ［
             stateDate
             ，
             设置当前日期
             ]
             
             =
             
             useState
             （
             日期
             ）
             
            
            
             
            
            
             
             常量
             
             handleDateChange
             
             =
             
             （
             日期
             ）
             
             = >
             
             ｛
             
            
            
             onDateChange
             & &
             
             onDateChange
             （
             日期
             ）
             
            
            
             
             设置当前日期
             （
             日期
             ）
             
            
            
             
             }
             
            
            
             
            
            
             
             返回
             
             （
             
            
            
             
             <
             盒子
             
             显示
             =
             ＂
             flex
             ＂
             
             justifyContent
             =
             ＂
             中心
             ＂
             >
             
            
            
             
             <
             SingleDatePicker
             
            
            
             
             日期
             =
             ｛
             stateDate
             }
             
            
            
             
             onDateChange
             =
             ｛
             handleDateChange
             }
             
            
            
             
             ｛
             …
             休息
             }
             
            
            
             
             />
             
            
            
             
             
             盒子
             >
             
            
            
             
             ）
             
            
            
             
             }

属性">

名字	类型	默认的	描述	需要吗?
`日期`	`?时刻美元`
`onDateChange`	`(date: moment$ moment) =>无效`
`集中`	`布尔`
`onFocusChange`	`({聚焦:布尔值})=>无效`

日期范围选择器">

从“@sproutsocial/racine”中导入{DateRan爱游戏体育官网首页gePicker}

{ const START_DATE = "startDate" const [dates, setDate] = useState({ startDate, endDate }); const [focusedInput, setFocusedInput] = useState(START_DATE); const handleDatesChange = (nextDates) => { onDatesChange && onDatesChange(nextDates); setDate(nextDates); }; const handleFocusChange = (nextFocusedInput) => { onFocusChange && onFocusChange(nextFocusedInput); setFocusedInput( nextFocusedInput === null ? START_DATE : nextFocusedInput ); }; return ( ) }" language="jsx" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:monospace;color:#c8cccc">

{startDate = moment()， endDate = moment().clone()。add(3， "days")， onDatesChange, onFocusChange，…休息}）= >｛常量START_DATE=“startDate可以”常量 [dates, setDate] = useState({ startDate, endDate }); const [focusedInput, setFocusedInput] = useState(START_DATE); const handleDatesChange = (nextDates) => { onDatesChange && onDatesChange(nextDates); setDate(nextDates); }; const handleFocusChange = (nextFocusedInput) => { onFocusChange && onFocusChange(nextFocusedInput); setFocusedInput( nextFocusedInput === null ? START_DATE : nextFocusedInput ); }; return ( <Box display="flex" justifyContent="center"> <DateRangePicker startDate={dates.startDate} endDate={dates.endDate} onDatesChange={handleDatesChange} focusedInput={focusedInput} onFocusChange={handleFocusChange} {...rest} /> </Box> ) }

            
             （
             ｛
             
            
            
             startDate可以
             =
             
             时刻
             （
             ）
             ，
             
            
            
             endDate
             =
             
             时刻
             （
             ）
             。
             克隆
             （
             ）
             。
             添加
             （
             3.
             ，
             
             “天”
             ）
             ，
             
            
            
             onDatesChange
             ，
             
            
            
             onFocusChange
             ，
             
            
            
             
             …
             休息
            
            
             
             }
             ）
             
             = >
             
             ｛
             
            
            
             
            
            
             
             常量
             
             START_DATE
             
             =
             
             “startDate可以”
             
            
            
             
             常量
             
             ［
             日期
             ，
             设置当前日期
             ]
             
             =
             
             useState
             （
             ｛
             startDate可以
             ，
             endDate
             }
             ）
             ；
             
            
            
             
             常量
             
             ［
             focusedInput
             ，
             setFocusedInput
             ]
             
             =
             
             useState
             （
             START_DATE
             ）
             ；
             
            
            
             
            
            
             
             常量
             
             handleDatesChange
             
             =
             
             （
             nextDates
             ）
             
             = >
             
             ｛
             
            
            
             onDatesChange
             & &
             
             onDatesChange
             （
             nextDates
             ）
             ；
             
            
            
             
            
            
             
             设置当前日期
             （
             nextDates
             ）
             ；
             
            
            
             
             }
             ；
             
            
            
             
            
            
             
             常量
             
             handleFocusChange
             
             =
             
             （
             nextFocusedInput
             ）
             
             = >
             
             ｛
             
            
            
             onFocusChange
             & &
             
             onFocusChange
             （
             nextFocusedInput
             ）
             ；
             
            
            
             
            
            
             
             setFocusedInput
             （
             
            
            
             nextFocusedInput
             = = =
             
             零
             
             ？
             
             START_DATE
             
             ：
             nextFocusedInput
            
            
             
             ）
             ；
             
            
            
             
             }
             ；
             
            
            
             
            
            
             
             返回
             
             （
             
            
            
             
             <
             盒子
             
             显示
             =
             ＂
             flex
             ＂
             
             justifyContent
             =
             ＂
             中心
             ＂
             >
             
            
            
             
             <
             DateRangePicker
             
            
            
             
             startDate可以
             =
             ｛
             日期
             。
             startDate可以
             }
             
            
            
             
             endDate
             =
             ｛
             日期
             。
             endDate
             }
             
            
            
             
             onDatesChange
             =
             ｛
             handleDatesChange
             }
             
            
            
             
             focusedInput
             =
             ｛
             focusedInput
             }
             
            
            
             
             onFocusChange
             =
             ｛
             handleFocusChange
             }
             
            
            
             
             ｛
             …
             休息
             }
             
            
            
             
             />
             
            
            
             
             
             盒子
             >
             
            
            
             
             ）
             
            
            
             
             }

属性">

名字	类型	默认的	描述	需要吗?
`startDate可以`	`?时刻美元`
`endDate`	`?时刻美元`
`onDatesChange`	`({startDate: moment$ moment, endDate: moment$ moment}) =>无效`
`focusedInput`	`EnumFocusedInput`
`onFocusChange`	`(EnumFocusedInput) => void`