Unable to get date from DatePicker

[avalkowsky]

Description

I am trying to use DatePicker, however the docs forget to mention the most important thing about DatePicker (actually, it is the same for other input/input-like components, but for others I was able to make it work) :

1. how to get date out of the DatePicker
2. how to set date programmatically in the DatePicker

I tried to use onChange and value, but they did not work so the components renders but I cannot use the set date in any way:
<DatePicker onChange={(event) => onActiveToChange(event.target.value)} value={activeTo} />

Versions

"fiori-fundamentals": "^1.4.9",
"fundamental-react": "^0.5.0"

edit: I checked the source code carefully, but I don't see there any option to set and get the date selected on the DatePicker.

DISCLAIMER:
After triaging an issue, the fundamental-react team will see if it can be reproduced or confirmed. If more information is needed, the fundamental-react team will contact the author. Any issues awaiting responses from the author for more than 7 days will be closed. The author can re-open the issue at a later time if they can present the requested information.

[avalkowsky]

btw. placeholder is 'mm/dd/yyyy' while date is formatted to 'dd/mm/yyyy' ;)

[avalkowsky]

btw. same issue for TimePicker

[brunohaetinger]

@avalkowsky
The way I did to get the date value is like this:

On the datePicker Parent component, use the "ref" attribute.

<DatePicker ref={datePicker => this.myDatePicker = datePicker}/>

Then, you can use that reference from any parent component function just calling:

this.myDatePicker.state.formattedDate

---

Complete component example:
ParentComponent.js

import React, { Component } from 'react';
import { DatePicker } from 'fundamental-react/lib/DatePicker';

class ParentComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    
    printDate = () =>{
        console.log(this.myDatePicker.state.formattedDate);
    }

    render() {
        return (
            <React.Fragment>
                <DatePicker ref={datePicker => this.myDatePicker = datePicker}/>
                <button onClick={this.printDate}>Print Date</button>
            </React.Fragment>
        );
    }
}


export default ParentComponent;

[avalkowsky]

you're right, that could be a temporary workaround however it also requires some additional wrapper to have some oBlur or other event handler applied, so the data would be transferred to Store as soon as they are typed rather than during saving process, like onFormSave let's say.

thanks anyway! Would even help you with some PR, but the code I have for the situation is rather brutal :D 🗡