moots-datetime-picker
Version:
Combination of a calendar datepicker and clock timepicker into one component for ionic 4.
48 lines • 5.15 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DateTime } from 'luxon';
import { defaults } from '../config';
export class MonthPickerComponent {
constructor() {
this.color = defaults.COLOR;
this.select = new EventEmitter();
this._thisMonth = DateTime.utc();
this._monthFormat = defaults.MONTH_FORMAT;
/**/
}
set monthFormat(value) {
if (Array.isArray(value) && value.length === 12) {
this._monthFormat = value;
}
}
get monthFormat() {
return this._monthFormat;
}
_onSelect(month) {
this.select.emit(month);
}
}
MonthPickerComponent.decorators = [
{ type: Component, args: [{
selector: 'moots-calendar-month-picker',
template: `
<div [class]="'month-picker ' + color">
<div
class="month-packer-item"
[class.this-month]="i === _thisMonth.month && month.original.year === _thisMonth.month"
*ngFor="let item of _monthFormat; let i = index"
>
<button type="button" (click)="_onSelect(i)">{{ item }}</button>
</div>
</div>
`,
styles: [":host .month-picker{margin:20px 0;display:inline-block;width:100%}:host .month-packer-item{width:25%;box-sizing:border-box;float:left;height:50px;padding:5px}:host .month-packer-item button{border-radius:32px;width:100%;height:100%;font-size:.9em;background-color:transparent}:host .month-packer-item.this-month button{border:1px solid var(--ion-color-primary)}:host .month-packer-item.active button{background-color:var(--ion-color-primary);color:var(--ion-color-light-tint)}\n"]
},] }
];
MonthPickerComponent.ctorParameters = () => [];
MonthPickerComponent.propDecorators = {
month: [{ type: Input }],
color: [{ type: Input }],
select: [{ type: Output }],
monthFormat: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9udGgtcGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb290cy1waWNrZXIvY29tcG9uZW50cy9tb250aC1waWNrZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUdqQyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBaUJyQyxNQUFNLE9BQU8sb0JBQW9CO0lBcUIvQjtRQWpCQSxVQUFLLEdBQUcsUUFBUSxDQUFDLEtBQUssQ0FBQztRQUV2QixXQUFNLEdBQXlCLElBQUksWUFBWSxFQUFFLENBQUM7UUFDbEQsZUFBVSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQztRQUM1QixpQkFBWSxHQUFHLFFBQVEsQ0FBQyxZQUFZLENBQUM7UUFjbkMsSUFBSTtJQUNOLENBQUM7SUFiRCxJQUNJLFdBQVcsQ0FBQyxLQUFlO1FBQzdCLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsSUFBSSxLQUFLLENBQUMsTUFBTSxLQUFLLEVBQUUsRUFBRTtZQUMvQyxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztTQUMzQjtJQUNILENBQUM7SUFFRCxJQUFJLFdBQVc7UUFDYixPQUFPLElBQUksQ0FBQyxZQUFZLENBQUM7SUFDM0IsQ0FBQztJQU1ELFNBQVMsQ0FBQyxLQUFhO1FBQ3JCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzFCLENBQUM7OztZQTFDRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLDZCQUE2QjtnQkFFdkMsUUFBUSxFQUFFOzs7Ozs7Ozs7O0dBVVQ7O2FBQ0Y7Ozs7b0JBRUUsS0FBSztvQkFFTCxLQUFLO3FCQUVMLE1BQU07MEJBS04sS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IERhdGVUaW1lIH0gZnJvbSAnbHV4b24nO1xyXG5cclxuaW1wb3J0IHsgQ2FsZW5kYXJNb250aCB9IGZyb20gJy4uL2NhbGVuZGFyLm1vZGVsJztcclxuaW1wb3J0IHsgZGVmYXVsdHMgfSBmcm9tICcuLi9jb25maWcnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdtb290cy1jYWxlbmRhci1tb250aC1waWNrZXInLFxyXG4gIHN0eWxlVXJsczogWycuL21vbnRoLXBpY2tlci5jb21wb25lbnQuc2NzcyddLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8ZGl2IFtjbGFzc109XCInbW9udGgtcGlja2VyICcgKyBjb2xvclwiPlxyXG4gICAgICA8ZGl2XHJcbiAgICAgICAgY2xhc3M9XCJtb250aC1wYWNrZXItaXRlbVwiXHJcbiAgICAgICAgW2NsYXNzLnRoaXMtbW9udGhdPVwiaSA9PT0gX3RoaXNNb250aC5tb250aCAmJiBtb250aC5vcmlnaW5hbC55ZWFyID09PSBfdGhpc01vbnRoLm1vbnRoXCJcclxuICAgICAgICAqbmdGb3I9XCJsZXQgaXRlbSBvZiBfbW9udGhGb3JtYXQ7IGxldCBpID0gaW5kZXhcIlxyXG4gICAgICA+XHJcbiAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgKGNsaWNrKT1cIl9vblNlbGVjdChpKVwiPnt7IGl0ZW0gfX08L2J1dHRvbj5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICBgXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBNb250aFBpY2tlckNvbXBvbmVudCB7XHJcbiAgQElucHV0KClcclxuICBtb250aDogQ2FsZW5kYXJNb250aDtcclxuICBASW5wdXQoKVxyXG4gIGNvbG9yID0gZGVmYXVsdHMuQ09MT1I7XHJcbiAgQE91dHB1dCgpXHJcbiAgc2VsZWN0OiBFdmVudEVtaXR0ZXI8bnVtYmVyPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBfdGhpc01vbnRoID0gRGF0ZVRpbWUudXRjKCk7XHJcbiAgX21vbnRoRm9ybWF0ID0gZGVmYXVsdHMuTU9OVEhfRk9STUFUO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIHNldCBtb250aEZvcm1hdCh2YWx1ZTogc3RyaW5nW10pIHtcclxuICAgIGlmIChBcnJheS5pc0FycmF5KHZhbHVlKSAmJiB2YWx1ZS5sZW5ndGggPT09IDEyKSB7XHJcbiAgICAgIHRoaXMuX21vbnRoRm9ybWF0ID0gdmFsdWU7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBnZXQgbW9udGhGb3JtYXQoKTogc3RyaW5nW10ge1xyXG4gICAgcmV0dXJuIHRoaXMuX21vbnRoRm9ybWF0O1xyXG4gIH1cclxuXHJcbiAgY29uc3RydWN0b3IoKSB7XHJcbiAgICAvKiovXHJcbiAgfVxyXG5cclxuICBfb25TZWxlY3QobW9udGg6IG51bWJlcik6IHZvaWQge1xyXG4gICAgdGhpcy5zZWxlY3QuZW1pdChtb250aCk7XHJcbiAgfVxyXG59XHJcbiJdfQ==