It would be nice to have among datepicker types quarter

Hi,

Good work

I wanted to know if I could add the option of seconds in the time, currently the format that has is H:MM, could I add the seconds too?h:mm:ss

Thanks

Describe the bug

When adding both MatDatepickerModule and MatNativeDateModule to my EventsModule, a runtime error occurs.

More than one custom value accessor matches form control with unspecified name attribute

Minimal Reproduction

See screenshots.

Expected behavior

To work like before MatNativeDateModule moved to /core.

Screenshots

Your Environment

Angular Version:

Angular CLI: 12.0.3
Node: 14.17.0
Package Manager: npm 7.16.0
OS: win32 x64

Anything else relevant?

Datepicker version: 11.2.15

Describe the bug

The picker is not changing first day of week depending on locale like original picker does.
Could be luxon-related, since ngx-material-luxon has a specific configuration for the first day of the week

Minimal Reproduction

Stackblitz gives ngcc error atm unfortunately.
There's an example of french locale here:
https://material.angular.io/components/datepicker/examples

(lu = monday)
@matheo/datepicker:

Expected behavior

Should change the first day of the week depending on locale.
Alternatively with configuration like

Your Environment

Angular Version:
@angular/core: ^11.2.9,
@matheo/[email protected]
Issue on macOS both chrome and safari

Is your feature request related to a problem? Please describe.

I want to use datetime with date range picker, but I cannot select time after a date selected and the style looks weird

Is your feature request related to a problem? Please describe.

When I tried to update both matheo datepicker and luxon to the latest, I got an error and I could not update luxon to the latest
Package "@matheo/datepicker" has an incompatible peer dependency to "luxon" (requires "^1.28.0", would install "2.3.0")
Package "@matheo/datepicker" has an incompatible peer dependency to "luxon" (requires "^1.28.0", would install "2.3.0").

Describe the solution you'd like

matheo datepicker should support the latest major update of luxon as peer dependency

First of all, good job with the datetimer picker component!

Is there any way to use it with:
https://www.npmjs.com/package/ngx-material-luxon
Which is pretty much plug-n-play with the original matdatepicker?

Angular Material allows multiple parse formats but the adapter only considers singular string values for the parseFormat.

Thought I'd mention it in case that's something that could be supported by the package internally, but was able to get around the issue by monkey patching in polyfills.ts

DateFnsAdapter.prototype.parse = function (
  value: any,
  parseFormat: string | string[]
): Date | null {
  if (value) {
    if (typeof value === 'string') {
      const parseFormats = Array.isArray(parseFormat)
        ? parseFormat
        : [parseFormat];
      const _value = value.trim();

      for (let format of parseFormats) {
        const d = parse(_value, format, new Date(), {
          locale: this._dateFnsLocale,
        });

        if (d && d.toString() !== 'Invalid Date') {
          return this.options.useUtc ? zonedTimeToUtc(d, 'UTC') : d;
        }
      }

      return new Date(value);
    }
    if (typeof value === 'number') {
      return toDate(value);
    }
    if (value instanceof Date) {
      return this.clone(value as Date);
    }
    return value;
  }
  return value;
};

Firstly, thank you for creating this library specifically for the date-time picker implementation; it is surprising that Angular material hasn't addressed this after 4 years of requests! Your implementation feels right at home alongside other material components and works beautifully :)

One aspect which I feel makes use of the library difficult however is the lack of emitted Date values whenever the user is navigating through views. Specifically take the following typical flow:

1. Open date-time picker (component initialises with new Date() -> Mon May 09 2022 12:34:56)
2. Select a date (e.g. 10th May 2022 -> Tue May 10 2022 00:00:00)
3. Select an hour (e.g. 17:00 -> Tue May 10 2022 17:00:00)
4. Select a minute (e.g. 30 -> Tue May 10 2022 17:30:00)
5. Apply (using a button with the matDatepickerApply directive)

I would expect to be able to access a Date object which contains the currently highlighted date emitted each time the user makes a selection (steps 2, 3 and 4) and ideally is initialised with the value that the datepicker displays when opened (step 1). To my knowledge there is no way to access this value using the APIs provided. This means in practice that I have no way of knowing what the user has selected until step 5 at which point Tue May 10 2022 17:30:00 is correctly emitted via (dateChange).

