src/dev-app/datepicker/datepicker-demo.html - main - githubmirror/components

src/dev-app/datepicker/datepicker-demo.html
361 строка14 KB
Kristiyan Kostadinov
refactor(multiple): switch button selectors
14 мар 2025, 09:04
14 мар 2025, 09:04103ac7c
<h2>Options</h2>
<p>
  <mat-checkbox [(ngModel)]="touch">Use touch UI</mat-checkbox>
  <mat-checkbox [(ngModel)]="filterOdd">Filter odd years, months and dates</mat-checkbox>
  <mat-checkbox [(ngModel)]="yearView">Start in year view</mat-checkbox>
  <mat-checkbox [(ngModel)]="datepickerDisabled">Disable datepicker</mat-checkbox>
  <mat-checkbox [(ngModel)]="inputDisabled">Disable input</mat-checkbox>
  <mat-checkbox [(ngModel)]="showActions">Show action buttons</mat-checkbox>
  <mat-form-field>
    <mat-select [(ngModel)]="color" placeholder="Color">
      <mat-option value="primary">Primary</mat-option>
      <mat-option value="accent">Accent</mat-option>
      <mat-option value="warn">Warn</mat-option>
    </mat-select>
  </mat-form-field>
</p>
<p>
  <mat-form-field [color]="color">
    <mat-label>Min date</mat-label>
    <input matInput [matDatepicker]="minDatePicker" [(ngModel)]="minDate"
        [disabled]="inputDisabled" [max]="maxDate">
    <mat-datepicker-toggle matSuffix [for]="minDatePicker"></mat-datepicker-toggle>
    <mat-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled">
      @if (showActions) {
        <mat-datepicker-actions>
          <button matButton matDatepickerCancel>Cancel</button>
          <button matButton="elevated" color="primary" matDatepickerApply>Apply</button>
        </mat-datepicker-actions>
      }
    </mat-datepicker>
  </mat-form-field>
  <mat-form-field [color]="color">
    <mat-label>Max date</mat-label>
    <input matInput [matDatepicker]="maxDatePicker" [(ngModel)]="maxDate"
        [disabled]="inputDisabled" [min]="minDate">
    <mat-datepicker-toggle matSuffix [for]="maxDatePicker"></mat-datepicker-toggle>
    <mat-datepicker #maxDatePicker [touchUi]="touch" [disabled]="datepickerDisabled">
      @if (showActions) {
        <mat-datepicker-actions>
          <button matButton matDatepickerCancel>Cancel</button>
          <button matButton="elevated" color="primary" matDatepickerApply>Apply</button>
        </mat-datepicker-actions>
      }
    </mat-datepicker>
  </mat-form-field>
</p>
<p>
  <mat-form-field [color]="color">
    <mat-label>Start at date</mat-label>
    <input matInput [matDatepicker]="startAtPicker" [(ngModel)]="startAt"
        [disabled]="inputDisabled">
    <mat-datepicker-toggle matSuffix [for]="startAtPicker"></mat-datepicker-toggle>
    <mat-datepicker #startAtPicker [touchUi]="touch" [disabled]="datepickerDisabled">
      @if (showActions) {
        <mat-datepicker-actions>
          <button matButton matDatepickerCancel>Cancel</button>
          <button matButton="elevated" color="primary" matDatepickerApply>Apply</button>
        </mat-datepicker-actions>
      }
    </mat-datepicker>
  </mat-form-field>
</p>

<h2>Result</h2>

<p>
  <mat-datepicker-toggle [for]="resultPicker"></mat-datepicker-toggle>
  <mat-form-field>
    <mat-label>Pick a date</mat-label>
    <input matInput
           #resultPickerModel="ngModel"
           [matDatepicker]="resultPicker"
           [(ngModel)]="date"
           [min]="minDate"
           [max]="maxDate"
           [matDatepickerFilter]="filterOdd ? dateFilter : undefined!"
           [disabled]="inputDisabled"
           (dateInput)="onDateInput($event)"
           (dateChange)="onDateChange($event)">
    <mat-datepicker
        #resultPicker
        [touchUi]="touch"
        [disabled]="datepickerDisabled"
        [startAt]="startAt"
        [startView]="yearView ? 'year' : 'month'"
        [color]="color">
      @if (showActions) {
        <mat-datepicker-actions>
          <button matButton matDatepickerCancel>Cancel</button>
          <button matButton="elevated" color="primary" matDatepickerApply>Apply</button>
        </mat-datepicker-actions>
      }
    </mat-datepicker>
    @if (resultPickerModel.hasError('matDatepickerParse')) {
      <mat-error>
        "{{resultPickerModel.getError('matDatepickerParse').text}}" is not a valid date!
      </mat-error>
    }
    @if (resultPickerModel.hasError('matDatepickerMin')) {
      <mat-error>Too early!</mat-error>
    }
    @if (resultPickerModel.hasError('matDatepickerMax')) {
      <mat-error>Too late!</mat-error>
    }
    @if (resultPickerModel.hasError('matDatepickerFilter')) {
      <mat-error>Date unavailable!</mat-error>
    }
  </mat-form-field>
