@dfeidao/fd-m000004

日历控件

https://dfeidao.gitee.io/widgets-mobile/

Installation

yarn add --dev @dfeidao/fd-m000004

Android修改日历控件主题颜色

开发时,使用@dfeidao/fd-m000004日历控件时,如果需要修改控件的主题颜色,需要以下操作

在项目目录下的 android/app/src/main/res/values/styles.xml 文件添加

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <!-- 添加下面两行-->
    <item name="android:timePickerDialogTheme">@style/Dialog.Theme</item>
    <item name="android:datePickerDialogTheme">@style/Dialog.Theme</item>
</style>

<!-- 添加下面全部-->
 <style name="Dialog.Theme" parent="Theme.AppCompat.Light.Dialog">
     <item name="colorPrimary">#FF0000</item>
     <item name="colorPrimaryDark">#FF0000</item>
     <item name="colorAccent">#FF0000</item>
 </style>

如图:

;

属性名	属性说明
cancelTextIOS	IOS上的取消按钮上的文本
confirmTextIOS	IOS上的确认按钮上的文本
customCancelButtonIOS	IOS上的取消按钮的自定义组件
customConfirmButtonIOS	IOS上的确认按钮的自定义组件
customConfirmButtonWhileInteractingIOS	一个用于iOS上的确认按钮的自定义组件，当用户与日期选择器交互时将显示该组件
contentContainerStyleIOS	iOS上ReactNativeModal容器的样式
titleStyle	titleIOS的自定义样式(默认为'Pick a Date')
confirmTextStyle	confirmTextIOS的自定义样式(默认为'Confirm')
cancelTextStyle	cancelTextIOS的自定义样式(默认为'Cancel')
neverDisableConfirmIOS	不禁用iOS上的确认按钮
customTitleContainerIOS	iOS上标题容器的自定义组件
dismissOnBackdropPressIOS	取消日期选择/时间选择时，按下背景(iOS)
hideTitleContainerIOS	在iOS中隐藏标题容器
date	初始化的日期/时间
locale	日期选择器区域设置
isVisible	设置选择器的可见性
is24Hour	设置模式为24小时时间,如果为false，选择器将显示Android上的AM/PM选择器
mode	日期选择类型: 'date' 为选择日期,'time' 为选择时间
datePickerModeAndroid	在旋转器和日历视图之间切换Android上的日期模式 'spinner'
timePickerModeAndroid	在旋转器和时钟视图之间切换Android上的时间模式 'spinner'
titleIOS	iOS上选择器的标题文本
minimumDate	最小日期
maximumDate	最大日期
minuteInterval	可以选择分钟的间隔 (1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)
timeZoneOffsetInMinutes	时区以分钟为单位偏移。
pickerRefCb	返回节点实例
onDateChange	日期改变事件
onConfirm	用户按下确认事件
onCancel	用户按下取消事件
onHideAfterConfirm	关闭动画事件

示例

import M004 from '@dfeidao/fd-m000004';

export default function tpl(a: <T>(action: string, ...args: unknown[]) => ((...args: unknown[]) => void), s: (...class_names: string[]) => {}, d: <T>(d: string) => T, fd: IFeidaoAiMobile) {
	return (<View style={{ flex: 1 }}>
		<M004
			isVisible={d('visible')}
			mode={'datetime'}
			onCancel={a('a001')}
			onConfirm={a('a002')}
		/>
	</View>)
}