Date Range Picker in SPFx

This article explains how to use the React Date Range Picker component inside a SharePoint Framework (SPFx) web part.
This control provides an intuitive way for users to select start and end dates, and store them in a SharePoint list using PnP JS.

⚙️ Install Dependencies

Install the required packages:

npm install @pnp/sp --save
npm install react-date-range --save

🧩 Configure the Context

In your main web part file, add:

sp.setup({ spfxContext: this.props.context });

🧠 Define the State Interface

Create a new file ISpfxReactDaterangepickerState.ts and add:

export interface ISpfxReactDaterangepickerState {
  startDate: Date | null;
  endDate: Date | null;
  selectionRange: any;
}

🪄 Implement the React Component

Below is the complete code for your date range picker web part:

import * as React from 'react';
import styles from './SpfxReactDaterangepicker.module.scss';
import { ISpfxReactDaterangepickerProps } from './ISpfxReactDaterangepickerProps';
import { ISpfxReactDaterangepickerState } from './ISpfxReactDaterangepickerState';
import { DateRangePicker } from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';
import { PrimaryButton } from 'office-ui-fabric-react';
import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

export default class SpfxReactDaterangepicker extends React.Component<ISpfxReactDaterangepickerProps, ISpfxReactDaterangepickerState> {
  constructor(props: ISpfxReactDaterangepickerProps) {
    super(props);
    this.state = {
      startDate: new Date(),
      endDate: new Date(),
      selectionRange: {
        startDate: new Date(),
        endDate: new Date(),
        key: 'selection'
      }
    };
  }

  private async _getValuesFromSP() {
    const list = sp.web.lists.getByTitle("DateRangeList");
    const item = await list.items.getById(1).get();
    this.setState({
      startDate: new Date(item.StartDate),
      endDate: new Date(item.EndDate),
      selectionRange: {
        startDate: new Date(item.StartDate),
        endDate: new Date(item.EndDate),
        key: 'selection'
      }
    });
  }

  private async _saveToSP() {
    const list = sp.web.lists.getByTitle("DateRangeList");
    await list.items.getById(1).update({
      StartDate: this.state.startDate,
      EndDate: this.state.endDate
    });
  }

  public render(): React.ReactElement<ISpfxReactDaterangepickerProps> {
    return (
      <div className={styles.spfxReactDaterangepicker}>
        <h3>Select a Date Range</h3>
        <DateRangePicker
          ranges={[this.state.selectionRange]}
          onChange={(ranges) => this.setState({
            startDate: ranges.selection.startDate,
            endDate: ranges.selection.endDate,
            selectionRange: ranges.selection
          })}
        />
        <PrimaryButton
          text="Save"
          onClick={() => this._saveToSP()}
          style={{ marginTop: 20 }}
        />
      </div>
    );
  }
}

🗂 Create SharePoint List

Create a SharePoint list named DateRangeList with the following columns:

Title (Single line of text)
StartDate (Date and Time)
EndDate (Date and Time)

🚀 Build and Deploy the Solution

To build and package the web part, run:

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

Upload the .sppkg file from the sharepoint/solution folder to your App Catalog.
Deploy and add the web part to any modern page.

📂 GitHub Sample Project

View full SPFx project on GitHub:Date Range Picker in SPFx

GitHub

✅ Summary

This example demonstrates how to integrate the React Date Range Picker component into SharePoint using SPFx.
You can easily extend this by adding validation, date restrictions, or custom formatting to fit enterprise needs.