@skyux/datetime 9.0.0-alpha.0 → 9.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +51 -51
- package/package.json +8 -8
package/documentation.json
CHANGED
|
@@ -10989,94 +10989,94 @@
|
|
|
10989
10989
|
},
|
|
10990
10990
|
"codeExamples": [
|
|
10991
10991
|
{
|
|
10992
|
-
"fileName": "
|
|
10993
|
-
"filePath": "/projects/datetime/documentation/code-examples/
|
|
10994
|
-
"rawContents": "
|
|
10995
|
-
},
|
|
10996
|
-
{
|
|
10997
|
-
"fileName": "date-pipe-demo.component.ts",
|
|
10998
|
-
"filePath": "/projects/datetime/documentation/code-examples/date-pipe/basic/date-pipe-demo.component.ts",
|
|
10999
|
-
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-date-pipe-demo',\n templateUrl: './date-pipe-demo.component.html',\n})\nexport class DatePipeDemoComponent {\n public myDate = new Date('11/05/1955');\n}\n"
|
|
10992
|
+
"fileName": "timepicker-demo.module.ts",
|
|
10993
|
+
"filePath": "/projects/datetime/documentation/code-examples/timepicker/basic/timepicker-demo.module.ts",
|
|
10994
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SkyTimepickerModule } from '@skyux/datetime';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyStatusIndicatorModule } from '@skyux/indicators';\n\nimport { TimepickerDemoComponent } from './timepicker-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n ReactiveFormsModule,\n SkyInputBoxModule,\n SkyStatusIndicatorModule,\n SkyTimepickerModule,\n ],\n exports: [TimepickerDemoComponent],\n declarations: [TimepickerDemoComponent],\n})\nexport class TimepickerDemoModule {}\n"
|
|
11000
10995
|
},
|
|
11001
10996
|
{
|
|
11002
|
-
"fileName": "
|
|
11003
|
-
"filePath": "/projects/datetime/documentation/code-examples/
|
|
11004
|
-
"rawContents": "import {
|
|
10997
|
+
"fileName": "timepicker-demo.component.ts",
|
|
10998
|
+
"filePath": "/projects/datetime/documentation/code-examples/timepicker/basic/timepicker-demo.component.ts",
|
|
10999
|
+
"rawContents": "import { Component } from '@angular/core';\nimport {\n FormBuilder,\n FormControl,\n FormGroup,\n Validators,\n} from '@angular/forms';\n\n@Component({\n selector: 'app-timepicker-demo',\n templateUrl: './timepicker-demo.component.html',\n})\nexport class TimepickerDemoComponent {\n public get timeControl(): FormControl {\n return this.formGroup.get('time') as FormControl;\n }\n\n public formGroup: FormGroup;\n\n constructor(formBuilder: FormBuilder) {\n this.formGroup = formBuilder.group({\n time: new FormControl('2:45', Validators.required),\n });\n }\n\n public clearSelectedTime(): void {\n this.timeControl.setValue(undefined);\n }\n}\n"
|
|
11005
11000
|
},
|
|
11006
11001
|
{
|
|
11007
|
-
"fileName": "
|
|
11008
|
-
"filePath": "/projects/datetime/documentation/code-examples/
|
|
11009
|
-
"rawContents": "<form novalidate [formGroup]=\"
|
|
11002
|
+
"fileName": "timepicker-demo.component.html",
|
|
11003
|
+
"filePath": "/projects/datetime/documentation/code-examples/timepicker/basic/timepicker-demo.component.html",
|
|
11004
|
+
"rawContents": "<form novalidate [formGroup]=\"formGroup\">\n <sky-input-box labelText=\"Start time\">\n <sky-timepicker #timepicker>\n <input\n formControlName=\"time\"\n type=\"text\"\n [skyTimepickerInput]=\"timepicker\"\n />\n </sky-timepicker>\n </sky-input-box>\n</form>\n\n<button\n class=\"sky-btn sky-btn-secondary\"\n type=\"button\"\n (click)=\"clearSelectedTime()\"\n>\n Clear selection\n</button>\n"
|
|
11010
11005
|
},
|
|
11011
11006
|
{
|
|
11012
|
-
"fileName": "
|
|
11013
|
-
"filePath": "/projects/datetime/documentation/code-examples/
|
|
11014
|
-
"rawContents": "import {
|
|
11007
|
+
"fileName": "datepicker-demo.module.ts",
|
|
11008
|
+
"filePath": "/projects/datetime/documentation/code-examples/datepicker/fuzzy/datepicker-demo.module.ts",
|
|
11009
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyDatepickerModule } from '@skyux/datetime';\nimport { SkyInputBoxModule } from '@skyux/forms';\n\nimport { DatepickerDemoComponent } from './datepicker-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyDatepickerModule,\n SkyInputBoxModule,\n ],\n exports: [DatepickerDemoComponent],\n declarations: [DatepickerDemoComponent],\n})\nexport class DatepickerDemoModule {}\n"
|
|
11015
11010
|
},
|
|
11016
11011
|
{
|
|
11017
|
-
"fileName": "
|
|
11018
|
-
"filePath": "/projects/datetime/documentation/code-examples/
|
|
11019
|
-
"rawContents": "import {
|
|
11012
|
+
"fileName": "datepicker-demo.component.ts",
|
|
11013
|
+
"filePath": "/projects/datetime/documentation/code-examples/datepicker/fuzzy/datepicker-demo.component.ts",
|
|
11014
|
+
"rawContents": "import { Component } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\n\n@Component({\n selector: 'app-datepicker-demo',\n templateUrl: './datepicker-demo.component.html',\n})\nexport class DatepickerDemoComponent {\n public myForm: FormGroup;\n\n constructor(formBuilder: FormBuilder) {\n this.myForm = formBuilder.group({\n myDate: new FormControl(new Date(1955, 10, 5)),\n });\n }\n\n public get getFuzzyDateForDisplay(): string {\n return JSON.stringify(this.myForm.get('myDate')?.value);\n }\n}\n"
|
|
11020
11015
|
},
|
|
11021
11016
|
{
|
|
11022
11017
|
"fileName": "datepicker-demo.component.html",
|
|
11023
|
-
"filePath": "/projects/datetime/documentation/code-examples/datepicker/
|
|
11024
|
-
"rawContents": "<form novalidate [formGroup]=\"myForm\">\n <sky-input-box labelText=\"Date\">\n <sky-datepicker>\n <input formControlName=\"myDate\"
|
|
11025
|
-
},
|
|
11026
|
-
{
|
|
11027
|
-
"fileName": "datepicker-demo.component.ts",
|
|
11028
|
-
"filePath": "/projects/datetime/documentation/code-examples/datepicker/basic/datepicker-demo.component.ts",
|
|
11029
|
-
"rawContents": "import { Component } from '@angular/core';\nimport {\n UntypedFormBuilder,\n UntypedFormControl,\n UntypedFormGroup,\n} from '@angular/forms';\n\n@Component({\n selector: 'app-datepicker-demo',\n templateUrl: './datepicker-demo.component.html',\n})\nexport class DatepickerDemoComponent {\n public myForm: UntypedFormGroup;\n\n constructor(formBuilder: UntypedFormBuilder) {\n this.myForm = formBuilder.group({\n myDate: new UntypedFormControl(new Date(1999, 10, 5)),\n });\n }\n}\n"
|
|
11018
|
+
"filePath": "/projects/datetime/documentation/code-examples/datepicker/fuzzy/datepicker-demo.component.html",
|
|
11019
|
+
"rawContents": "<form novalidate [formGroup]=\"myForm\">\n <sky-input-box labelText=\"Date\">\n <sky-datepicker>\n <input formControlName=\"myDate\" skyFuzzyDatepickerInput type=\"text\" />\n </sky-datepicker>\n </sky-input-box>\n</form>\n\n<p>\n Selected date: <code>{{ getFuzzyDateForDisplay }}</code>\n</p>\n"
|
|
11030
11020
|
},
|
|
11031
11021
|
{
|
|
11032
11022
|
"fileName": "datepicker-demo.module.ts",
|
|
11033
|
-
"filePath": "/projects/datetime/documentation/code-examples/datepicker/
|
|
11023
|
+
"filePath": "/projects/datetime/documentation/code-examples/datepicker/custom-dates/datepicker-demo.module.ts",
|
|
11034
11024
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyDatepickerModule } from '@skyux/datetime';\nimport { SkyInputBoxModule } from '@skyux/forms';\n\nimport { DatepickerDemoComponent } from './datepicker-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyDatepickerModule,\n SkyInputBoxModule,\n ],\n exports: [DatepickerDemoComponent],\n declarations: [DatepickerDemoComponent],\n})\nexport class DatepickerDemoModule {}\n"
|
|
11035
11025
|
},
|
|
11036
|
-
{
|
|
11037
|
-
"fileName": "datepicker-demo.component.html",
|
|
11038
|
-
"filePath": "/projects/datetime/documentation/code-examples/datepicker/custom-dates/datepicker-demo.component.html",
|
|
11039
|
-
"rawContents": "<form novalidate [formGroup]=\"myForm\">\n <sky-input-box labelText=\"Date\">\n <sky-datepicker\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n >\n <input formControlName=\"myDate\" skyDatepickerInput type=\"text\" />\n </sky-datepicker>\n </sky-input-box>\n</form>\n\n<p>\n Selected date: <code>{{ myForm.value.myDate }}</code>\n</p>\n"
|
|
11040
|
-
},
|
|
11041
11026
|
{
|
|
11042
11027
|
"fileName": "datepicker-demo.component.ts",
|
|
11043
11028
|
"filePath": "/projects/datetime/documentation/code-examples/datepicker/custom-dates/datepicker-demo.component.ts",
|
|
11044
11029
|
"rawContents": "import { Component } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n SkyDatepickerCalendarChange,\n SkyDatepickerCustomDate,\n} from '@skyux/datetime';\n\nimport { Observable, of } from 'rxjs';\nimport { delay } from 'rxjs/operators';\n\n@Component({\n selector: 'app-datepicker-demo',\n templateUrl: './datepicker-demo.component.html',\n})\nexport class DatepickerDemoComponent {\n public myForm: FormGroup;\n\n constructor(formBuilder: FormBuilder) {\n this.myForm = formBuilder.group({\n myDate: new FormControl(new Date(1999, 10, 5)),\n });\n }\n\n public onCalendarDateRangeChange(event: SkyDatepickerCalendarChange): void {\n if (event) {\n // Bind observable to `customDates` argument and simulate delay for async process to finish.\n // Normally, `getCustomDates()` would be replaced by an async call to fetch data.\n event.customDates = this.#getCustomDates(event).pipe(delay(2000));\n }\n }\n\n /**\n * Generate fake custom dates based on the date range returned from the event.\n * This is for demonstration purposes only.\n */\n #getCustomDates(\n event: SkyDatepickerCalendarChange\n ): Observable<SkyDatepickerCustomDate[]> {\n const getNextDate = function (startDate: Date, daysToAdd: number): Date {\n const newDate = new Date(startDate);\n newDate.setDate(newDate.getDate() + daysToAdd);\n return newDate;\n };\n\n const customDates: SkyDatepickerCustomDate[] = [];\n customDates.push({\n date: event.startDate,\n disabled: false,\n keyDate: true,\n keyDateText: ['First date'],\n });\n\n customDates.push({\n date: getNextDate(event.startDate, 8),\n disabled: false,\n keyDate: true,\n keyDateText: ['Important'],\n });\n\n customDates.push({\n date: getNextDate(event.startDate, 9),\n disabled: false,\n keyDate: true,\n keyDateText: ['Also Important'],\n });\n\n customDates.push({\n date: getNextDate(event.startDate, 10),\n disabled: true,\n keyDate: true,\n keyDateText: ['Disabled'],\n });\n\n customDates.push({\n date: getNextDate(event.startDate, 11),\n disabled: true,\n keyDate: false,\n keyDateText: [],\n });\n\n customDates.push({\n date: getNextDate(event.startDate, 12),\n disabled: false,\n keyDate: true,\n keyDateText: [],\n });\n\n customDates.push({\n date: getNextDate(event.startDate, 13),\n disabled: false,\n keyDate: true,\n keyDateText: ['Multiple', 'Messages'],\n });\n\n customDates.push({\n date: event.endDate,\n disabled: false,\n keyDate: true,\n keyDateText: ['Last date'],\n });\n\n return of(customDates);\n }\n}\n"
|
|
11045
11030
|
},
|
|
11031
|
+
{
|
|
11032
|
+
"fileName": "datepicker-demo.component.html",
|
|
11033
|
+
"filePath": "/projects/datetime/documentation/code-examples/datepicker/custom-dates/datepicker-demo.component.html",
|
|
11034
|
+
"rawContents": "<form novalidate [formGroup]=\"myForm\">\n <sky-input-box labelText=\"Date\">\n <sky-datepicker\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n >\n <input formControlName=\"myDate\" skyDatepickerInput type=\"text\" />\n </sky-datepicker>\n </sky-input-box>\n</form>\n\n<p>\n Selected date: <code>{{ myForm.value.myDate }}</code>\n</p>\n"
|
|
11035
|
+
},
|
|
11046
11036
|
{
|
|
11047
11037
|
"fileName": "datepicker-demo.module.ts",
|
|
11048
|
-
"filePath": "/projects/datetime/documentation/code-examples/datepicker/
|
|
11038
|
+
"filePath": "/projects/datetime/documentation/code-examples/datepicker/basic/datepicker-demo.module.ts",
|
|
11049
11039
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyDatepickerModule } from '@skyux/datetime';\nimport { SkyInputBoxModule } from '@skyux/forms';\n\nimport { DatepickerDemoComponent } from './datepicker-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyDatepickerModule,\n SkyInputBoxModule,\n ],\n exports: [DatepickerDemoComponent],\n declarations: [DatepickerDemoComponent],\n})\nexport class DatepickerDemoModule {}\n"
|
|
11050
11040
|
},
|
|
11041
|
+
{
|
|
11042
|
+
"fileName": "datepicker-demo.component.ts",
|
|
11043
|
+
"filePath": "/projects/datetime/documentation/code-examples/datepicker/basic/datepicker-demo.component.ts",
|
|
11044
|
+
"rawContents": "import { Component } from '@angular/core';\nimport {\n UntypedFormBuilder,\n UntypedFormControl,\n UntypedFormGroup,\n} from '@angular/forms';\n\n@Component({\n selector: 'app-datepicker-demo',\n templateUrl: './datepicker-demo.component.html',\n})\nexport class DatepickerDemoComponent {\n public myForm: UntypedFormGroup;\n\n constructor(formBuilder: UntypedFormBuilder) {\n this.myForm = formBuilder.group({\n myDate: new UntypedFormControl(new Date(1999, 10, 5)),\n });\n }\n}\n"
|
|
11045
|
+
},
|
|
11051
11046
|
{
|
|
11052
11047
|
"fileName": "datepicker-demo.component.html",
|
|
11053
|
-
"filePath": "/projects/datetime/documentation/code-examples/datepicker/
|
|
11054
|
-
"rawContents": "<form novalidate [formGroup]=\"myForm\">\n <sky-input-box labelText=\"Date\">\n <sky-datepicker>\n <input formControlName=\"myDate\"
|
|
11048
|
+
"filePath": "/projects/datetime/documentation/code-examples/datepicker/basic/datepicker-demo.component.html",
|
|
11049
|
+
"rawContents": "<form novalidate [formGroup]=\"myForm\">\n <sky-input-box labelText=\"Date\">\n <sky-datepicker>\n <input formControlName=\"myDate\" skyDatepickerInput type=\"text\" />\n </sky-datepicker>\n </sky-input-box>\n</form>\n\n<p>\n Selected date: <code>{{ myForm.value.myDate }}</code>\n</p>\n"
|
|
11055
11050
|
},
|
|
11056
11051
|
{
|
|
11057
|
-
"fileName": "
|
|
11058
|
-
"filePath": "/projects/datetime/documentation/code-examples/
|
|
11059
|
-
"rawContents": "import {
|
|
11052
|
+
"fileName": "date-range-picker-demo.module.ts",
|
|
11053
|
+
"filePath": "/projects/datetime/documentation/code-examples/date-range-picker/basic/date-range-picker-demo.module.ts",
|
|
11054
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyDateRangePickerModule } from '@skyux/datetime';\n\nimport { DateRangePickerDemoComponent } from './date-range-picker-demo.component';\n\n@NgModule({\n imports: [CommonModule, ReactiveFormsModule, SkyDateRangePickerModule],\n exports: [DateRangePickerDemoComponent],\n declarations: [DateRangePickerDemoComponent],\n})\nexport class DateRangePickerDemoModule {}\n"
|
|
11060
11055
|
},
|
|
11061
11056
|
{
|
|
11062
|
-
"fileName": "
|
|
11063
|
-
"filePath": "/projects/datetime/documentation/code-examples/
|
|
11064
|
-
"rawContents": "import {
|
|
11057
|
+
"fileName": "date-range-picker-demo.component.ts",
|
|
11058
|
+
"filePath": "/projects/datetime/documentation/code-examples/date-range-picker/basic/date-range-picker-demo.component.ts",
|
|
11059
|
+
"rawContents": "import { Component, OnDestroy, OnInit } from '@angular/core';\nimport {\n AbstractControl,\n FormBuilder,\n UntypedFormControl,\n UntypedFormGroup,\n} from '@angular/forms';\nimport {\n SkyDateRangeCalculation,\n SkyDateRangeCalculatorId,\n SkyDateRangeCalculatorType,\n SkyDateRangeService,\n} from '@skyux/datetime';\n\nimport { Subject } from 'rxjs';\nimport { distinctUntilChanged, takeUntil } from 'rxjs/operators';\n\n@Component({\n selector: 'app-date-range-picker-demo',\n templateUrl: './date-range-picker-demo.component.html',\n})\nexport class DateRangePickerDemoComponent implements OnInit, OnDestroy {\n public calculatorIds: SkyDateRangeCalculatorId[] | undefined;\n\n public dateFormat: string | undefined;\n\n public reactiveForm: UntypedFormGroup;\n\n public get reactiveRange(): AbstractControl | null {\n return this.reactiveForm.get('lastDonation');\n }\n\n #ngUnsubscribe = new Subject<void>();\n\n #dateRangeService: SkyDateRangeService;\n\n constructor(dateRangeService: SkyDateRangeService, formBuilder: FormBuilder) {\n this.#dateRangeService = dateRangeService;\n this.reactiveForm = formBuilder.group({\n lastDonation: new UntypedFormControl(),\n });\n }\n\n public ngOnInit(): void {\n // Watch for status changes.\n this.reactiveRange?.statusChanges\n .pipe(distinctUntilChanged(), takeUntil(this.#ngUnsubscribe))\n .subscribe((status) => {\n console.log(\n 'Date range status change:',\n status,\n this.reactiveRange?.errors\n );\n });\n\n // Watch for value changes.\n this.reactiveRange?.valueChanges\n .pipe(distinctUntilChanged(), takeUntil(this.#ngUnsubscribe))\n .subscribe((value: SkyDateRangeCalculation) => {\n console.log('Date range value change:', value);\n });\n }\n\n public ngOnDestroy(): void {\n this.#ngUnsubscribe.next();\n this.#ngUnsubscribe.complete();\n }\n\n public toggleDisabled(): void {\n if (this.reactiveForm.disabled) {\n this.reactiveForm.enable();\n } else {\n this.reactiveForm.disable();\n }\n }\n\n public resetForm(): void {\n this.dateFormat = undefined;\n this.calculatorIds = undefined;\n this.reactiveForm.reset();\n this.reactiveForm.markAsPristine();\n this.reactiveForm.markAsUntouched();\n }\n\n public setRange(): void {\n const range: SkyDateRangeCalculation = {\n calculatorId: SkyDateRangeCalculatorId.SpecificRange,\n startDate: new Date('1/1/2012'),\n endDate: new Date('1/1/2013'),\n };\n\n this.reactiveRange?.setValue(range);\n }\n\n public setInvalidRange(): void {\n const range: SkyDateRangeCalculation = {\n calculatorId: SkyDateRangeCalculatorId.SpecificRange,\n startDate: new Date('1/1/2013'),\n endDate: new Date('1/1/2012'),\n };\n\n this.reactiveRange?.setValue(range);\n }\n\n public setInvalidDates(): void {\n const range: SkyDateRangeCalculation = {\n calculatorId: SkyDateRangeCalculatorId.SpecificRange,\n startDate: 'invalid' as never as Date,\n endDate: 'invalid' as never as Date,\n };\n\n this.reactiveRange?.setValue(range);\n }\n\n public setCalculatorIds(): void {\n const calculator = this.#dateRangeService.createCalculator({\n shortDescription: 'Since 1999',\n type: SkyDateRangeCalculatorType.Relative,\n getValue: () => {\n return {\n startDate: new Date('1/1/1999'),\n endDate: new Date(),\n };\n },\n });\n\n this.calculatorIds = [\n calculator.calculatorId,\n SkyDateRangeCalculatorId.SpecificRange,\n SkyDateRangeCalculatorId.LastFiscalYear,\n ];\n }\n\n public setDateFormat(): void {\n this.dateFormat = 'YYYY-MM-DD';\n }\n}\n"
|
|
11065
11060
|
},
|
|
11066
11061
|
{
|
|
11067
|
-
"fileName": "
|
|
11068
|
-
"filePath": "/projects/datetime/documentation/code-examples/
|
|
11069
|
-
"rawContents": "<form novalidate [formGroup]=\"
|
|
11062
|
+
"fileName": "date-range-picker-demo.component.html",
|
|
11063
|
+
"filePath": "/projects/datetime/documentation/code-examples/date-range-picker/basic/date-range-picker-demo.component.html",
|
|
11064
|
+
"rawContents": "<form novalidate [formGroup]=\"reactiveForm\">\n <div class=\"sky-form-group\">\n <sky-date-range-picker\n formControlName=\"lastDonation\"\n label=\"Last donation\"\n [calculatorIds]=\"calculatorIds\"\n [dateFormat]=\"dateFormat\"\n >\n </sky-date-range-picker>\n\n <ng-container *ngIf=\"reactiveRange?.errors && reactiveRange?.touched\">\n <div\n *ngIf=\"\n reactiveRange?.errors?.['skyDateRange']?.errors.endDateBeforeStartDate\n \"\n class=\"sky-error-label\"\n >\n Change the date range so that the from date is on or before the to date.\n </div>\n <div *ngIf=\"reactiveRange?.errors?.['skyDate']\" class=\"sky-error-label\">\n Enter valid dates.\n </div>\n </ng-container>\n </div>\n</form>\n\n<h3>Form control statuses</h3>\n\n<table>\n <tr>\n <th>Touched</th>\n <td>{{ reactiveRange?.touched }}</td>\n </tr>\n <tr>\n <th>Pristine</th>\n <td>{{ reactiveRange?.pristine }}</td>\n </tr>\n <tr>\n <th>Valid</th>\n <td>{{ reactiveRange?.valid }}</td>\n </tr>\n</table>\n\n<h3>Form control value</h3>\n\n<pre><code style=\"display:block;\">calculatorId: {{ reactiveForm.value.lastDonation?.calculatorId }}\nstartDate: {{ reactiveForm.value.lastDonation?.startDate | date }}\nendDate: {{ reactiveForm.value.lastDonation?.endDate | date }}</code></pre>\n\n<h3>Manipulate value and state</h3>\n\n<button\n class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n type=\"button\"\n (click)=\"toggleDisabled()\"\n>\n {{ reactiveForm.disabled ? 'Enable' : 'Disable' }} picker\n</button>\n\n<button\n class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n type=\"button\"\n (click)=\"resetForm()\"\n>\n Reset form\n</button>\n\n<button\n class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n type=\"button\"\n (click)=\"setRange()\"\n>\n Set specific range\n</button>\n\n<button\n class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n type=\"button\"\n (click)=\"setInvalidRange()\"\n>\n Set invalid range\n</button>\n\n<button\n class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n type=\"button\"\n (click)=\"setInvalidDates()\"\n>\n Set invalid dates\n</button>\n\n<button\n class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n type=\"button\"\n (click)=\"setCalculatorIds()\"\n>\n Set custom calculators\n</button>\n\n<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"setDateFormat()\">\n Set date format (YYYY-MM-DD)\n</button>\n"
|
|
11070
11065
|
},
|
|
11071
11066
|
{
|
|
11072
|
-
"fileName": "
|
|
11073
|
-
"filePath": "/projects/datetime/documentation/code-examples/
|
|
11074
|
-
"rawContents": "import {
|
|
11067
|
+
"fileName": "date-pipe-demo.module.ts",
|
|
11068
|
+
"filePath": "/projects/datetime/documentation/code-examples/date-pipe/basic/date-pipe-demo.module.ts",
|
|
11069
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyDatePipeModule } from '@skyux/datetime';\n\nimport { DatePipeDemoComponent } from './date-pipe-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyDatePipeModule],\n exports: [DatePipeDemoComponent],\n declarations: [DatePipeDemoComponent],\n})\nexport class DatePipeDemoModule {}\n"
|
|
11075
11070
|
},
|
|
11076
11071
|
{
|
|
11077
|
-
"fileName": "
|
|
11078
|
-
"filePath": "/projects/datetime/documentation/code-examples/
|
|
11079
|
-
"rawContents": "import {
|
|
11072
|
+
"fileName": "date-pipe-demo.component.ts",
|
|
11073
|
+
"filePath": "/projects/datetime/documentation/code-examples/date-pipe/basic/date-pipe-demo.component.ts",
|
|
11074
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-date-pipe-demo',\n templateUrl: './date-pipe-demo.component.html',\n})\nexport class DatePipeDemoComponent {\n public myDate = new Date('11/05/1955');\n}\n"
|
|
11075
|
+
},
|
|
11076
|
+
{
|
|
11077
|
+
"fileName": "date-pipe-demo.component.html",
|
|
11078
|
+
"filePath": "/projects/datetime/documentation/code-examples/date-pipe/basic/date-pipe-demo.component.html",
|
|
11079
|
+
"rawContents": "<div>{{ myDate | skyDate }}</div>\n<div>{{ myDate | skyDate : 'medium' }}</div>\n<div>{{ myDate | skyDate : 'medium' : 'es-MX' }}</div>\n"
|
|
11080
11080
|
}
|
|
11081
11081
|
]
|
|
11082
11082
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/datetime",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.1",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
"@angular/core": "^16.1.7",
|
|
41
41
|
"@angular/forms": "^16.1.7",
|
|
42
42
|
"@angular/platform-browser": "^16.1.7",
|
|
43
|
-
"@skyux-sdk/testing": "9.0.0-alpha.
|
|
44
|
-
"@skyux/core": "9.0.0-alpha.
|
|
45
|
-
"@skyux/forms": "9.0.0-alpha.
|
|
46
|
-
"@skyux/i18n": "9.0.0-alpha.
|
|
47
|
-
"@skyux/indicators": "9.0.0-alpha.
|
|
48
|
-
"@skyux/popovers": "9.0.0-alpha.
|
|
49
|
-
"@skyux/theme": "9.0.0-alpha.
|
|
43
|
+
"@skyux-sdk/testing": "9.0.0-alpha.1",
|
|
44
|
+
"@skyux/core": "9.0.0-alpha.1",
|
|
45
|
+
"@skyux/forms": "9.0.0-alpha.1",
|
|
46
|
+
"@skyux/i18n": "9.0.0-alpha.1",
|
|
47
|
+
"@skyux/indicators": "9.0.0-alpha.1",
|
|
48
|
+
"@skyux/popovers": "9.0.0-alpha.1",
|
|
49
|
+
"@skyux/theme": "9.0.0-alpha.1",
|
|
50
50
|
"moment": "^2.29.4"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|