Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- <div class="date-range">
<div class="date-range__presets">
<button #presetsTrigger
mat-raised-button
[matMenuTriggerFor]="presetMenu"
(click)="$event.stopPropagation()">{{selectedPreset.name}}
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #presetMenu="matMenu"
[overlapTrigger]="false">
<button mat-menu-item
class="date-range__preset-item"
(click)="onPresetSelect(preset)"
*ngFor="let preset of presets">{{preset.name}}</button>
</mat-menu>
</div>
<div class="date-range__custom-range"
*ngIf="selectedPreset.name === 'Custom'">
<div class="date-range__custom-range-control mat-elevation-z1"
[matMenuTriggerFor]="datepickerMenu">
<mat-icon>date_range</mat-icon>
<input type="text"
class="date-range__custom-range-input"
[value]="getDisplayDates()[0] + ' - ' +getDisplayDates()[1]">
</div>
<mat-menu [overlapTrigger]="false"
#datepickerMenu>
<div (click)="$event.stopPropagation()"
class="pa-2 display-flex">
<mat-calendar [selected]="selectedPreset.range[0]"
class="mr-2"></mat-calendar>
<mat-calendar [selected]="selectedPreset.range[1]"></mat-calendar>
</div>
</mat-menu>
</div>
</div> -->
<mat-form-field appearance="fill">
<input type="text"
matInput
[ranges]="ranges"
[locale]="locale"
[alwaysShowCalendars]="true"
[showCustomRangeLabel]="true"
[linkedCalendars]="true"
ngxDaterangepickerMd
[(ngModel)]="selectedPreset"
class="form-control" />
<mat-icon matSuffix>date_range</mat-icon>
</mat-form-field>
<script>
import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import {
DateRangePreset,
TODAY,
YESTERDAY
} from '@mojo/core/components/date-range/presets.util';
import { format } from 'date-fns';
@Component({
selector: 'jv-date-range',
templateUrl: './date-range.component.html',
styleUrls: ['./date-range.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DateRangeComponent),
multi: true
}
]
})
export class DateRangeComponent implements ControlValueAccessor {
// The format in which the date is to be consumed.
// Primarily for the purposes of sending data to server.
@Input() outputFormat;
// What's the format of the provided input dates.
@Input() inputFormat;
// The format in which the selected dates should show up in
// the triggering Input fields.
@Input() displayFormat;
// List of preset ranges that needs to be shown.
@Input() presets;
// Min date that a user can select
@Input() min;
// Max date that a user can select.
@Input() max;
ranges = {};
@Input() defaultRange: DateRangePreset = YESTERDAY;
// Initial value of the date range.
@Input('value') _value = [];
selectedPreset: DateRangePreset = this.defaultRange;
locale = {
format: 'MMM DD, YY'
};
propagateChange = (_: any) => {};
get value() {
return this._value;
}
set value(val) {
this._value = val;
this.propagateChange(val);
}
ngOnInit() {
[TODAY, YESTERDAY].forEach(preset => {
this.ranges[preset.name] = preset.range;
});
}
// ControlValueAccessor stuff!
writeValue(value: any) {
if (value) {
this.value = value;
}
}
registerOnChange(fn) {
this.propagateChange = fn;
}
registerOnTouched() {}
onPresetSelect(preset) {
this.selectedPreset = preset;
this.value = preset.range;
}
getDisplayDates() {
return this.selectedPreset.range.map(date => {
return format(date, this.displayFormat);
});
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.