render() {
let popover = null;
let content = null;
if (this.state.open) {
let classes = [styles.open];
if (this.props.align === Directions.RIGHT) {
classes.push(styles.right);
}
popover = (
<Popover fixed={true} position={this.state.position} onExternalClick={this.close.bind(this)}>
<div className={classes.join(' ')}>
<div className={styles.calendar}>
<Calendar
value={this.props.value}
onChange={this.onChange.bind(this)} />
</div>
<div className={styles.chrome} onClick={this.close.bind(this)}>
<span>{`${monthDayStringUTC(this.props.value)}`}</span>
<Icon width={18} height={18} name='calendar-solid' fill='#169CEE' />
</div>
</div>
</Popover>
);
} else {
content = (
<div className={styles.chrome}>
<span>{`${monthDayStringUTC(this.props.value)}`}</span>
<Icon width={18} height={18} name='calendar-solid' fill='#169CEE' />
</div>
);
}
return (
<div className={styles.wrap} onClick={this.toggle.bind(this)}>
{content}
{popover}
</div>
);
}
rangeString() {
return (
`${monthDayStringUTC(this.state.start)} - ${monthDayStringUTC(this.state.end)}`
);
}