Setting current date and default time in angular datepicker

Question

I want to set the default date to current date and customize default time in a datepicker using Angular, e.g Current date: 07-02-2020 and default custom time should be 08:00 AM. How can i achieve this please. Here is my html code which only shows date and time based on value selected.

   <label class="col-sm-12 col-md-8 form-control-label  ml-2" for="date_from">{{'From Date' | 
  translate}} <span class="danger">*</span>:</label>
                <div class="col-md-12">
                    <input type="datetime-local" [(ngModel)]="leaveList.date_from" 
  [max]="leaveList.date_to" class="form-control input-md" id="date_from" 
                    name="date_from" (change)="onChangeDate()"  max="9999-12-31">
                </div>

.component.ts file

Ahmed Abdelfattah · Accepted Answer · 2020-07-02 01:48:03Z

1

You need to use moment library for date/time formatting

1-install moment using npm i moment

2-You have to assign value to date_from in your .ts, just like that

leaveList.date_from = moment().format('MM-DD-YYYY 8:30A')

edited Jul 2, 2020 at 1:48

answered Jul 2, 2020 at 1:24

Ahmed Abdelfattah

5775 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Francis Over a year ago

Thanks @ahmed, I want it to show the current date as default, but a static time . e.g 07-02-2020: 8:30AM should show once the page loads. The date part should be dynamic according to the current date but the time should be static

Ahmed Abdelfattah Over a year ago

you have to use moment for formatting,check my edit

Francis Over a year ago

You are correct, but i want to show the default time, so the user can click and select, but default date and time should be shown on the screen before the user selects from the datepicker. Thanks

Mafei · Accepted Answer · 2021-10-04 00:42:19Z

0

<input required class="form-control" [(ngModel)]="myDate" type="datetime-local" name="myDate" id="myDate"/>

you can customize the date as you want instead of using new Date()

this.myDate = this.datepipe.transform(new Date(), 'yyyy-MM-ddThh:mm'),

so you have to import DatePipe

import {DatePipe} from '@angular/common'

and initialize in the constructor

constructor(public datepipe: DatePipe){
}

and also add it int the app.module.ts as a provider

providers: [
    DatePipe,
    ....
],

read more https://angular.io/api/common/DatePipe

answered Oct 4, 2021 at 0:42

Mafei

3,9683 gold badges23 silver badges43 bronze badges

Collectives™ on Stack Overflow

Setting current date and default time in angular datepicker

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related