vitalif-js
/
calendar
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

master
Vitaliy Filippov 2021-10-17 19:35:02 +03:00
parent b10bab6bfe
commit 410e0d7db4
2 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
CalendarInput.js
View File

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

17
calendar-react.js
View File

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