Browse Source

Allow numbers, - and . in date fields, select year and month by date

master
Vitaliy Filippov 1 year ago
parent
commit
410e0d7db4
  1. 11
      CalendarInput.js
  2. 17
      calendar-react.js

11
CalendarInput.js

@ -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}

17
calendar-react.js

@ -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…
Cancel
Save