PnP DateTimePicker in the SharePoint Framework (SPFx) webpart

This article demonstrates how to implement the PnP DateTimePicker control in the SharePoint Framework (SPFx) web part.
The DateTimePicker control allows you to select dates and times through dropdowns or calendar pickers.

📦 Install dependencies

Install the PnP React Controls and PnP JS libraries:

npm install @pnp/spfx-controls-react --save --save-exact
npm install @pnp/sp --save --save-exact

🧩 Configure the component

Create the state interface for your web part:

export interface ISpfxPnpDatetimepickerState {
  StartDateTime: Date;
  DueDate: Date;
  SuccessMessage: string;
}

💻 Implementation

Add the following render method to implement the DateTimePicker controls:

import * as React from 'react';
import styles from './SpfxPnpDatetimepicker.module.scss';
import { ISpfxPnpDatetimepickerProps } from './ISpfxPnpDatetimepickerProps';
import { ISpfxPnpDatetimepickerState } from './ISpfxPnpDatetimepickerState';
import { sp } from "@pnp/sp";
import { DateTimePicker, DateConvention, TimeConvention, TimeDisplayControlType } from '@pnp/spfx-controls-react/lib/dateTimePicker';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

export default class SpfxPnpDatetimepicker extends React.Component<ISpfxPnpDatetimepickerProps, ISpfxPnpDatetimepickerState> {
  constructor(props: ISpfxPnpDatetimepickerProps, state: ISpfxPnpDatetimepickerState) {
    super(props);
    sp.setup({
      spfxContext: this.props.context
    });
    this.state = {
      StartDateTime: null,
      DueDate: new Date(),
      SuccessMessage: ''
    }
    this._getValues();
  }

public render(): React.ReactElement<ISpfxPnpDatetimepickerProps> {
  return (
    <div className={styles.spfxPnpDatetimepicker}>
      {this.state.StartDateTime ?
        <div>
          <DateTimePicker label="Start date and time"
            dateConvention={DateConvention.DateTime}
            timeConvention={TimeConvention.Hours12}
            timeDisplayControlType={TimeDisplayControlType.Dropdown}
            formatDate={(date: Date) => date.toLocaleDateString()}
            showLabels={false}
            value={this.state.StartDateTime}
            onChange={(date: Date) => this.setState({ StartDateTime: date })}
          />
          <label className={styles.label}>Selected value: {this.state.StartDateTime.toString()}</label>
        </div>
        : null
      }
      <DateTimePicker label="Due date"
        dateConvention={DateConvention.Date}
        formatDate={(date: Date) => date.toLocaleDateString()}
        showLabels={false}
        value={this.state.DueDate}
        onChange={(date: Date) => this.setState({ DueDate: date })}
      />
      <label className={styles.label}>Selected value: {this.state.DueDate.toString()}</label>
      <br></br><br></br>
      <button className={styles.button} onClick={this.saveIntoSharePoint}>Save</button>
      <br></br>
      <br></br>
      <label className={styles.label}>{this.state.SuccessMessage}</label>
    </div>
  );
}

 private async _getValues() {
   const item: any = await sp.web.lists.getByTitle("ActionInfo").items.getById(1).get();
   this.setState({
     StartDateTime: new Date(item.StartDateTime),
     DueDate: new Date(item.DueDate)
   });
 }
 
 private async saveIntoSharePoint() {
   const updatedItem = await sp.web.lists.getByTitle("ActionInfo").items.getById(1).update({
     StartDateTime: this.state.StartDateTime,
     DueDate: this.state.DueDate
   });
   this.setState({ SuccessMessage: 'Successfully saved' });
 }

🚀 Deploy the solution

Build and package your SPFx solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file to your App Catalog, deploy it, and add the web part to your SharePoint site.

🧭 Summary

You’ve successfully implemented the PnP DateTimePicker in SPFx.
It provides an elegant way to select both date and time using dropdown-based controls.

📂 GitHub Source

View full SPFx project on GitHub:PnP DateTimePicker in the SharePoint Framework (SPFx) webpart

GitHub