All Components

Formats

You can control the format of the DateInput by using format.

The format property accepts string parameters and, by default, is set to 'd'. When format is set and the input element is not focused, the value is formatted accordingly.

For more information on the date and number formats Kendo UI for Angular supports, refer to the kendo-intl GitHub repository.

@Component({
    selector: 'my-app',
    template: `
      <div class="example-wrapper" style="min-height: 400px;">
          <div class="col-xs-12 col-sm-6 example-col">
              <p>Select a long date:</p>
              <kendo-dateinput
                  [format]="'dd-MMM-yyyy HH:mm:ss'"
                  [value]="value"
              ></kendo-dateinput>
          </div>

          <div class="col-xs-12 col-sm-6 example-col">
              <p>Select a short date:</p>
              <kendo-dateinput
                  [format]="'MMMM yyyy'"
                  [value]="value"
              ></kendo-dateinput>
          </div>
      </div>
    `
})

class AppComponent {
    public value: Date = new Date(2000, 2, 10, 13, 30, 0);
}
In this article