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
|
||||
// (c) Vitaliy Filippov 2021+
|
||||
// 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+
|
||||
|
||||
import React from 'react';
|
||||
|
@ -10,6 +10,14 @@ 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 = {
|
||||
|
@ -36,6 +44,7 @@ export default class CalendarInput extends Picker
|
|||
onBlur={props.onBlur}
|
||||
onFocus={props.onFocus}
|
||||
onClick={props.onFocus}
|
||||
onKeyDown={allowDate}
|
||||
ref={props.ref}
|
||||
style={this.props.style}
|
||||
className={this.props.className}
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
*
|
||||
* (c) Vitaliy Filippov 2011+
|
||||
* 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+
|
||||
*/
|
||||
|
||||
|
@ -86,7 +86,7 @@ export default class Calendar extends React.PureComponent
|
|||
this.props.hide && this.props.hide();
|
||||
}
|
||||
|
||||
parseValue()
|
||||
parseValue(update)
|
||||
{
|
||||
if (!this.prevProps || this.props.value != this.prevProps.value)
|
||||
{
|
||||
|
@ -120,6 +120,13 @@ export default class Calendar extends React.PureComponent
|
|||
this.selected = null;
|
||||
}
|
||||
}
|
||||
if (update)
|
||||
{
|
||||
setImmediate(() => this.setState({
|
||||
year: this.selected.getFullYear(),
|
||||
month: this.selected.getMonth(),
|
||||
}));
|
||||
}
|
||||
this.prevProps = this.props;
|
||||
}
|
||||
return this.selected;
|
||||
|
@ -146,7 +153,7 @@ export default class Calendar extends React.PureComponent
|
|||
let today = this.props.today || new Date();
|
||||
let cur_y = today.getFullYear();
|
||||
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 months = [ [ 0, 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8 ], [ 9, 10, 11 ] ];
|
||||
return (<table><tbody>
|
||||
|
@ -176,7 +183,7 @@ export default class Calendar extends React.PureComponent
|
|||
let beg = year & ~15;
|
||||
let today = this.props.today || new Date();
|
||||
let cur_y = today.getFullYear();
|
||||
let selected = this.parseValue();
|
||||
let selected = this.parseValue(true);
|
||||
let sel_y = selected ? selected.getFullYear() : -1;
|
||||
return (<table><tbody>
|
||||
<tr><th colSpan='4' className='calendar-title'>
|
||||
|
@ -212,7 +219,7 @@ export default class Calendar extends React.PureComponent
|
|||
{
|
||||
let { year, month } = this.state;
|
||||
let { selectboxes, sunday, monthNames } = this.props;
|
||||
let selected = this.parseValue();
|
||||
let selected = this.parseValue(true);
|
||||
let today = this.props.today || new Date();
|
||||
|
||||
// Display the table
|
||||
|
|
Loading…
Reference in New Issue