</p>
<p>Last input: {{lastDateInput}}</p>
<p>Last change: {{lastDateChange}}</p>
<br>
<p>
  <input #resultPickerModel2
         [matDatepicker]="resultPicker2"
         [(ngModel)]="date"
         [min]="minDate"
         [max]="maxDate"
         [disabled]="inputDisabled"
         [matDatepickerFilter]="filterOdd ? dateFilter : undefined!"
         placeholder="Pick a date">
  <mat-datepicker-toggle [for]="resultPicker2"></mat-datepicker-toggle>
  <mat-datepicker
      #resultPicker2
      [touchUi]="touch"
      [disabled]="datepickerDisabled"
      [startAt]="startAt"
      [startView]="yearView ? 'year' : 'month'">
    @if (showActions) {
      <mat-datepicker-actions>
        <button matButton matDatepickerCancel>Cancel</button>
        <button matButton="elevated" color="primary" matDatepickerApply>Apply</button>
      </mat-datepicker-actions>
    }
  </mat-datepicker>
</p>

<h2>Input disabled datepicker</h2>
<p>
  <mat-datepicker-toggle [for]="datePicker1"></mat-datepicker-toggle>
  <mat-form-field>
    <mat-label>Input disabled</mat-label>
    <input matInput [matDatepicker]="datePicker1" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
           [matDatepickerFilter]="filterOdd ? dateFilter : undefined!" disabled>
    <mat-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt"
                    [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
  </mat-form-field>
</p>

<h2>Input disabled via FormControl</h2>
<p>
  <mat-datepicker-toggle [for]="datePicker2"></mat-datepicker-toggle>
  <mat-form-field>
    <mat-label>FormControl disabled</mat-label>
    <input matInput [matDatepicker]="datePicker2" [formControl]="dateCtrl" [min]="minDate"
           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined!">
    <mat-datepicker #datePicker2 [touchUi]="touch" [startAt]="startAt"
                    [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
  </mat-form-field>

  <button matButton (click)="dateCtrl.disabled ? dateCtrl.enable() : dateCtrl.disable()">
    {{dateCtrl.disabled ? 'Enable' : 'Disable'}} FormControl
  </button>
</p>

<h2>Input disabled, datepicker popup enabled</h2>
<p>
  <mat-datepicker-toggle [for]="datePicker3"></mat-datepicker-toggle>
  <mat-form-field>
    <mat-label>Input disabled, datepicker enabled</mat-label>
    <input matInput disabled [matDatepicker]="datePicker3" [(ngModel)]="date" [min]="minDate"
           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined!">
    <mat-datepicker #datePicker3 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
                    [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
  </mat-form-field>
</p>

<h2>Datepicker with value property binding</h2>
<p>
  <mat-datepicker-toggle [for]="datePicker4"></mat-datepicker-toggle>
  <mat-form-field>
    <mat-label>Value binding</mat-label>
    <!--  TODO Angular sets the inputs for both directives on the input element here.
          e.g. [value] is set for MatInput and MatDatepicker.
          MatInput#value expects a string whereas MatDatepicker#value expects a Date.
          This breaks strict template type checking. What should we do here?
    -->
    <input matInput [matDatepicker]="datePicker4" [value]="date" [min]="minDate"
           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined!">
    <mat-datepicker #datePicker4 [touchUi]="touch" [startAt]="startAt"
                    [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
  </mat-form-field>
</p>

<h2>Datepicker with custom header</h2>
<p>
  <mat-form-field>
    <mat-label>Custom calendar header</mat-label>
    <input matInput [matDatepicker]="customHeaderPicker">
    <mat-datepicker-toggle matSuffix [for]="customHeaderPicker"></mat-datepicker-toggle>
    <mat-datepicker #customHeaderPicker [calendarHeaderComponent]="customHeader"></mat-datepicker>
  </mat-form-field>
</p>

<h2>Datepicker with custom header extending the default header</h2>
<p>
  <mat-form-field>
    <mat-label>Custom calendar header extending default</mat-label>
    <input matInput [matDatepicker]="customHeaderNgContentPicker">
    <mat-datepicker-toggle matSuffix [for]="customHeaderNgContentPicker"></mat-datepicker-toggle>
    <mat-datepicker #customHeaderNgContentPicker [calendarHeaderComponent]="customHeaderNgContent"></mat-datepicker>
  </mat-form-field>
</p>

<h2>Range picker</h2>

<div class="demo-range-group">
  <mat-form-field>
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input
      [formGroup]="range1"
      [rangePicker]="range1Picker"
      [min]="minDate"
      [max]="maxDate"
      [disabled]="inputDisabled"
      [comparisonStart]="comparisonStart"
      [comparisonEnd]="comparisonEnd"
      [dateFilter]="filterOdd ? dateFilter : undefined!">
      <input matStartDate formControlName="start" placeholder="Start date"/>
      <input matEndDate formControlName="end" placeholder="End date"/>
    </mat-date-range-input>
    <mat-datepicker-toggle [for]="range1Picker" matSuffix></mat-datepicker-toggle>
    <mat-date-range-picker
      [touchUi]="touch"
      [disabled]="datepickerDisabled"
      [color]="color"
      #range1Picker>
      @if (showActions) {
        <mat-date-range-picker-actions>
          <button matButton matDateRangePickerCancel>Cancel</button>
          <button matButton="elevated" color="primary" matDateRangePickerApply>Apply</button>
        </mat-date-range-picker-actions>
      }
    </mat-date-range-picker>
  </mat-form-field>
  <div>{{range1.value | json}}</div>
</div>

<div class="demo-range-group">
  <mat-form-field appearance="fill">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input
      [formGroup]="range2"
      [rangePicker]="range2Picker"
      [min]="minDate"
      [max]="maxDate"
      [disabled]="inputDisabled"
      [comparisonStart]="comparisonStart"
      [comparisonEnd]="comparisonEnd"
      [dateFilter]="filterOdd ? dateFilter : undefined!">
      <input matStartDate formControlName="start" placeholder="Start date"/>
      <input matEndDate formControlName="end" placeholder="End date"/>
    </mat-date-range-input>
    <mat-datepicker-toggle [for]="range2Picker" matSuffix></mat-datepicker-toggle>
    <mat-date-range-picker
      [touchUi]="touch"
      [disabled]="datepickerDisabled"
      panelClass="demo-custom-range"
      #range2Picker>
      @if (showActions) {
        <mat-date-range-picker-actions>
          <button matButton matDateRangePickerCancel>Cancel</button>
          <button matButton="elevated" color="primary" matDateRangePickerApply>Apply</button>
        </mat-date-range-picker-actions>
      }
    </mat-date-range-picker>
  </mat-form-field>
  <div>{{range2.value | json}}</div>
</div>

<div class="demo-range-group">
  <mat-form-field appearance="outline">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input
      [formGroup]="range3"
      [rangePicker]="range3Picker"
      [min]="minDate"
      [max]="maxDate"
      [disabled]="inputDisabled"
      [comparisonStart]="comparisonStart"
      [comparisonEnd]="comparisonEnd"
      [dateFilter]="filterOdd ? dateFilter : undefined!">
      <input matStartDate formControlName="start" placeholder="Start date"/>
      <input matEndDate formControlName="end" placeholder="End date"/>
    </mat-date-range-input>
    <mat-datepicker-toggle [for]="range3Picker" matSuffix></mat-datepicker-toggle>
    <mat-date-range-picker
      [touchUi]="touch"
      [disabled]="datepickerDisabled"
      #range3Picker>
      @if (showActions) {
        <mat-date-range-picker-actions>
          <button matButton matDateRangePickerCancel>Cancel</button>
          <button matButton="elevated" color="primary" matDateRangePickerApply>Apply</button>
        </mat-date-range-picker-actions>
      }
    </mat-date-range-picker>
  </mat-form-field>
  <div>{{range3.value | json}}</div>
</div>


<h2>Range picker with custom selection strategy</h2>
<div class="demo-range-group">
  <mat-form-field>
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [rangePicker]="range4Picker">
      <input matStartDate placeholder="Start date"/>
      <input matEndDate placeholder="End date"/>
    </mat-date-range-input>
    <mat-datepicker-toggle [for]="range4Picker" matSuffix></mat-datepicker-toggle>
    <mat-date-range-picker customRangeStrategy #range4Picker>
      @if (showActions) {
        <mat-date-range-picker-actions>
          <button matButton matDateRangePickerCancel>Cancel</button>
          <button matButton="elevated" color="primary" matDateRangePickerApply>Apply</button>
        </mat-date-range-picker-actions>
      }
    </mat-date-range-picker>
  </mat-form-field>
</div>

<h2>With custom icon</h2>
<p>
  <mat-form-field appearance="fill">
    <mat-label>Custom icon</mat-label>
    <input matInput [matDatepicker]="ci1">
    <mat-datepicker-toggle matSuffix [for]="ci1">
      <mat-icon matDatepickerToggleIcon>add</mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #ci1></mat-datepicker>
  </mat-form-field>
  <br>
  <mat-form-field appearance="outline">
    <mat-label>Custom icon</mat-label>
    <input matInput [matDatepicker]="ci2">
    <mat-datepicker-toggle matSuffix [for]="ci2">
      <mat-icon matDatepickerToggleIcon>add</mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #ci2></mat-datepicker>
  </mat-form-field>
  <br>
  <mat-form-field>
    <mat-label>Custom icon</mat-label>
    <input matInput [matDatepicker]="ci3">
    <mat-datepicker #ci3></mat-datepicker>
  </mat-form-field>
  <mat-datepicker-toggle matSuffix [for]="ci3">
    <mat-icon matDatepickerToggleIcon>add</mat-icon>
  </mat-datepicker-toggle>
</p>