All Components

DateInputComponent

Represents the Kendo UI DateInput component for Angular.

Selector

kendo-dateinput

Export Name

Accessible in templates as #kendoDateInputInstance="kendo-dateinput"

Inputs

disabled boolean

Sets or gets the disabled property of the DateInput and determines whether the component is active.

format string

Specifies the date format used to display the input value.

formatPlaceholder DateInputFormatPlaceholder

Defines the descriptions of the format sections in the input field.

  • 'wide'—Displays the full description of the format section. For example, turns MM into month. Retrieved from CLDR.
  • 'narrow'—Displays the narrow description of the format section. For example, turns MM into mo.. Retrieved from CLDR.
  • 'short'—Displays the short description of the format section. For example, turns MM into mo.. Retrieved from CLDR.
  • 'formatPattern'—Directly displays the format section. For example, turns MM into MM.
  • [CustomFormatPlaceholder](/kendo-angular-ui/components/dateinputs/api/DateInputCustomFormatPlaceholder/)— An object that defines the description of the format sections. For example, { day: 'd.', month: 'M.', year: 'y', hour: 'h.' }.
@Component({
selector: 'my-app',
template: `
<div class="row example-wrapper" style="min-height: 450px;">
 <div class="col-xs-12 col-md-6 example-col">
   <p>Full-length format description:</p>
   <kendo-dateinput formatPlaceholder="wide"></kendo-dateinput>
 </div>

 <div class="col-xs-12 col-md-6 example-col">
   <p>Narrow-length format description:</p>
   <kendo-dateinput formatPlaceholder="narrow"></kendo-dateinput>
 </div>

 <div class="col-xs-12 col-md-6 example-col">
   <p>Short-length format description:</p>
   <kendo-dateinput formatPlaceholder="short"></kendo-dateinput>
 </div>

 <div class="col-xs-12 col-md-6 example-col">
   <p>Display defined format:</p>
   <kendo-dateinput format="MM/dd/yyyy" formatPlaceholder="formatPattern"></kendo-dateinput>
 </div>

 <div class="col-xs-12 col-md-6 example-col">
   <p>Custom defined format descriptions</p>
   <kendo-dateinput format="G"
     [formatPlaceholder]="{
       year: 'y', month: 'M', day: 'd',
       hour: 'h', minute: 'm', second: 's'
     }"
   ></kendo-dateinput>
 </div>
</div>
`
})
class AppComponent { }

placeholder string

Specifies the hint the DateInput displays when its value is null.

@Component({
selector: 'my-app',
template: `
 <kendo-dateinput placeholder="Enter birth date..."></kendo-dateinput>
`
})
class AppComponent { }

rangeValidation boolean

Determines whether the built-in min or max validators are to be enforced when a form is being validated.

spinners boolean

Specifies whether the Up and Down spin buttons will be rendered.

steps DateInputIncrementalSteps

Configures the incremental steps of the DateInput.

The available options are:

  • year: Number—Controls the incremental step of the year value.
  • month: Number—Controls the incremental step of the month value.
  • day: Number—Controls the incremental step of the day value.
  • hour: Number—Controls the incremental step of the hour value.
  • minute: Number—Controls the incremental step of the minute value.
  • second: Number—Controls the incremental step of the second value.
@Component({
selector: 'my-app',
template: `
 <kendo-dateinput [steps]="steps"></kendo-dateinput>
`
})
class AppComponent {
  public steps = { year: 10, month: 1, day: 5 };
}

tabIndex number

Sets or gets the tabIndex property of the DateInput.
.

title string

Sets the title of the input element of the DateInput.

max Date

Specifies the biggest date that is valid.

min Date

Specifies the smallest date that is valid.

value Date

Specifies the value of the DateInput component.

The value has to be a valid JavaScript Date instance.

Events

blur EventEmitter

Fires each time the input element gets blurred.

@Component({
selector: 'my-app',
template: `
 <kendo-dateinput (blur)="handleBlur()"></kendo-dateinput>
`
})
class AppComponent {
  public handleBlur(): void {
     console.log("Component is blurred");
  }
}

To wire the event programmatically, use the onBlur property.

focus EventEmitter

Fires each time the user focuses the input element.

@Component({
selector: 'my-app',
template: `
 <kendo-dateinput (focus)="handleFocus()"></kendo-dateinput>
`
})
class AppComponent {
  public handleFocus(): void {
     console.log("Component is focused");
  }
}

To wire the event programmatically, use the onFocus property.

valueChange EventEmitter

Fires each time the user selects a new value.

Methods

blur

Blurs the DateInput component.

focus

Focuses the DateInput component.

@Component({
selector: 'my-app',
template: `
 <button (click)="dateinput.focus()">Focus date input</button>
 <kendo-dateinput #dateinput></kendo-dateinput>
`
})
class AppComponent { }
In this article