From 8cc3849671a8867cabe51cfe6ad826b3dfecfc6b Mon Sep 17 00:00:00 2001 From: TiM Date: Fri, 25 Sep 2015 12:22:30 +1200 Subject: [PATCH 1/2] add highlighting of days support --- README.md | 1 + src/DateTimeField.js | 3 +++ src/DateTimePicker.js | 2 ++ src/DateTimePickerDate.js | 2 ++ src/DateTimePickerDays.js | 14 ++++++++++++-- 5 files changed, 20 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8c58cc01..7dbc54ff 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,7 @@ DateTimeField | **onChange** | function | x => console.log(x) | Callback trigger when the date changes. `x` is the new datetime value. | | **showToday** | boolean | true | Highlights today's date | | **daysOfWeekDisabled** | array of integer | [] | Disables clicking on some days. Goes from 0 (Sunday) to 6 (Saturday). | +| **highlight** | func | null | Highlight specific days. Function gets passed day object, should return true to highlight it | | **viewMode** | string or number | 'days' | The default view to display when the picker is shown. ('years', 'months', 'days') | | **inputProps** | object | undefined | Defines additional attributes for the input element of the component. | | **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. | diff --git a/src/DateTimeField.js b/src/DateTimeField.js index 35439df3..990851f4 100644 --- a/src/DateTimeField.js +++ b/src/DateTimeField.js @@ -11,6 +11,7 @@ export default class DateTimeField extends Component { showToday: true, viewMode: "days", daysOfWeekDisabled: [], + highlight: null, mode: Constants.MODE_DATETIME, onChange: (x) => { console.log(x); @@ -42,6 +43,7 @@ export default class DateTimeField extends Component { direction: PropTypes.string, showToday: PropTypes.bool, viewMode: PropTypes.string, + highlight: PropTypes.func, daysOfWeekDisabled: PropTypes.arrayOf(PropTypes.integer) } @@ -331,6 +333,7 @@ export default class DateTimeField extends Component { addMonth={this.addMonth} addYear={this.addYear} daysOfWeekDisabled={this.props.daysOfWeekDisabled} + highlight={this.props.highlight} maxDate={this.props.maxDate} minDate={this.props.minDate} mode={this.props.mode} diff --git a/src/DateTimePicker.js b/src/DateTimePicker.js index 6c163675..f80b2e8f 100644 --- a/src/DateTimePicker.js +++ b/src/DateTimePicker.js @@ -20,6 +20,7 @@ export default class DateTimePicker extends Component { ]), mode: PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]), daysOfWeekDisabled: PropTypes.array, + highlight: PropTypes.func, setSelectedDate: PropTypes.func.isRequired, subtractYear: PropTypes.func.isRequired, addYear: PropTypes.func.isRequired, @@ -50,6 +51,7 @@ export default class DateTimePicker extends Component { addMonth={this.props.addMonth} addYear={this.props.addYear} daysOfWeekDisabled={this.props.daysOfWeekDisabled} + highlight={this.props.highlight} maxDate={this.props.maxDate} minDate={this.props.minDate} selectedDate={this.props.selectedDate} diff --git a/src/DateTimePickerDate.js b/src/DateTimePickerDate.js index df3cb868..a375ea19 100644 --- a/src/DateTimePickerDate.js +++ b/src/DateTimePickerDate.js @@ -15,6 +15,7 @@ export default class DateTimePickerDate extends Component { PropTypes.number ]), daysOfWeekDisabled: PropTypes.array, + highlight: PropTypes.funct, setSelectedDate: PropTypes.func.isRequired, subtractYear: PropTypes.func.isRequired, addYear: PropTypes.func.isRequired, @@ -84,6 +85,7 @@ export default class DateTimePickerDate extends Component { year || (prevMonth.year() === year && prevMonth.month() > month)) { classes.new = true; } - if (prevMonth.isSame(moment({ + + var day = moment({ y: this.props.selectedDate.year(), M: this.props.selectedDate.month(), d: this.props.selectedDate.date() - }))) { + }) + + if (prevMonth.isSame(day)) classes.active = true; + + if (this.props.highlight){ + if (this.props.highlight(prevMonth)) + classes.highlight = true; } + if (this.props.showToday) { if (prevMonth.isSame(moment(), "day")) { classes.today = true; @@ -64,6 +73,7 @@ export default class DateTimePickerDays extends Component { cells = []; } prevMonth.add(1, "d"); + } return html; } From 92a8911a622ea83a4b3275a732b424ff0ef3f80b Mon Sep 17 00:00:00 2001 From: TiM Date: Fri, 25 Sep 2015 12:32:39 +1200 Subject: [PATCH 2/2] fix --- css/bootstrap-datetimepicker.css | 5 +++++ src/DateTimePickerDate.js | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/css/bootstrap-datetimepicker.css b/css/bootstrap-datetimepicker.css index 05c1d8c9..be711cd8 100644 --- a/css/bootstrap-datetimepicker.css +++ b/css/bootstrap-datetimepicker.css @@ -124,6 +124,10 @@ bottom: 4px; right: 4px; } +.bootstrap-datetimepicker-widget td.highlight, +.bootstrap-datetimepicker-widget td.highlight:hover { + background-color: yellow; +} .bootstrap-datetimepicker-widget td.active, .bootstrap-datetimepicker-widget td.active:hover { background-color: #428bca; @@ -139,6 +143,7 @@ color: #999999; cursor: not-allowed; } + .bootstrap-datetimepicker-widget td span { display: block; width: 47px; diff --git a/src/DateTimePickerDate.js b/src/DateTimePickerDate.js index a375ea19..67cf8cb6 100644 --- a/src/DateTimePickerDate.js +++ b/src/DateTimePickerDate.js @@ -15,7 +15,7 @@ export default class DateTimePickerDate extends Component { PropTypes.number ]), daysOfWeekDisabled: PropTypes.array, - highlight: PropTypes.funct, + highlight: PropTypes.func, setSelectedDate: PropTypes.func.isRequired, subtractYear: PropTypes.func.isRequired, addYear: PropTypes.func.isRequired,