CODEWITHSUNDEEP
angularprimeng
Rohit
Rohit

Reputation: 31

PrimeNg Calendar: Default time for selecting start date with time - should be start of day time that is 00:00:00

I am using PrimeNg calendar widget with 2 fields that is startDate and endDate.

Currently when selecting startDate, It is showing the selected date with current time but my requirement is, selected date with start of the day time that is 00:00:00.

and when in endDate field, we are are selecting date it is showing selected date with current time but i want selected date with end of the day time that is 23:59:59.

I am using Angular 7 with primeNg(primefaces).

Please help in to short out the issue.

Upvotes: 2

Views: 8860

Answers (2)

Bank5z0rSqt
Bank5z0rSqt

Reputation: 71

Here's an example of handling a prime range picker calendar with moment.

onRangeDateFilterApply(): void {
        if (this.rangeDateFilterValue[0] && this.rangeDateFilterValue[1]) {

            const timezoneOffset = moment(this.rangeDateFilterValue[0]).utcOffset();

            this.dateFilter = {
                dateRange: { from: moment(this.rangeDateFilterValue[0]).utc().add(timezoneOffset, 'minutes').startOf('day').format(), to: moment(this.rangeDateFilterValue[1]).utc().add(timezoneOffset, 'minutes').endOf('day').format()}
            }
            // do stuff
        }
}

Upvotes: 0

Abhinav Kumar
Abhinav Kumar

Reputation: 3036

You can use setHours, setMinutes and setSeconds method of date object. PrimeNg p-calendar uses the date object.

Here it is. component.ts

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  date1 = new Date();
  date2 = new Date();
  constructor(){
    this.date1.setHours(0);
    this.date1.setMinutes(0);
    this.date1.setSeconds(0);
    this.date2.setHours(0);
    this.date2.setMinutes(0);
    this.date2.setSeconds(0);
  }
}

Component.html

<div class="ui-g-12 ui-md-4">
        <h3>Start Time</h3>
        <p-calendar [(ngModel)]="date1" [showTime]="true" hourFormat="24"></p-calendar>
    </div>
<br>

<div class="ui-g-12 ui-md-4">
        <h3>End Time</h3>
        <p-calendar [(ngModel)]="date2" [showTime]="true" hourFormat="24"></p-calendar>
</div>

working code

Upvotes: 1

Related Questions