Im trying to implement a DatePicker in a teams App

Question

Hi I'm creating a Teams App and im having trouble implementing a DatePicker in one of my screen. My basic test screen:

import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function TestScreen() {
    let [selectedDate, setSelectedDate] = useState("");    
    
    return(
            <div>
                <h1>TEST SCREEN</h1>
                <div>
                    <DatePicker 
                    selected={selectedDate}
                    onChange={date => setSelectedDate(date)}
                    />
                </div>
            </div>            
        )
}

the tab component:

import React from "react";
// https://fluentsite.z22.web.core.windows.net/quick-start
import { Provider, teamsTheme } from "@fluentui/react-northstar";
import { HashRouter as Router, Redirect, Route } from "react-router-dom";
import Tab from "./Tab";
import "./App.css";
import { useTeams } from "@microsoft/teamsfx-react";
import "bootstrap/dist/css/bootstrap.min.css"
import TestScreen from "./screens/test";

export default function App() {
  const { theme } = useTeams({})[0];
  return (
    <Provider theme={theme || teamsTheme} styles={{ backgroundColor: "#eeeeee" }}>
      <Router>
          <TestScreen />
      </Router>
    </Provider>
  );
}

[The error I get][1] [1]: https://i.stack.imgur.com/Sc7cX.png

score 1 · Answer 1 · answered Nov 16 '22 at 11:09

1

For those wondering, I fixed my issue replacing the by a simple . Not the solution i wanted to use at first but at least it's working fine. Might be a compatibility issue between Teams toolkit, React and some packages..

answered Nov 16 '22 at 11:09

F4L4X

17
5

arp · Answer 2 · 2022-11-15T17:14:32.180

0

I see you haven't imported useState in your file. Also add current date as the default value of the selectedDate state. Try this

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function TestScreen() {
  let [selectedDate, setSelectedDate] = useState(new Date());    

  return(
        <div>
            <h1>TEST SCREEN</h1>
            <div>
                <DatePicker 
                selected={selectedDate}
                onChange={date => setSelectedDate(date)}
                />
            </div>
        </div>            
    )
}

In case you're still not able to use it check if you're using an older version of react. Since hooks are supported in React 16.8.0 or higher.

edited Nov 15 '22 at 17:14

answered Nov 15 '22 at 15:40

arp

331
4
11

my bad I was importing it earlier but now I tested it again and it's still not working. I tried the recommended version of React for Teams App which is v16.14, I even tried with v18.2 – F4L4X Nov 15 '22 at 15:46
Add default value of current date to the selectedDate state – arp Nov 15 '22 at 17:09
unfortunately it's still not working... – F4L4X Nov 16 '22 at 09:49

Im trying to implement a DatePicker in a teams App

2 Answers2