Date/Time Input

Components > Editing Data > Date/Time Input

Use this component to...

Prompt the user for a date, time, or date/time value

See this component in action...

Test out this component in a hosted version of the sample app

Overview

Use the date/time input component to prompt the user to enter both a date value and a time value, together.

Development

Web component development

Component reference

p-calendar

Module: CalendarModule - Package: primeng

⚠️ This component requires the use of Angular and will not work in non-Angular applications.

Allows user to edit date/time values in a non-mobile environment

View the p-calendar reference doc

If you're adding PrimeNG to your solution for the first time, reference their setup documentation. It's important to note that the inclusion of the nova-light theme css is not necessary to work with Responsive UI. Styling for the PrimeNG components is provided by Responsive UI's theming.

Implementation

There are two different experiences for inputting date values: one for desktop and another for tablet and mobile. It’s a good practice to support both approaches for your date and date/time fields if your app will run in both environments.

Prompting for Date/Time on Desktop

Start by importing the CalendarModule and BrowserAnimationsModule modules.

Import the modules

import { CalendarModule } from 'primeng/calendar';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        ...
        CalendarModule,
        BrowserAnimationsModule,
        ...
    ]
})

export class AppModule() {}

For desktop devices, use the p-calendar calender component from PrimeNG. Add the rui-hidden-mobile-device CSS class to the input to only display it on desktop.

If you need to prompt for time in addition to date, add the showTime and hourFormat properties to the p-calendar as noted in the PrimeNG documentation.

The example below shows a p-calendar for desktop and an input for tablet and mobile. Nest all of these elements within a div that has both the input-group and rui-datepicker CSS classes.

Date/time input for desktop

<div class="input-group rui-datepicker">

    <p-calendar formControlName="birthdate" [showIcon]="true" [monthNavigator]="true" [yearNavigator]="true"
        [showOnFocus]="false"c[showButtonBar]="true" yearRange="1900:2099" inputStyleClass="rui-form-control"
        class="rui-hidden-mobile-device"></p-calendar>

    <input id="Birthdate-mobile" formControlName="birthdate" [value]="editForm.get('birthdate').value | date:'yyyy-MM-dd'"
     type="date" class="form-control rui-visible-mobile-device" required autocomplete="off" autocorrect="off"
     autocapitalize="off" spellcheck="false" />

</div>

If you place a date picker within a tabbed interface, you may experience clipping of the calendar depending your form layout and tab size.

In order to allow the date picker element to render outside of the tab content area, use the appendTo attribute on your p-calendar and assign the value to “body”:
<p-calendar appendTo="body" ...></p-calendar>

Or bind it to another parent ng-template variable:
<div #calendarContainer><p-calendar [appendTo]="calendarContainer" ...></p-calendar></div>

Prompting for Date/Time on Tablet and Mobile

For mobile devices, simply use input type="date". The browser will display the native date picker experience for those devices, which is much better suited to those environments than the desktop date picker popup. Add the rui-visible-mobile-device CSS class to the input to only display it on tablet and mobile.

If you need to prompt for time in addition to date, set the input type to datetime-local.

The example below shows a p-calendar for desktop and an input for tablet and mobile. Nest all of these elements within a div that has both the input-group and rui-datepicker CSS classes.

Native date/time input for tablet and mobile

<div class="input-group rui-datepicker">

    <p-calendar formControlName="birthdate" [showIcon]="true" [monthNavigator]="true" [yearNavigator]="true"
        [showOnFocus]="false"c[showButtonBar]="true" yearRange="1900:2099" inputStyleClass="rui-form-control"
        class="rui-hidden-mobile-device"></p-calendar>

    <input id="Birthdate-mobile" formControlName="birthdate" [value]="editForm.get('birthdate').value | date:'yyyy-MM-dd'"
     type="date" class="form-control rui-visible-mobile-device" required autocomplete="off" autocorrect="off"
     autocapitalize="off" spellcheck="false" />

</div>

Prompting for Date/Time with a Smaller Footprint

If you want a date input with a smaller visual footprint, consider using a standard button to toggle the date picker. This would render a single button that displays the date value. Add a date picker input, but hide it using the invisible class. When you press the button, it displays the same date picker popup. The upside to using this approach is that it takes up less width than the input and the standard datepicker button, making it ideal for cases where space is at a premium, including toolbars. The downside is that in some cases it can take longer for the user to select the year, month, and day using a mouse than by just typing it into a standard date input. Two-way bind the ngModel attribute of your input to a date value in your controller as you would with a standard date picker.

Small footprint date/time input: HTML

<div class="rui-datepicker">
    <rui-button (jhaClick)="openCalendar($event)" text="{{appointmentDate | jhaDate}}"></rui-button>

    <p-calendar name="AppointmentDate" #calendar formControlName="appointmentDate" inputStyleClass="invisible"></p-calendar>
