mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 08:09:32 +08:00
b67259edae
Issue number: Internal ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Adds a new property to datetime, showAdjacentDays, that when true will show the last days of the previous month and the first days of the next month. This will just occupy empty "cells" at the beginning of the month "table" and add rows to the table until a maximum of 6 rows are displayed. ## Changes - add styles for adjacent day button - add `showAdjacentDays` property to datetime component - change month generation to respect new property - add visual tests to new feature ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Preview](https://ionic-framework-git-rou-11118v2-ionic1.vercel.app/src/components/datetime/test/show-adjacent-days) --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
116 lines
2.9 KiB
TypeScript
116 lines
2.9 KiB
TypeScript
import {
|
|
ChangeDetectionStrategy,
|
|
ChangeDetectorRef,
|
|
Component,
|
|
ElementRef,
|
|
EventEmitter,
|
|
HostListener,
|
|
Injector,
|
|
NgZone,
|
|
forwardRef,
|
|
} from '@angular/core';
|
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
import { ValueAccessor } from '@ionic/angular/common';
|
|
import type { DatetimeChangeEventDetail, Components } from '@ionic/core/components';
|
|
import { defineCustomElement } from '@ionic/core/components/ion-datetime.js';
|
|
|
|
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
|
|
|
|
const DATETIME_INPUTS = [
|
|
'cancelText',
|
|
'clearText',
|
|
'color',
|
|
'dayValues',
|
|
'disabled',
|
|
'doneText',
|
|
'firstDayOfWeek',
|
|
'formatOptions',
|
|
'highlightedDates',
|
|
'hourCycle',
|
|
'hourValues',
|
|
'isDateEnabled',
|
|
'locale',
|
|
'max',
|
|
'min',
|
|
'minuteValues',
|
|
'mode',
|
|
'monthValues',
|
|
'multiple',
|
|
'name',
|
|
'preferWheel',
|
|
'presentation',
|
|
'readonly',
|
|
'showAdjacentDays',
|
|
'showClearButton',
|
|
'showDefaultButtons',
|
|
'showDefaultTimeLabel',
|
|
'showDefaultTitle',
|
|
'size',
|
|
'titleSelectedDatesFormatter',
|
|
'value',
|
|
'yearValues',
|
|
];
|
|
|
|
/**
|
|
* Pulling the provider into an object and using PURE works
|
|
* around an ng-packagr issue that causes
|
|
* components with multiple decorators and
|
|
* a provider to be re-assigned. This re-assignment
|
|
* is not supported by Webpack and causes treeshaking
|
|
* to not work on these kinds of components.
|
|
|
|
*/
|
|
const accessorProvider = {
|
|
provide: NG_VALUE_ACCESSOR,
|
|
useExisting: /*@__PURE__*/ forwardRef(() => IonDatetime),
|
|
multi: true,
|
|
};
|
|
|
|
@ProxyCmp({
|
|
defineCustomElementFn: defineCustomElement,
|
|
inputs: DATETIME_INPUTS,
|
|
methods: ['confirm', 'reset', 'cancel'],
|
|
})
|
|
@Component({
|
|
selector: 'ion-datetime',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: '<ng-content></ng-content>',
|
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
inputs: DATETIME_INPUTS,
|
|
providers: [accessorProvider],
|
|
standalone: true,
|
|
})
|
|
export class IonDatetime extends ValueAccessor {
|
|
protected el: HTMLElement;
|
|
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone, injector: Injector) {
|
|
super(injector, r);
|
|
c.detach();
|
|
this.el = r.nativeElement;
|
|
proxyOutputs(this, this.el, ['ionCancel', 'ionChange', 'ionFocus', 'ionBlur']);
|
|
}
|
|
|
|
@HostListener('ionChange', ['$event.target'])
|
|
handleIonChange(el: HTMLIonDatetimeElement): void {
|
|
this.handleValueChange(el, el.value);
|
|
}
|
|
}
|
|
|
|
export declare interface IonDatetime extends Components.IonDatetime {
|
|
/**
|
|
* Emitted when the datetime selection was cancelled.
|
|
*/
|
|
ionCancel: EventEmitter<CustomEvent<void>>;
|
|
/**
|
|
* Emitted when the value (selected date) has changed.
|
|
*/
|
|
ionChange: EventEmitter<CustomEvent<DatetimeChangeEventDetail>>;
|
|
/**
|
|
* Emitted when the datetime has focus.
|
|
*/
|
|
ionFocus: EventEmitter<CustomEvent<void>>;
|
|
/**
|
|
* Emitted when the datetime loses focus.
|
|
*/
|
|
ionBlur: EventEmitter<CustomEvent<void>>;
|
|
}
|