[英]Customize tcomb-form-native's data filds
I'm trying to customize the Data
field of a tcomb-form-native
module.我正在尝试自定义tcomb-form-native
模块的Data
字段。
I wish the date fields were a classic input field but I still tried different methods, I didn't succeed.我希望日期字段是一个经典的输入字段,但我仍然尝试了不同的方法,但我没有成功。
I tried to override the datepicker
field style but put the style when opening the picker to insert the date and not around the message.我试图覆盖datepicker
字段样式,但在打开选择器时放置样式以插入日期而不是消息周围。
Instead of 'Tap here to select a date' I would like to insert a phrase at will.我想随意插入一个短语,而不是“点击此处到 select 日期”。 How can I do?我能怎么做?
Also, how can I customize the date format?另外,如何自定义日期格式? I tried following this issue of github but it didn't solve the problem.我尝试关注这个问题 github但它没有解决问题。 This is the part of code for formatting the data:这是格式化数据的代码部分:
config: {
format: date => {
let toBeFormatted = new Date(date);
return String('Valida dal' + toBeFormatted.format('DD/MM/YYYY'));
},
dateFormat: date => {
let toBeFormatted = new Date(date);
return String('Valida dal' + toBeFormatted.format('DD/MM/YYYY'));
},
timeFormat: date => {
let toBeFormatted = new Date(date);
return String('Valida dal' + toBeFormatted.format('DD/MM/YYYY'));
},
}
Okay.好的。 I can give you my code.我可以给你我的代码。 I had a little trouble finding it, but finally, everything is in the tcomb documentation.我很难找到它,但最后,一切都在 tcomb 文档中。
The two important points to answer your question are: " defaultValueText " and " format: (date) =>... "回答您的问题的两个重点是:“ defaultValueText ”和“ format: (date) =>... ”
import React, { Component } from "react";
import Expo from "expo";
import t from "tcomb-form-native";
import moment from 'moment';
import { StyleSheet, Text, Date} from "react-native";
import { Button } from "react-native-elements";
const Form = t.form.Form;
Form.stylesheet.dateValue.normal.borderColor = '#d0d2d3';
Form.stylesheet.dateValue.normal.backgroundColor = '#ffffff';
Form.stylesheet.dateValue.normal.borderRadius= 5,
Form.stylesheet.dateValue.normal.color = 'grey';
Form.stylesheet.dateValue.normal.borderWidth = 1;
const User = t.struct({
pseudo: t.String,
birthday: t.Date,
});
const options = {
order: ['pseudo','birthday'],
fields: {
pseudo: {
placeholder: 'Enter Name',
error: 'Name is empty?',
},
birthday: {
mode: 'date',
label: 'birthday',
config: {
defaultValueText: 'Enter birthday', // Allows you to format the PlaceHolders !!
format: (date) => {
return moment(date).format('DD-MM-YYYY'); // Allows you to format the date !!
},
}
},
},
};
... ... ……
export default class SignUp extends Component {
state = {...
render() {
return (
<View style={styles.container}>
<Form
type={User}
ref={c => (this._form = c)} // assign a ref
options={options} //set form options
/>
<Button
title="Sign Up!"
buttonStyle={styles.button}
onPress={this.handleSubmit}
/>
</View>
);
}
}
} ...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.