Skip to content

Commit

Permalink
refactor(code): refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@fetrarij
fetrarij committed Jan 9, 2019
1 parent d584996 commit 92f01ec
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 137 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Expand Up @@ -3,6 +3,7 @@
[![Build Status](https://travis-ci.org/fetrarij/ngx-daterangepicker-material.svg?branch=master)](https://travis-ci.org/fetrarij/ngx-daterangepicker-material)
[![npm version](https://badge.fury.io/js/ngx-daterangepicker-material.svg)](https://badge.fury.io/js/ngx-daterangepicker-material)
[![last commit](https://img.shields.io/github/last-commit/fetrarij/ngx-daterangepicker-material.svg)](https://github.com/fetrarij/ngx-daterangepicker-material/commits/master)

This plugin is compatible with Angular2, Angular4, Angular5 and Angular6. This plugin uses moment.js.

Expand Down
2 changes: 1 addition & 1 deletion demo/src/app/app.module.ts
View file
Expand Up @@ -44,7 +44,7 @@ import { TimepickerComponent } from './timepicker/timepicker.component';
MatInputModule,
MatSelectModule,
NgxDaterangepickerMd.forRoot({
applyLabel: 'Ohkay'
applyLabel: 'Okay'
}),
RouterModule.forRoot(AppRoutes),
],
Expand Down
255 changes: 119 additions & 136 deletions src/daterangepicker/daterangepicker.component.ts
View file
Expand Up @@ -347,7 +347,7 @@ export class DaterangepickerComponent implements OnInit {
const daysInLastMonth = moment([lastYear, lastMonth]).daysInMonth();
const dayOfWeek = firstDay.day();
// initialize a 6 rows x 7 columns array for the calendar
let calendar: any= [];
let calendar: any = [];
calendar.firstDay = firstDay;
calendar.lastDay = lastDay;

Expand Down Expand Up @@ -391,13 +391,19 @@ export class DaterangepickerComponent implements OnInit {
} else {
this.rightCalendar.calendar = calendar;
}

//
// Display the calendar
//
const minDate = side === 'left' ? this.minDate : this.startDate;
let maxDate = this.maxDate;
const selected = side === 'left' ? this.startDate : this.endDate;
// adjust maxDate to reflect the dateLimit setting in order to
// grey out end dates beyond the dateLimit
if (this.endDate === null && this.dateLimit) {
const maxLimit = this.startDate.clone().add(this.dateLimit).endOf('day');
if (!maxDate || maxLimit.isBefore(maxDate)) {
maxDate = maxLimit;
}
}
this.calendarVariables[side] = {
month: month,
year: year,
Expand All @@ -419,7 +425,6 @@ export class DaterangepickerComponent implements OnInit {
maxDate: maxDate,
calendar: calendar
};

if (this.showDropdowns) {
const currentMonth = calendar[1][1].month();
const currentYear = calendar[1][1].year();
Expand All @@ -442,116 +447,8 @@ export class DaterangepickerComponent implements OnInit {
yearArrays: years
};
}

// adjust maxDate to reflect the dateLimit setting in order to
// grey out end dates beyond the dateLimit
if (this.endDate === null && this.dateLimit) {
const maxLimit = this.startDate.clone().add(this.dateLimit).endOf('day');
if (!maxDate || maxLimit.isBefore(maxDate)) {
maxDate = maxLimit;
}
}

for (let row = 0; row < 6; row++) {
this.calendarVariables[side].classes[row] = {};
const rowClasses = [];
if(this.emptyWeekRowClass && !this.hasCurrentMonthDays(month, calendar[row])) {
rowClasses.push(this.emptyWeekRowClass);
}
for (let col = 0; col < 7; col++) {
const classes = [];

// highlight today's date
if (calendar[row][col].isSame(new Date(), 'day')) {
classes.push('today');
}

// highlight weekends
if (calendar[row][col].isoWeekday() > 5) {
classes.push('weekend');
}

// grey out the dates in other months displayed at beginning and end of this calendar
if (calendar[row][col].month() !== calendar[1][1].month()) {
classes.push('off');

// mark the last day of the previous month in this calendar
if(this.lastDayOfPreviousMonthClass && (calendar[row][col].month() < calendar[1][1].month() || calendar[1][1].month() === 0) && calendar[row][col].date() === daysInLastMonth) {
classes.push(this.lastDayOfPreviousMonthClass);
}

// mark the first day of the next month in this calendar
if(this.firstDayOfNextMonthClass && (calendar[row][col].month() > calendar[1][1].month() || calendar[row][col].month() === 0) && calendar[row][col].date() === 1) {
classes.push(this.firstDayOfNextMonthClass);
}
}

// mark the first day of the current month with a custom class
if (this.firstMonthDayClass && calendar[row][col].month() === calendar[1][1].month() && calendar[row][col].date() === calendar.firstDay.date()) {
classes.push(this.firstMonthDayClass);
}

// mark the last day of the current month with a custom class
if (this.lastMonthDayClass && calendar[row][col].month() === calendar[1][1].month() && calendar[row][col].date() === calendar.lastDay.date()) {
classes.push(this.lastMonthDayClass);
}

// don't allow selection of dates before the minimum date
if (this.minDate && calendar[row][col].isBefore(this.minDate, 'day')) {
classes.push('off', 'disabled');
}

// don't allow selection of dates after the maximum date
if (maxDate && calendar[row][col].isAfter(maxDate, 'day')) {
classes.push('off', 'disabled');
}

// don't allow selection of date if a custom function decides it's invalid
if (this.isInvalidDate(calendar[row][col])) {
classes.push('off', 'disabled');
}

// highlight the currently selected start date
if (this.startDate && calendar[row][col].format('YYYY-MM-DD') === this.startDate.format('YYYY-MM-DD')) {
classes.push('active', 'start-date');
}

// highlight the currently selected end date
if (this.endDate != null && calendar[row][col].format('YYYY-MM-DD') === this.endDate.format('YYYY-MM-DD')) {
classes.push('active', 'end-date');
}

// highlight dates in-between the selected dates
if (this.endDate != null && calendar[row][col] > this.startDate && calendar[row][col] < this.endDate) {
classes.push('in-range');
}

// apply custom classes for this date
const isCustom = this.isCustomDate(calendar[row][col]);
if (isCustom !== false) {
if (typeof isCustom === 'string') {
classes.push(isCustom);
} else {
Array.prototype.push.apply(classes, isCustom);
}
}
// store classes var
let cname = '', disabled = false;
for (let i = 0; i < classes.length; i++) {
cname += classes[i] + ' ';
if (classes[i] === 'disabled') {
disabled = true;
}
}
if (!disabled) {
cname += 'available';
}

this.calendarVariables[side].classes[row][col] = cname.replace(/^\s+|\s+$/g, '');
}

this.calendarVariables[side].classes[row].classList = rowClasses.join(' ');
}

this._buildCells(calendar, side)
}
setStartDate(startDate) {
if (typeof startDate === 'string') {
Expand Down Expand Up @@ -951,17 +848,7 @@ export class DaterangepickerComponent implements OnInit {

if (this.endDate || date.isBefore(this.startDate, 'day')) { // picking start
if (this.timePicker) {
let hour = parseInt(this.timepickerVariables['left'].selectedHour, 10);
if (!this.timePicker24Hour) {
var ampm = this.timepickerVariables['left'].ampmModel;
if (ampm === 'PM' && hour < 12)
hour += 12;
if (ampm === 'AM' && hour === 12)
hour = 0;
}
var minute = parseInt(this.timepickerVariables['left'].selectedMinute, 10);
var second = this.timePickerSeconds ? parseInt(this.timepickerVariables['left'].selectedSecond, 10) : 0;
date = date.clone().hour(hour).minute(minute).second(second);
date = this._getDateWithTime(date, SideEnum.left)
}
this.endDate = null;
this.setStartDate(date.clone());
Expand All @@ -971,17 +858,7 @@ export class DaterangepickerComponent implements OnInit {
this.setEndDate(this.startDate.clone());
} else { // picking end
if (this.timePicker) {
var hour = parseInt(this.timepickerVariables['right'].selectedHour, 10);
if (!this.timePicker24Hour) {
var ampm = this.timepickerVariables['right'].ampmModel;
if (ampm === 'PM' && hour < 12)
hour += 12;
if (ampm === 'AM' && hour === 12)
hour = 0;
}
var minute = parseInt(this.timepickerVariables['right'].selectedMinute, 10);
var second = this.timePickerSeconds ? parseInt(this.timepickerVariables['right'].selectedSecond, 10) : 0;
date = date.clone().hour(hour).minute(minute).second(second);
date = this._getDateWithTime(date, SideEnum.right)
}
this.setEndDate(date.clone());
if (this.autoApply) {
Expand Down Expand Up @@ -1133,6 +1010,112 @@ export class DaterangepickerComponent implements OnInit {
});
return (areBothBefore || areBothAfter);
}
/**
*
* @param date the date to add time
* @param side left or right
*/
private _getDateWithTime(date, side: SideEnum): _moment.Moment {
let hour = parseInt(this.timepickerVariables[side].selectedHour, 10);
if (!this.timePicker24Hour) {
var ampm = this.timepickerVariables[side].ampmModel;
if (ampm === 'PM' && hour < 12)
hour += 12;
if (ampm === 'AM' && hour === 12)
hour = 0;
}
var minute = parseInt(this.timepickerVariables[side].selectedMinute, 10);
var second = this.timePickerSeconds ? parseInt(this.timepickerVariables[side].selectedSecond, 10) : 0;
return date.clone().hour(hour).minute(minute).second(second);
}
private _buildCells(calendar, side: SideEnum) {
for (let row = 0; row < 6; row++) {
this.calendarVariables[side].classes[row] = {};
const rowClasses = [];
if(this.emptyWeekRowClass && !this.hasCurrentMonthDays(this.calendarVariables[side].month, calendar[row])) {
rowClasses.push(this.emptyWeekRowClass);
}
for (let col = 0; col < 7; col++) {
const classes = [];
// highlight today's date
if (calendar[row][col].isSame(new Date(), 'day')) {
classes.push('today');
}
// highlight weekends
if (calendar[row][col].isoWeekday() > 5) {
classes.push('weekend');
}
// grey out the dates in other months displayed at beginning and end of this calendar
if (calendar[row][col].month() !== calendar[1][1].month()) {
classes.push('off');

// mark the last day of the previous month in this calendar
if(this.lastDayOfPreviousMonthClass && (calendar[row][col].month() < calendar[1][1].month() || calendar[1][1].month() === 0) && calendar[row][col].date() === this.calendarVariables[side].daysInLastMonth) {
classes.push(this.lastDayOfPreviousMonthClass);
}

// mark the first day of the next month in this calendar
if(this.firstDayOfNextMonthClass && (calendar[row][col].month() > calendar[1][1].month() || calendar[row][col].month() === 0) && calendar[row][col].date() === 1) {
classes.push(this.firstDayOfNextMonthClass);
}
}
// mark the first day of the current month with a custom class
if (this.firstMonthDayClass && calendar[row][col].month() === calendar[1][1].month() && calendar[row][col].date() === calendar.firstDay.date()) {
classes.push(this.firstMonthDayClass);
}
// mark the last day of the current month with a custom class
if (this.lastMonthDayClass && calendar[row][col].month() === calendar[1][1].month() && calendar[row][col].date() === calendar.lastDay.date()) {
classes.push(this.lastMonthDayClass);
}
// don't allow selection of dates before the minimum date
if (this.minDate && calendar[row][col].isBefore(this.minDate, 'day')) {
classes.push('off', 'disabled');
}
// don't allow selection of dates after the maximum date
if (this.calendarVariables[side].maxDate && calendar[row][col].isAfter(this.calendarVariables[side].maxDate, 'day')) {
classes.push('off', 'disabled');
}
// don't allow selection of date if a custom function decides it's invalid
if (this.isInvalidDate(calendar[row][col])) {
classes.push('off', 'disabled');
}
// highlight the currently selected start date
if (this.startDate && calendar[row][col].format('YYYY-MM-DD') === this.startDate.format('YYYY-MM-DD')) {
classes.push('active', 'start-date');
}
// highlight the currently selected end date
if (this.endDate != null && calendar[row][col].format('YYYY-MM-DD') === this.endDate.format('YYYY-MM-DD')) {
classes.push('active', 'end-date');
}
// highlight dates in-between the selected dates
if (this.endDate != null && calendar[row][col] > this.startDate && calendar[row][col] < this.endDate) {
classes.push('in-range');
}
// apply custom classes for this date
const isCustom = this.isCustomDate(calendar[row][col]);
if (isCustom !== false) {
if (typeof isCustom === 'string') {
classes.push(isCustom);
} else {
Array.prototype.push.apply(classes, isCustom);
}
}
// store classes var
let cname = '', disabled = false;
for (let i = 0; i < classes.length; i++) {
cname += classes[i] + ' ';
if (classes[i] === 'disabled') {
disabled = true;
}
}
if (!disabled) {
cname += 'available';
}
this.calendarVariables[side].classes[row][col] = cname.replace(/^\s+|\s+$/g, '');
}
this.calendarVariables[side].classes[row].classList = rowClasses.join(' ');
}
}

/**
* Find out if the current calendar row has current month days
Expand Down

0 comments on commit 92f01ec

Please sign in to comment.