日期选择(支持多选)
https://dfeidao.gitee.io/widgets-mobile/
Installation
yarn add --dev @dfeidao/fd-m000005Attributes
selectedStyle
选中时的样式
multiple
是否多选(默认为false)
enable
是否启用(如果为false则点击不会选中)
style
日历样式
todayStyle
今天的样式
values
默认选中
renderItem
自定义日期节点
onDayPress
点击天事件
onDayLongPress
长按天事件
onMonthChange
点击月事件
onPressArrowLeft
点击上一月事件
onPressArrowRight
点击下一月事件
onVisibleMonthsChange
月份改变时事件
自定义日期
import M005 from '@dfeidao/fd-m000005';
import React from 'react';
import { Text, View } from 'react-native';
export default function tpl(a: <T>(action: string, ...args: unknown[]) => ((...args: unknown[]) => void), s: (...class_names: string[]) => {}, d: (d: string) => string | unknown | number | string[], fd: IFeidaoAiMobile) {
const boxstyle = {
alignItems: 'center',
height: 40,
justifyContent: 'center',
width: 40
} as StyleProp<ViewStyle>;
return (<View>
<M005
renderItem={(date) => {
if (date.day <= 6) {
return <View style={boxstyle}>
<Text style={{ fontSize: 16 }}>{date.day}</Text>
<Text style={{ fontSize: 16 }}>$111</Text>
</View>;
} else {
if (date.isDisabled) {
return <View style={boxstyle}>
<Text style={{
alignItems: 'center',
color: 'gray',
justifyContent: 'center'
}}>{date.day}</Text>
</View>;
} else {
return <View style={boxstyle}>
<Text style={{
alignItems: 'center',
color: 'black',
justifyContent: 'center'
}}>{date.day}</Text>
</View>;
}
}
}}
enable={true}
multiple={true}
values={[new Date('2019-08-05').getTime()]}
todayStyle={
{
container: {
alignItems: 'center',
backgroundColor: 'red',
height: 40,
justifyContent: 'center',
width: 40
},
text: {
color: '#000',
fontWeight: 'bold'
}
}
}
selectedStyle={
{
container: {
alignItems: 'center',
backgroundColor: 'green',
height: 40,
justifyContent: 'center',
width: 40
},
text: {
color: 'black',
fontWeight: 'bold'
}
}
}
/>
</View>);
}完整使用示例
import M005 from '@dfeidao/fd-m000005';
export default function tpl(a: <T>(action: string, ...args: unknown[]) => ((...args: unknown[]) => void), s: (...class_names: string[]) => {}, d: (d: string) => string | unknown | number | string[], fd: IFeidaoAiMobile) {
return (<View>
<M005
// 单选
multiple={false}
values={d('values')}
// 多选
// multiple={true}
// values={d('values')}
showElement={<Text style={{ textAlignVertical: 'center', fontSize: 50 }}>显示</Text>}
enable={true}
todayStyle={
{
container: {
backgroundColor: 'red'
},
text: {
color: '#000',
fontWeight: 'bold'
}
}
}
selectedStyle={
{
container: {
backgroundColor: 'green'
},
text: {
color: 'black',
fontWeight: 'bold'
}
}
} />
</View>);
}