DatePicker Controls of SPFx is not working

Copper Contributor


I am using the SPFx framework. I have used a calendar control and added custom code to it. This works properly in the local dev environment , but not working once it is deployed to the SharePoint site.

Below is the code used : 


import * as React from 'react';
import { DateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-controls-react/lib/DateTimePicker';
import { DatePicker } from 'office-ui-fabric-react';

export interface IDatePickerTestProps {}
export interface DatePickerTeststate {
export default class DatePicketText extends React.Component<IDatePickerTestProps> {
public render(): React.ReactElement<any> {
return (
        <DateTimePicker label="DateTime Picker" dateConvention={DateConvention.DateTime}/>
        <DatePicker label='Date advised:' placeholder="Select a date..."  />                       


The issue is that the UI is kind of distorted. If I select 17 Oct, then previous date is getting loaded. The UI is looking like this :



How to fix this ?

1 Reply

I Am facing similar issue. Solution to this is much appriciated.