CODEWITHSUNDEEP
angulardatetimepickertimepicker
Nehal Jaisalmeria
Nehal Jaisalmeria

Reputation: 432

How to set default values in the Angular Timepicker?

I am using the NgbTimepickerModule and this is my template:

<form [formGroup]="form">
  <div ngbDropdown>
  <input class="datepicker btn btn-link"  ngbDropdownToggle [value]="_value?(_value|date:'dd/MM/yy, HH:mm'):label">
      <div ngbDropdownMenu >
        <ngb-datepicker #dp [(ngModel)]="date" (dateSelect)="getDatetime()"[ngModelOptions]="{standalone:true}" ></ngb-datepicker>

        <ngb-timepicker [ngModel]="time" (ngModelChange)="time=$event;getDatetime()"[ngModelOptions]="{standalone:true}" [hourStep]="time?.hour" [minuteStep]="time?.minute"></ngb-timepicker>
      </div>
      </div>
  <button class="btn btn-primary">submit</button>
  </form>

I want time picker to have some default values in the HH and MM inputs and not be blank

Timepicker blank

Here is the link to my Stackblitz⚡

Also is it possible to add "required validation" on my datetime picker?

Upvotes: 0

Views: 3953

Answers (1)

Kamran Khatti
Kamran Khatti

Reputation: 4127

I have forked your stackblitz example and tweaked your code to achieve your requirements.

here is the codebase I tweaked.

// initialized time object from time: any to
time: { hour: number, minute: number};

In your if time not set condition added default time

if (!this.time) {
    value =  new Date().getDate()+'/'+new Date().getMonth()+'/'+new Date().getFullYear()+' '+ new Date().getHours() +':'+ new Date().getMinutes();
  
  // note this part  
  this.time = {
      hour: new Date().getHours(),
      minute: new Date().getMinutes()
    };
  }

Checkout the working DEMO

Upvotes: 1

Related Questions