Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Empty the calendar #8

Open
Angelk90 opened this issue Nov 12, 2019 · 6 comments
Open

Empty the calendar #8

Angelk90 opened this issue Nov 12, 2019 · 6 comments

Comments

@Angelk90
Copy link

Hi @aadilhasan ,

Is there a way to empty the calendar?
I wish I could do something like that, when you click on the x the calendar goes blank.

Link: https://codesandbox.io/s/material-demo-ugrrz

Screenshot_20191112_094108

@aadilhasan
Copy link
Owner

@Angelk90 i will be adding a value prop pretty soon, which will give you full control over this.

@Angelk90
Copy link
Author

@aadilhasan :
Ok, there is something new about issue #7 ?

@aadilhasan
Copy link
Owner

@Angelk90 i am little busy with some stuff now days, so it is going to take little time.

@Angelk90
Copy link
Author

@aadilhasan : OK I'll wait, it's really important to have them not too late, I'd like to use them in a project I'm doing.

@jaxkodex
Copy link

jaxkodex commented Apr 1, 2020

Hi, is this issue still opened? If it is, I could help you with it. I just had to do something similar on an app i'am working on, ended up solving it receiving props on my calendar component and setting a default value when the values are cleared on the parent. Also it would be nice to hace access to the this context on the placeholder function.

class MyCalendar extends Component {
    
    placeholder() {
        const _startDate = this.props.startDate ? this.props.startDate : new Date()
        const _endDate = this.props.endDate ? this.props.endDate : new Date()
        return (
        <div className="default-placeholder">
            <div className="text">
                <div className="dates-container" style={{ fontSize: '16px' }}>
                    <span className="date">{moment(_startDate).format('DD/MM/YYYY')}</span>&nbsp;&nbsp;<b>-</b>&nbsp;<span className="date">{moment(_endDate).format('DD/MM/YYYY')}</span>
                </div>
            </div>
            <div className="icon" style={{display: 'block', border: 'none' }}>
                <img className="pointer" src={calendar} alt="" />
            </div>
        </div>
        )
    }

    render(){
       return(
        <RangePicker  
            onDateSelected={this.props.onDateSelected}
            placeholder={((a) => {
                return this.placeholder.call(this, a)
            })} />
       )
    }
}

@aadilhasan
Copy link
Owner

@jaxkodex thanks for the help, i am working on the new version with more bug fixes and better performance, this will also get fixed in that. Thanks for showing your interest, i would love it if you can contribute.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants