Hide toggle calendar button on Kendo Angular DatePicker

Asked
Active3 hr before
Viewed126 times

3 Answers

buttonkendodatepicker
90%

,

Example_snippet/controller/utility/_button.js/ <md-content ng-controller="App. . .
<md-content ng-controller="AppCtrl as ctrl" layout-padding ng-cloak>
   <div layout-gt-xs="row">
      <div flex-gt-xs>
         <h4 id="datepicker-header">Standard date-picker</h4>
         <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" input-aria-describedby="datepicker-description" input-aria-labelledby="datepicker-header "></md-datepicker>
         <p style="display: none" id="datepicker-description">
            You can use input-aria-describedby to have screen readers provide a more detailed
            description of a datepicker or its interactions.
         </p>
      </div>

      <div flex-gt-xs>
         <h4>Disabled date-picker</h4>
         <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" disabled></md-datepicker>
      </div>
   </div>

   <div layout-gt-xs="row">
      <div flex-gt-xs>
         <h4>Opening the calendar when the input is focused</h4>
         <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-open-on-focus></md-datepicker>
      </div>

      <div flex-gt-xs>
         <h4>Date-picker that goes straight to the year view</h4>
         <md-datepicker ng-model="ctrl.myDate" md-current-view="year" md-placeholder="Enter date"></md-datepicker>
      </div>
   </div>

   <div layout-gt-xs="row">
      <div flex-gt-xs>
         <h4>Custom calendar trigger</h4>
         <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-is-open="ctrl.isOpen"></md-datepicker>
         <md-button class="md-primary md-raised" ng-click="ctrl.isOpen = true">Open</md-button>
      </div>

      <div flex-gt-xs>
         <h4>Date-picker that only allows for the month to be selected</h4>
         <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-mode="month"></md-datepicker>
      </div>
   </div>
</md-content>
load more v
88%

Try it with ViewEncapsulation, see example below:, I got it working now with ViewEncapsulation, see my updated answer for an example, – Rico Koldi Apr 23 '19 at 14:12 ,Connect and share knowledge within a single location that is structured and easy to search

Example_snippet/controller/utility/_button.js/ import { Component, ViewEncaps. . .
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <style>
    .k-datepicker .k-select {
        display: none;
      }

      .k-datepicker .k-picker-wrap {
        padding: 0;
      }

      .k-datepicker .k-input {
        border-radius: 3px;
      }
    </style>

        <div class="example-wrapper" style="min-height: 400px">
            <p>Select a date:</p>
            <kendo-datepicker
                [(value)]="value"
            ></kendo-datepicker>
        </div>
    `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  public value: Date = new Date(2000, 2, 10);
}
load more v
72%

The following example demonstrates how to hide the default button of the DatePicker by using CSS,, Widgets / Editors / DatePicker / How To ,For more runnable examples on the Kendo UI DatePicker, browse its How To documentation folder

Example_snippet/controller/utility/_kendo.js/ <input id="datepicker" val. . .
    <input id="datepicker" value="10/10/2011" style="width:150px;" />
    <script>
      $(document).ready(function() {
        $("#datepicker").kendoDatePicker();
      });
    </script>
    <style>
      .k-datepicker .k-select {
        display: none;
      }

      .k-datepicker .k-picker-wrap {
        padding: 0;
      }

      .k-datepicker .k-input {
        border-radius: 3px;
      }
    </style>