'How to Capitalize the First Letter of the Kendo-DatePicker format in Angular?

I have a kendo-datepicker and it's always displaying the format in the field like following. enter image description here

But I want to customize this as Month/Day/Year. Capitalize the first letter. Is it possible to customize like this.

.html

<form [formGroup]="myForm">

    <label for="address" class="col-sm-2 col-form-label">Date</label>
    
     <div class="col-sm-4">
    
         <kendo-datepicker formControlName="startingDate" format="MM/dd/yyyy">
         </kendo-datepicker>
    
      </div>
 </form>

.ts

myForm: FormGroup = new FormGroup({
    startingDate: new FormControl(""),
  });
angularkendo-uiformatkendo-datepicker


Solution 1:[1]

It's fixed by overriding the k-input CSS class.

 :host::ng-deep .k-input {
        text-transform: capitalize;
      }

Solution 2:[2]

I would override css for date input. Something like this:

.k-dateinput > .k-input-inner {
    text-transform: capitalize;
}

Working example: Capitalize date format in form group

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kalana Tebel
Solution 2

Related Questions