Better integrate with Material controls

[LucasBrazi06]

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

The material theme is not matching yours:

Describe the solution you'd like

By allowing <mat-form-field> around your control, material theming will be applied

    <mat-form-field>
      <daterangepicker
        class="col-md-12 col-lg-12 form-control"
        [options]="daterangepickerOptions"
        (rangeSelected)="dateChanged($event)">
      </daterangepicker>
    </mat-form-field>

The code above generates the followwing error:

mat-form-field must contain a MatFormFieldControl.

Maybe because matInput directive is maybe not present.

Describe alternatives you've considered

Providing manually full HTML/CSS theming generated by Material

Let me know if I missed something.

[LucasBrazi06]

Another way would be to provide a directive like this:

    <mat-form-field>
      <input daterangepicker
        class="col-md-12 col-lg-12 form-control"
        [options]="daterangepickerOptions"
        (rangeSelected)="dateChanged($event)">
      </input>
    </mat-form-field>

[LucasBrazi06]

I used a workaround to display a material input field in the UI and link your date/time picker control with it by cheating with the CSS:

[technikhil314]

yeah CSS is kept open for that purpose. Apparently creating headless UI is not that streight forward in angular. I am thinking of creating a pure js headless version of datetimerangepicker so people can use any css and their brand theme to build UI.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.