86 lines
2.7 KiB
JavaScript
86 lines
2.7 KiB
JavaScript
// Input with calendar hint based on Calendar and Picker
|
|
// (c) Vitaliy Filippov 2021+
|
|
// Repository: http://yourcmc.ru/git/vitalif-js/calendar
|
|
// Version: 2021-10-17
|
|
// License: Dual-license MPL 2.0+ or GNU LGPL 3.0+
|
|
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import Calendar from './calendar-react.js';
|
|
import Picker from './Picker.js';
|
|
|
|
export function allowDate(ev)
|
|
{
|
|
if (ev && ev.key && ev.key.length == 1 && !/[\d\-\.]/.exec(ev.key))
|
|
{
|
|
ev.preventDefault();
|
|
}
|
|
}
|
|
|
|
export default class CalendarInput extends Picker
|
|
{
|
|
static propTypes = {
|
|
value: PropTypes.oneOfType([ PropTypes.string, PropTypes.instanceOf(Date) ]),
|
|
onChange: PropTypes.func.isRequired,
|
|
className: PropTypes.string,
|
|
placeholder: PropTypes.string,
|
|
closeLabel: PropTypes.string,
|
|
monthNames: PropTypes.arrayOf(PropTypes.string),
|
|
weekdays: PropTypes.arrayOf(PropTypes.string),
|
|
weekdayIds: PropTypes.arrayOf(PropTypes.string),
|
|
sunday: PropTypes.number,
|
|
minDate: PropTypes.oneOfType([ PropTypes.oneOf(['today']), PropTypes.instanceOf(Date) ]),
|
|
maxDate: PropTypes.oneOfType([ PropTypes.oneOf(['today']), PropTypes.instanceOf(Date) ]),
|
|
format: PropTypes.oneOf([ 'dmy', 'ymd' ]),
|
|
withTime: PropTypes.bool,
|
|
startMode: PropTypes.oneOf([ 'days', 'months', 'years' ]),
|
|
style: PropTypes.object,
|
|
}
|
|
|
|
setText = (ev) => this.props.onChange(ev.target.value)
|
|
|
|
renderInput = (props) => (<input
|
|
onBlur={props.onBlur}
|
|
onFocus={props.onFocus}
|
|
onClick={props.onFocus}
|
|
onKeyDown={allowDate}
|
|
ref={props.ref}
|
|
style={this.props.style}
|
|
className={this.props.className}
|
|
type="text"
|
|
value={this.props.value||''}
|
|
onChange={this.setText}
|
|
placeholder={this.props.placeholder}
|
|
/>)
|
|
|
|
renderPicker = (props) => (<Calendar
|
|
ref={this.animatePicker}
|
|
value={this.props.value}
|
|
onChange={this.props.onChange}
|
|
hide={props.blur}
|
|
monthNames={this.props.monthNames}
|
|
closeLabel={this.props.closeLabel}
|
|
weekdays={this.props.weekdays}
|
|
weekdayIds={this.props.weekdayIds}
|
|
sunday={this.props.sunday}
|
|
minDate={this.props.minDate}
|
|
maxDate={this.props.maxDate}
|
|
format={this.props.format}
|
|
withTime={this.props.withTime}
|
|
startMode={this.props.startMode}
|
|
/>)
|
|
|
|
render()
|
|
{
|
|
return (<Picker
|
|
direction={this.props.direction}
|
|
minWidth={this.props.minWidth}
|
|
autoHide={true}
|
|
renderInput={this.renderInput}
|
|
renderPicker={this.renderPicker}
|
|
usePortal={true}
|
|
/>);
|
|
}
|
|
}
|