</div>

Small footprint date/time input: TypeScript

@ViewChild('calendar')
calendar: any;
...
openCalendar(event: Event) {
    this.calendar.showOverlay(this.calendar.inputfieldViewChild.nativeElement);
    this.appointmentDate = new Date(this.appointmentDate.setDate(this.appointmentDate.getDate()));
    event.stopPropagation();
}

Angular component development

Component reference

p-calendar

Module: CalendarModule - Package: primeng

Allows user to edit date/time values in a non-mobile environment

View the p-calendar reference doc

Implementation

Prompting for Date/Time on Desktop

Start by importing the CalendarModule and BrowserAnimationsModule modules.

Import the modules

import { CalendarModule } from 'primeng/calendar';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        ...
        CalendarModule,
        BrowserAnimationsModule,
        ...
    ]
})

export class AppModule() {}

For desktop devices, use the p-calendar calender component from PrimeNG. Add the jha-hidden-mobile-device CSS class to the input to only display it on desktop.

If you need to prompt for time in addition to date, add the showTime and hourFormat properties to the p-calendar as noted in the PrimeNG documentation.

The example below shows a p-calendar for desktop and an input for tablet and mobile. Nest all of these elements within a div that has both the input-group and jha-datepicker CSS classes.

Date/time input for desktop

<div class="input-group jha-datepicker">

    <p-calendar formControlName="birthdate" [showIcon]="true" [monthNavigator]="true" [yearNavigator]="true"
        [showOnFocus]="false"c[showButtonBar]="true" yearRange="1900:2099" inputStyleClass="form-control"
        class="jha-hidden-mobile-device"></p-calendar>

    <input id="Birthdate-mobile" formControlName="birthdate" [value]="editForm.get('birthdate').value | date:'yyyy-MM-dd'"
     type="date" class="form-control jha-visible-mobile-device" required autocomplete="off" autocorrect="off"
     autocapitalize="off" spellcheck="false" />

</div>

If you place a date picker within a tabbed interface, you may experience clipping of the calendar depending your form layout and tab size.

Or bind it to another parent ng-template variable:
<div #calendarContainer><p-calendar [appendTo]="calendarContainer" ...></p-calendar></div>

Prompting for Date/Time on Tablet and Mobile

For mobile devices, simply use input type="date". The browser will display the native date picker experience for those devices, which is much better suited to those environments than the desktop date picker popup. Add the jha-visible-mobile-device CSS class to the input to only display it on tablet and mobile.

If you need to prompt for time in addition to date, set the input type to datetime-local.

The example below shows a p-calendar for desktop and an input for tablet and mobile. Nest all of these elements within a div that has both the input-group and jha-datepicker CSS classes.

Native date/time input for tablet and mobile

<div class="input-group jha-datepicker">

    <p-calendar formControlName="birthdate" [showIcon]="true" [monthNavigator]="true" [yearNavigator]="true"
        [showOnFocus]="false"c[showButtonBar]="true" yearRange="1900:2099" inputStyleClass="form-control"
        class="jha-hidden-mobile-device"></p-calendar>

    <input id="Birthdate-mobile" formControlName="birthdate" [value]="editForm.get('birthdate').value | date:'yyyy-MM-dd'"
     type="date" class="form-control jha-visible-mobile-device" required autocomplete="off" autocorrect="off"
     autocapitalize="off" spellcheck="false" />

</div>

Prompting for Date/Time with a Smaller Footprint

Small footprint date/time input: HTML

<div class="jha-datepicker">
    <jha-button (jhaClick)="openCalendar($event)" jhaText="{{appointmentDate | jhaDate}}"></jha-button>

    <p-calendar name="AppointmentDate" #calendar formControlName="appointmentDate" inputStyleClass="invisible"></p-calendar>
</div>

Small footprint date/time input: TypeScript

@ViewChild('calendar')
calendar: any;
...
openCalendar(event: Event) {
    this.calendar.showOverlay(this.calendar.inputfieldViewChild.nativeElement);
    this.appointmentDate = new Date(this.appointmentDate.setDate(this.appointmentDate.getDate()));
    event.stopPropagation();
}

Design

Figma design

Figma design info

You can find this component in the Components - Forms page in the Figma UI Kit.

Dev Component	Design Component Name
Date input	RUI / Forms / Date Input
Inline date input	RUI / Forms / Inline Date Input
Inline time input	RUI / Forms / Inline Time Input
Inline date/time input	RUI / Forms / Inline Date Time Input

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App - Editing Form Data

Dev Component	Design Component Name
Date input	JHA / Forms / Date Input
Inline date input	JHA / Forms / Inline Date Input
Inline time input	JHA / Forms / Inline Time Input
Inline date/time input	JHA / Forms / Inline Date/Time Input

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Wed Apr 19 2023