Skip to content

PropertyFieldDateTimePicker control

This control generates a Date and Time picker field that can be used in the property pane of your SharePoint Framework web parts.

The control can be configured to be date only or date and time.

Date only

Date only

Date picker

Date picker

Date and time

Date and time

How to use this control in your solutions

  1. Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency.
  2. Import the following modules to your component:
import { PropertyFieldDateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-property-controls/lib/PropertyFieldDateTimePicker';
  1. Create a new property for your web part, for example:
import { IDateTimeFieldValue } from "@pnp/spfx-property-controls/lib/PropertyFieldDateTimePicker";

export interface IPropertyControlsTestWebPartProps {
  datetime: IDateTimeFieldValue;
  1. Add the custom property control to the groupFields of the web part property pane configuration:
PropertyFieldDateTimePicker('datetime', {
  label: 'Select the date and time',
  dateConvention: DateConvention.DateTime,
  timeConvention: TimeConvention.Hours12,
  onPropertyChange: this.onPropertyPaneFieldChanged,
  onGetErrorMessage: null,
  deferredValidationTime: 0,
  key: 'dateTimeFieldId',
  showLabels: false


The PropertyFieldDateTimePicker control can be configured with the following properties:

Property Type Required Description
label string yes Property field label displayed on top.
disabled boolean no Specify if the control needs to be disabled.
initialData IDateTimeFieldValue yes Initial date and time value of the control.
formatData function no Defines a formatDate function that can override the output value.
dateConvention DateConvention no Defines the date convention to use. By default this is set to date and time.
timeConvention TimeConvention no Defines the time convention to use. By default this is set to 24-hour clock convention.
onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed.
properties any yes Parent web part properties, this object is use to update the property value.
key string yes An unique key that indicates the identity of this control.
onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it.
deferredValidationTime number no Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200.
showLabels boolean no Specify if labels in front of Date and Time parts should be rendered. By default this is set to true

Interface IDateTimeFieldValue

Property Type Required Description
value Date yes JavaScript date value.
displayValue string yes Date value formatted as a string.

Enum DateConvention

Name Description
DateTime Shows the date and time picker
Date Shows only the date picker

Enum TimeConvention

Name Description
Hours12 Specify the hours in 12-hours (AM / PM) time convention.
Hours24 Specify the hours in 24-hours time convention.