There are concrete drawbacks to not having this information being made available, mainly in providing a unified user experience within the component and in other related components. For example:

• Triggering validation logic, e.g. disabling the Apply button if the currently preselected value exceeds min/max validation (related downstream issue: https://github.com/matheo/angular/issues/47)
• Triggering logic which is dependent on the user's currently highlighted selection, e.g. displaying a preview date under the form field or in a sidebar
• Triggering logic which is dependent on the value that the date picker initialises with, e.g. a warning explaining why the current value is invalid and a new value may be required to be selected

The ideal implementation would expose the following APIs at minimum (arbitrary names) in much the same way that the dateChange interface works:

• @Output() dateSelect: EventEmitter<Date | null>
• dateSelected: Date | null

Note: The first image demonstrates the scenario in which it would be beneficial to disable the 'Select' button as the currently highlighted date is clearly out of valid range. The button would be reenabled on highlighting a valid date, as in the second image

Please let me know your thoughts and thanks again for the library!

Describe the bug

If you click on the edge of element with number in 24 hour system then it takes wrong value. See attached GIF.

Expected behavior

The selected time is the time what user clicked.

Screenshots

I've imported the datepicker library into my Angular 13 project, as per the instructions and am receiving the following build error:

Error: node_modules/@matheo/datepicker/lib/date-range-input.d.ts:22:22 - error TS2720: Class 'MatDateRangeInput<D>' incorrectly implements class 'MatFormFieldControl<DateRange<D>>'. Did you mean to extend 'MatFormFieldControl<DateRange<D>>' and inherit its members as a subclass?
  Property 'ngModel' is missing in type 'MatDateRangeInput<D>' but required in type 'MatFormFieldControl<DateRange<D>>'.

22 export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>, MatDatepickerControl<D>, MatDateRangeInputParent<D>, MatDateRangePickerInput<D>, AfterContentInit, OnChanges, OnDestroy {
                        ~~~~~~~~~~~~~~~~~

  node_modules/@angular/material/form-field/form-field-control.d.ts:14:5
    14     ngModel: T | null;
           ~~~~~~~
    'ngModel' is declared here.




✖ Failed to compile.

I have checked the declaration for abstract class MatFormFieldControl and confirmed that it does indeed declare ngModel as an input.

My angular imports are all v13 (including material), as shown in the package.json excerpt below:

"dependencies": {
    "@angular/animations": "^13.0.2",
    "@angular/cdk": "^13.0.2",
    "@angular/common": "^13.0.2",
    "@angular/compiler": "^13.0.2",
    "@angular/core": "^13.0.2",
    "@angular/flex-layout": "^13.0.0-beta.38",
    "@angular/forms": "^13.0.2",
    "@angular/localize": "^13.0.2",
    "@angular/material": "^13.0.2",
    "@angular/platform-browser": "^13.0.2",
    "@angular/platform-browser-dynamic": "^13.0.2",
    "@angular/router": "^13.0.2",
    "@angular/service-worker": "^13.0.2",
   ...
    "@matheo/datepicker": "^13.0.0-beta.1",
   ...
}

Any advice would be greatly appreciated!

Describe the bug

I'm using matheo Luxon Date Adapter for my app. I am using Luxon in my entire app. I had to copy the code from the source code and swapped out with unofficial Google LuxonDateAdapeter. I realized that Google version and Matheo version is almost identical except Matheo version has conversion for time for obvious reason. However, I found one more difference which is not related to time. getDayOfWeek is modified to negate 1 from luxon default weekday. The default if Sunday returns 7, Matheo version return 6. When I got the code from Google, I also got unit test to go with it too. Then now I swapped with Matheo version, this getDayOfWeek unit test is failing. To fix this unit test, I can just remove negation of 1 but is there a specific reason why Matheo version is negating 1?

Minimal Reproduction

Find the Google version LuxonAdapter from this link
https://github.com/andreialecu/ngx-material-luxon/blob/main/projects/ngx-material-luxon/src/lib/adapter/luxon-date-adapter.ts

And Find Unit Test for the Google Version LuxonDateAdapter from this link
https://github.com/andreialecu/ngx-material-luxon/blob/main/projects/ngx-material-luxon/src/lib/adapter/luxon-date-adapter.spec.ts

Use Matheo Verion LuxonDateAdapeter and run the unit tests

Expected behavior

All test should still pass.

Screenshots

Your Environment

Angular Version:

Angular CLI: 12.0.4
Node: 14.17.4
Package Manager: npm 7.17.0
OS: win32 x64

Angular: 12.0.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.4
@angular-devkit/build-angular   12.0.4
@angular-devkit/core            12.0.4
@angular-devkit/schematics      12.0.4
@angular/flex-layout            12.0.0-beta.34
@schematics/angular             12.0.4
ng-packagr                      12.0.5
rxjs                            6.6.6

Hi, DatePicker currently doesn't work with Angular 13. I tried to create a PR to fix it but looks like I need your help to finish it.
#44

Is there an example of how to format the datetime within the input?

In the Angular Material examples they reference @angular/material-moment-adapter, but this doesn't know anything about your newly introduced fields.

So I'm wondering if someone ever tried, for instance, to format it as 2021-03-27 17:35?

Error when running "ng serve" using Angular 9.1.13

I followed the docs on how to install and use it, but when I try to serve the application I get this error:

ERROR in ./node_modules/@matheo/datepicker/fesm2015/matheo-datepicker.js 3344:27-44
"export 'coerceStringArray' was not found in '@angular/cdk/coercion'

Minimal Reproduction

1. Run: npm install @matheo/datepicker
2. import modules to app.module.ts:

import { MatDatepickerModule } from '@matheo/datepicker';
import { MatNativeDateModule } from '@matheo/datepicker/core';

@NgModule({
imports: [
MatNativeDateModule,
MatDatepickerModule,
...
],
...
})
export class AppModule {}

3. use the component in the HTML

<input matInput [matDatepicker]="picker"/>
<mat-datepicker-toggle matSuffix [for]="picker">
<mat-datepicker type="datetime" #picker>

Expected behavior

The app is served without errors and the component works.

Your Environment

9.1.13

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.1.15
Node: 14.17.0
OS: win32 x64

Angular: 9.1.13
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.15
@angular-devkit/build-angular     0.901.15
@angular-devkit/build-optimizer   0.901.15
@angular-devkit/build-webpack     0.901.15
@angular-devkit/core              9.1.15
@angular-devkit/schematics        9.1.15
@angular/cdk                      9.2.4
@angular/cli                      9.1.15
@angular/material                 9.2.4
@ngtools/webpack                  9.1.15
@schematics/angular               9.1.15
@schematics/update                0.901.15
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

I am a big fan of @coachcare/datepicker. The new package improved a lot. It should be better if it can support touch and drag for Time picker (even Date picker) to precise selection for mobile device. Thank you.

Is your feature request related to a problem? Please describe.

Angular Material Datepicker Multi-year view has 24 years in the table.

Hopefully want to set the yearsPerPage dynamically as well.
<mat-datepicker #picker [yearsPerPage]="N">

Describe the solution you'd like

Can we set this value via API?
<mat-datepicker #picker [yearsPerPage]="N">

Describe alternatives you've considered

We can set date range dynamically using MAT_DATE_RANGE_SELECTION_STRATEGY

/** Injection token used to customize the date range selection behavior. */
export const MAT_DATE_RANGE_SELECTION_STRATEGY =
new InjectionToken('MAT_DATE_RANGE_SELECTION_STRATEGY');

Additional context

angular/components#22253

Hi
There is no style applied in the timepicker:

Should I install some package?
Thanks

Bug description

DatePicker for TimeView when type="time"

In the class MatCalendarHeader in updateValues() the formatting for the hour is ignoring the double digit: it doesn't display the 0 in front of the hour!
this._hourButtonText = hours.toString(); --> any hour < 10 has only 1 digit

Expected behavior

Hour button text should have 0 for hour < 10, example => 06 instead of 6.
Could you please fix it as you do for the minutes? like this:
this._hourButtonText = ('00' + hours).slice(-2);

Screenshots

Describe the bug

Maybe I am expecting too much from this very nice lib but.
When I'm selecting a time 13:27:45, the value of the form update to a full date like 2021-06-14T13:27:45.099Z

Expected behavior

The form should update the value with 13:27:45

Your Environment

Angular Version:

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.3
@angular-devkit/build-angular   12.0.3
@angular-devkit/core            12.0.3
@angular-devkit/schematics      12.0.3
@angular/cdk                    12.0.4
@angular/material               12.0.4
@schematics/angular             12.0.3
rxjs                            6.6.7
typescript                      4.2.4

Describe the bug

When using dynamic values for the type property, then the display override does not work.

Minimal Reproduction

For example, if I use the picker like this:

<mat-datepicker type="{{dateType}}" #picker>
<mat-datepicker [type]="dateType" #picker>

Then the picker will give you the right input, but then the display is always shown as date, instead of time or datetime.

Expected behavior

Being able to use variables as input type

Anything else relevant?

As a background, I am using the MAT_DATE_FORMATS to make the display show date and also time. It works great when I use the datepicker as type='datetime' (direct strintg) but for some reason it does not like variables. I cannot understand where ths issue is.

As a workaround, if I use several ngIf it works perfectly. Maybe this is just something related to angular and the providers and something else I am missing. Like I said, a workaround exists but it should not be necessary I guess.

This works:

  
  <mat-form-field *ngIf="dateType == 'datetime'"  appearance="fill">
    <mat-label>{{title}}</mat-label>
    <input matInput [matDatepicker]="picker" [formControl]="fg.get(fieldName)" [min]="minDate" [max]="maxDate"/>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker type="datetime" #picker>
      <mat-datepicker-actions>
        <button mat-button matDatepickerCancel>Cancel</button>
        <button mat-raised-button matDatepickerApply>Apply</button>
      </mat-datepicker-actions>
    </mat-datepicker>
  </mat-form-field>

  <mat-form-field *ngIf="dateType == 'date'"  appearance="fill">
    <mat-label>{{title}}</mat-label>
    <input matInput [matDatepicker]="picker" [formControl]="fg.get(fieldName)" [min]="minDate" [max]="maxDate"/>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker type="date" #picker>
      <mat-datepicker-actions>
        <button mat-button matDatepickerCancel>Cancel</button>
        <button mat-raised-button matDatepickerApply>Apply</button>
      </mat-datepicker-actions>
    </mat-datepicker>
  </mat-form-field>

  <mat-form-field *ngIf="dateType == 'time'"  appearance="fill">
    <mat-label>{{title}}</mat-label>
    <input matInput [matDatepicker]="picker" [formControl]="fg.get(fieldName)" [min]="minDate" [max]="maxDate"/>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker type="time" #picker>
      <mat-datepicker-actions>
        <button mat-button matDatepickerCancel>Cancel</button>
        <button mat-raised-button matDatepickerApply>Apply</button>
      </mat-datepicker-actions>
    </mat-datepicker>
  </mat-form-field>

Describe the bug

The date time picker edits hours and minutes no seconds, however it doesn't 0 seconds, looks like its the current system seconds at time of edit.

Expected behavior

Seconds returned as 0

Your Environment

Angular 12.1
Using custom Dayjs DateAdaptor

Describe the bug

When I use my custom theming then threre is a warning in build:
WARNING: The same color styles are generated multiple times. Read more about how style duplication can be avoided in a dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md node_modules\@angular\material\core\theming\_theming.scss 312:7 private-check-duplicate-theme-styles() node_modules\@matheo\datepicker\_theming.scss 360:3 mat-datepicker-theme() src\@shs\scss\theme.scss 10:5 shs-core-theme() src\app\scss\themes\_light.theme.scss 121:5 @use src\app\scss\app.theme.scss 5:1 @use src\styles.scss 5:1 root stylesheet

WARNING: The same color styles are generated multiple times. Read more about how style duplication can be avoided in a dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md node_modules\@angular\material\core\theming\_theming.scss 312:7 private-check-duplicate-theme-styles() node_modules\@matheo\datepicker\_theming.scss 360:3 mat-datepicker-theme() src\@shs\scss\theme.scss 10:5 shs-core-theme() src\app\scss\themes\_light.theme.scss 136:9 @use src\app\scss\app.theme.scss 5:1 @use src\styles.scss 5:1 root stylesheet

WARNING: The same color styles are generated multiple times. Read more about how style duplication can be avoided in a dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md node_modules\@angular\material\core\theming\_theming.scss 312:7 private-check-duplicate-theme-styles() node_modules\@matheo\datepicker\_theming.scss 360:3 mat-datepicker-theme() src\@shs\scss\theme.scss 10:5 shs-core-theme() src\app\scss\themes\_dark.theme.scss 116:5 @use src\app\scss\app.theme.scss 6:1 @use src\styles.scss 5:1 root stylesheet

Minimal Reproduction

I have more themes in the application and I call "@include datePickerTheming.mat-datepicker-theme($theme)" for every theme the same way like for other components. This datepicker gives me the error during ng serve.

Expected behavior

No build warnings.

Describe the bug

Manually inputting dates doesn't consider locale

To Reproduce

Steps to reproduce the behavior:

1. see: https://stackblitz.com/edit/components-issue-abxrcw?file=src/app/example-component.html
2. In DateTime (2. picker) change the date from (select in the form-field and input with keyboard) 18/04/2021 to 02/04/2021.
3. The DD/MM is flipped to MM/DD, so it renders as 04/02/2021.
4. If the date is changed to e.g. 17/04/2021 it thinks the month is 17 and the field is invalid

Expected behavior

It should respect current locale (in this case "en-GB")

Describe the bug

I wish I had more information on this, I'm still working through a suitable solution.

After upgrading from Angular 14 to 15, and still using the "Legacy" API for all Material related things, the only issue I've noticed is that any Material based component used by this library is not getting any style applied to it. It works and looks fine in development, but after building the production build and deploying, the styles are just not there/very ugly.

Minimal Reproduction

Start with an Angular 14 application, implement Angular Material + this library, then run the upgrades to angular 15. I believe the way the @include datepicker.theme($theme); is working is causing the library to use the "new" API rather than the legacy API.

It's possible I just need to bite the bullet and upgrade to the "new" Material MDC API. But it would be nice to have an option to provide a legacy theme builder to this library.

Expected behavior

I would expect the styles to look the same between dev and production.

Screenshots

Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 15.0.4
Node: 16.13.0
Package Manager: npm 8.1.0
OS: win32 x64

Angular: 15.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.4
@angular-devkit/build-angular   15.0.4
@angular-devkit/core            15.0.4
@angular-devkit/schematics      15.0.4
@angular/cdk                    15.0.3
@angular/material               15.0.3
@schematics/angular             15.0.4
rxjs                            6.6.7
typescript                      4.8.4

Describe the bug

When a day is selected in the datetime picker and a min date is specified, an invalid date can easily be selected by switching months & pressing the apply button.

Minimal Reproduction

1. Create a datetime picker with today as the selected date (eg. 22-11-2021)
2. Set the minimum date to today + 1 day - 1 month (eg. 23-10-2021)
3. Open the date picker & navigate to the previous month
4. A date before the min date is selected (eg. 22-10-2021)

Expected behavior

A date before the minimum date should not be selectable.

Screenshots

Suggestion for stackblitz for new issues:
https://stackblitz.com/edit/components-issue-gkdfcp?file=package.json

Forked from https://stackblitz.com/fork/components-issue
(official material / angular issues)

For some reason the mat-calendar component doesn't get the mat-calendar class applied - any ideas why? Messes up the width!

Describe the bug

The content of the date range picker is overflowing on the bottom, if a month has 6 rows of days or 6 weeks, so to speak. This happens in May 2021, January 2021, August 2020, etc.

Minimal Reproduction

1. Go to http://matheo.co/demos/datepicker
2. Open the DATE RANGE picker on the bottom right
3. Navigate to May 2021
4. The last two days of May 2021 should be overflowing

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

Your Environment

Angular Version: v11.2.14 (Angular version used on http://matheo.co/demos/datepicker)

Anything else relevant?

• Issue exists in Chrome and Firefox

Bugs description:

1. Visual opacity doesn't reflect the filter value:
   I have a working hours filter that I copied from your example:

if (unit === 'hour') {
    // Prevent office hours from being selected.
    return hour >= 6 && hour <= 19;
}

But the hour 5 looks clickable (opacity = 1) and 19 has opacity while should be full black.

2. The Click on hours with opacity is actually triggering the view for minutes selection, while it should do nothing and remain in the view for hour selection as indeed those hours are not selectable!
   EDIT: Bug seems present only in Time view, while in DateTime view click is not allowed, which is ok.

Expected behavior

Opacity of the hours should respect the condition the filter is returning.
The click on hours and minutes should be ignored and remains in the same view.

Screenshots

Hi

I am trying to apply a different format to the datetime (MAT_DATE_FORMATS) but I can't get it to work.

For example, if we use the Material example but use the imports from your library, the date format doesn't work.
https://stackblitz.com/angular/nkdkbolbgvg?file=src%2Fapp%2Fdatepicker-formats-example.ts

// import { MatDatepickerModule } from '@angular/material/datepicker'
// import { MatNativeDateModule } from '@angular/material/core'
import { MatDatepickerModule } from '@matheo/datepicker'
import { MatNativeDateModule } from '@matheo/datepicker/core'

Can you add an example?
thanks

Describe the bug

cdk/coersion was created on version 11, so for ealier versions it's missing this dependency.

Minimal Reproduction

Any version previous to 11

Screenshots

Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.2.2
Node: 13.14.0
OS: win32 x64

Angular: 10.2.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1002.2
@angular-devkit/build-angular   0.1002.2
@angular-devkit/core            10.2.2
@angular-devkit/schematics      10.2.2
@angular/cdk                    10.2.7
@angular/cli                    10.2.2
@angular/material               10.2.7
@schematics/angular             10.2.2
@schematics/update              0.1002.2
rxjs                            6.6.3
typescript                      4.0.7

Describe the bug

Thanks for this library.

I may not fully understand the meaning of optional streams as it is not well documented. However, I would expect the first data request to be initiated without waiting for an optional stream to emit. Right now it seems that the optional streams must emit some value before the first data request will occur.

Adding the following operator to connect() in datasource-stream.ts does make the data source work as I would expect it to.

before

      optional.length
        ? merge(...optional).pipe(scan(this.reducePartials, {} as Partial<T>))
        : of({} as Partial<T>),

after

optional.length
        ? merge(...optional).pipe(
            startWith({}),
            scan(this.reducePartials, {} as Partial<T>),
          )
        : of({} as Partial<T>),

Minimal Reproduction

I don't have a fully reproducible example right now but I can create one at some point if it will help.

A simple data source with the following stream added

    this.addStream({
      name: 'filter',
      stream: form.valueChanges,
      optional: true,
    });

Expected behavior

The data source should automatically process the first data request.

Screenshots

If applicable, add screenshots to help explain your problem.

Your Environment

Angular Version:

Anything else relevant?

Hi I am trying to use this date and time picker in Angular 14 but it seems not [working,]

Hello matheo,

is this a timePicker bug or have I made any mistake?

core.js:6150 ERROR TypeError: Cannot read property 'getUnit' of undefined
    at dateInputsHaveChanged (matheo-datepicker.js:4560)
    at MatDatepickerInput.ngOnChanges (matheo-datepicker.js:4393)
    at MatDatepickerInput.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1506)
    at callHook (core.js:2525)
    at callHooks (core.js:2492)
    at executeCheckHooks (core.js:2424)
    at selectIndexInternal (core.js:8383)
    at Module.ɵɵadvance (core.js:8372)
    at JourneySearchComponent_Template (journey-search.component.html:36)
    at executeTemplate (core.js:9538)

  <mat-form-field appearance='standard'>
    <mat-label>Uhrzeit</mat-label>
    <input matInput [matDatepicker]='this.timePicker' formControlName='time'>
    <mat-datepicker touchUi #timePicker type='time' [twelveHour]='false'></mat-datepicker>
    <mat-error>Bitte wähle eine korrekte Uhrzeit aus</mat-error>
  </mat-form-field>

    this.apiTokenForm = this.formBuilder.group({
      departureTravelPoint: [null, [Validators.required, TravelPointValidators.pointFormat]],
      arrivalTravelPoint: [null, [Validators.required, TravelPointValidators.pointFormat]],
      date: [new Date(), Validators.required],
      time: [new Date(), Validators.required],
      isArrivalDateTime: [false]
    }, {
      updateOn: 'submit'
    });