Tcomb-form-native: how can I set Date format

Created on 6 Jul 2016  Â·  8Comments  Â·  Source: gcanti/tcomb-form-native

I have already read source

if (locals.config.format) { formattedValue = locals.config.format(locals.value); }

but my function need pass two arguments,
for example:formatDate("yyyy-mm-d h:f:s","Tue Jul 5 2016 10:04:52 GMT+0800 (中国标准时间)"),
because my form is dynamically generated, every date format is different。
how can I do it?

Transformers

Most helpful comment

@alvaromb
Thanks for reply, after you reply i again tested code and it start working, i didn't know what was actual reason. But now it is working and HERE IS WORKING EXAMPLE

class DateComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    render() {
        var Person = t.struct({
            effectiveDate: t.Date // a date field
        });
        let myFormatFunction = (format,date) =>{
            return moment(date).format(format);
        }
        var effectiveDate = {
            label: 'Effective Date',
            mode:'date',
            config:{
                format:(date) => myFormatFunction("DD MMM YYYY",date)
            }
        };
        let options = {
            fields: {
               "effectiveDate":effectiveDate
            }
        };
        return (
            <View style={styles.container}>
                <View>
                    <Form ref="documentDate" type={Person} value={this.state.dateValue} options={options} />
                </View>
            </View>
        );
    }
}

I had used momentjs for formating date
I will be glad if this example helps someone
Thanks very much @alvaromb

All 8 comments

Currying?

const myFormatFunction = format => date => formatDate(format, date)
const myFormat1 = 'yyyy-mm-d h:f:s'
const myFormat2 = 'yyyy-mm-d'
// etc...

...

const formOptions = {
  fields: {
    myDate: {
      config: {
        format: myFormatFunction(myFormat1)
      }
    }
  }
}

@gcanti Is there any example, because it is not formatting date in my case.

var effectiveDate = {
            label: 'Effective Date',
            mode:'date',
            config:{
                format:()=>{
                    // i am not getting callback here for formatting date
                }
            },
        };  
let options = {
            fields: {
               "effectiveDate":effectiveDate
            }
        };

How are you setting the options in your Form, @jariwalabhavesh ?

@alvaromb

 var Person = t.struct({
            effectiveDate: t.Date // a date field
        });

<Form ref="documentDate" type={Person} value={this.state.dateValue} options={options} />

is it okay or anything missing?

Mmm, it seems ok. Can you post your full source code?

@alvaromb
Thanks for reply, after you reply i again tested code and it start working, i didn't know what was actual reason. But now it is working and HERE IS WORKING EXAMPLE

class DateComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    render() {
        var Person = t.struct({
            effectiveDate: t.Date // a date field
        });
        let myFormatFunction = (format,date) =>{
            return moment(date).format(format);
        }
        var effectiveDate = {
            label: 'Effective Date',
            mode:'date',
            config:{
                format:(date) => myFormatFunction("DD MMM YYYY",date)
            }
        };
        let options = {
            fields: {
               "effectiveDate":effectiveDate
            }
        };
        return (
            <View style={styles.container}>
                <View>
                    <Form ref="documentDate" type={Person} value={this.state.dateValue} options={options} />
                </View>
            </View>
        );
    }
}

I had used momentjs for formating date
I will be glad if this example helps someone
Thanks very much @alvaromb

@jariwalabhavesh hello, i try yout code but getting error said "typeerror: cannot call a class as a function"

@Mogust
I think it was working, May be issue with in your code. Component is not returning render component

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ishigamii picture ishigamii  Â·  3Comments

alexicum picture alexicum  Â·  6Comments

michaelbenker picture michaelbenker  Â·  3Comments

sibelius picture sibelius  Â·  5Comments

dvlprmartins picture dvlprmartins  Â·  4Comments