Allow numbers, - and . in date fields, select year and month by date
parent
b10bab6bfe
commit
410e0d7db4
|
@ -1,7 +1,7 @@
|
||||||
// Input with calendar hint based on Calendar and Picker
|
// Input with calendar hint based on Calendar and Picker
|
||||||
// (c) Vitaliy Filippov 2021+
|
// (c) Vitaliy Filippov 2021+
|
||||||
// Repository: http://yourcmc.ru/git/vitalif-js/calendar
|
// Repository: http://yourcmc.ru/git/vitalif-js/calendar
|
||||||
// Version: 2021-09-19
|
// Version: 2021-10-17
|
||||||
// License: Dual-license MPL 2.0+ or GNU LGPL 3.0+
|
// License: Dual-license MPL 2.0+ or GNU LGPL 3.0+
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
@ -10,6 +10,14 @@ import PropTypes from 'prop-types';
|
||||||
import Calendar from './calendar-react.js';
|
import Calendar from './calendar-react.js';
|
||||||
import Picker from './Picker.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
|
export default class CalendarInput extends Picker
|
||||||
{
|
{
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
@ -36,6 +44,7 @@ export default class CalendarInput extends Picker
|
||||||
onBlur={props.onBlur}
|
onBlur={props.onBlur}
|
||||||
onFocus={props.onFocus}
|
onFocus={props.onFocus}
|
||||||
onClick={props.onFocus}
|
onClick={props.onFocus}
|
||||||
|
onKeyDown={allowDate}
|
||||||
ref={props.ref}
|
ref={props.ref}
|
||||||
style={this.props.style}
|
style={this.props.style}
|
||||||
className={this.props.className}
|
className={this.props.className}
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
*
|
*
|
||||||
* (c) Vitaliy Filippov 2011+
|
* (c) Vitaliy Filippov 2011+
|
||||||
* Repository: http://yourcmc.ru/git/vitalif-js/calendar
|
* Repository: http://yourcmc.ru/git/vitalif-js/calendar
|
||||||
* Version: 2021-09-19
|
* Version: 2021-10-17
|
||||||
* License: Dual-license MPL 2.0+ or GNU LGPL 3.0+
|
* License: Dual-license MPL 2.0+ or GNU LGPL 3.0+
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@ -86,7 +86,7 @@ export default class Calendar extends React.PureComponent
|
||||||
this.props.hide && this.props.hide();
|
this.props.hide && this.props.hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
parseValue()
|
parseValue(update)
|
||||||
{
|
{
|
||||||
if (!this.prevProps || this.props.value != this.prevProps.value)
|
if (!this.prevProps || this.props.value != this.prevProps.value)
|
||||||
{
|
{
|
||||||
|
@ -120,6 +120,13 @@ export default class Calendar extends React.PureComponent
|
||||||
this.selected = null;
|
this.selected = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (update)
|
||||||
|
{
|
||||||
|
setImmediate(() => this.setState({
|
||||||
|
year: this.selected.getFullYear(),
|
||||||
|
month: this.selected.getMonth(),
|
||||||
|
}));
|
||||||
|
}
|
||||||
this.prevProps = this.props;
|
this.prevProps = this.props;
|
||||||
}
|
}
|
||||||
return this.selected;
|
return this.selected;
|
||||||
|
@ -146,7 +153,7 @@ export default class Calendar extends React.PureComponent
|
||||||
let today = this.props.today || new Date();
|
let today = this.props.today || new Date();
|
||||||
let cur_y = today.getFullYear();
|
let cur_y = today.getFullYear();
|
||||||
let cur_m = today.getMonth();
|
let cur_m = today.getMonth();
|
||||||
let selected = this.parseValue();
|
let selected = this.parseValue(true);
|
||||||
let sel_m = selected && selected.getFullYear() == year ? selected.getMonth() : -1;
|
let sel_m = selected && selected.getFullYear() == year ? selected.getMonth() : -1;
|
||||||
let months = [ [ 0, 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8 ], [ 9, 10, 11 ] ];
|
let months = [ [ 0, 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8 ], [ 9, 10, 11 ] ];
|
||||||
return (<table><tbody>
|
return (<table><tbody>
|
||||||
|
@ -176,7 +183,7 @@ export default class Calendar extends React.PureComponent
|
||||||
let beg = year & ~15;
|
let beg = year & ~15;
|
||||||
let today = this.props.today || new Date();
|
let today = this.props.today || new Date();
|
||||||
let cur_y = today.getFullYear();
|
let cur_y = today.getFullYear();
|
||||||
let selected = this.parseValue();
|
let selected = this.parseValue(true);
|
||||||
let sel_y = selected ? selected.getFullYear() : -1;
|
let sel_y = selected ? selected.getFullYear() : -1;
|
||||||
return (<table><tbody>
|
return (<table><tbody>
|
||||||
<tr><th colSpan='4' className='calendar-title'>
|
<tr><th colSpan='4' className='calendar-title'>
|
||||||
|
@ -212,7 +219,7 @@ export default class Calendar extends React.PureComponent
|
||||||
{
|
{
|
||||||
let { year, month } = this.state;
|
let { year, month } = this.state;
|
||||||
let { selectboxes, sunday, monthNames } = this.props;
|
let { selectboxes, sunday, monthNames } = this.props;
|
||||||
let selected = this.parseValue();
|
let selected = this.parseValue(true);
|
||||||
let today = this.props.today || new Date();
|
let today = this.props.today || new Date();
|
||||||
|
|
||||||
// Display the table
|
// Display the table
|
||||||
|
|
Loading…
Reference in New Issue