0

how do we include a date picker to the Form, I didnt find date picker is there a way to extend with custom components.

the component library link

umgolla
  • 39
  • 8

1 Answers1

0

You can use Datepicker in Fluent UI. Attaching a code snippet of the same.

 import { Datepicker } from '@fluentui/react-northstar'
import React from 'react'

const DatepickerExample = () => <Datepicker />

export default DatepickerExample
Meghana-MSFT
  • 595
  • 3
  • 7
  • it is about the Form from the @fluent/react-teams. how to include the date picker to the Form – umgolla Feb 26 '22 at 12:35
  • Above mentioned date picker is a component and can be placed anywhere. Can you please share a screenshot of the form where you want to include date picker? – Meghana-MSFT Feb 28 '22 at 17:45
  • i want to include in the Form Component of the @fluent/react-teams. it is json payload to which i need to include the date picker – umgolla Mar 01 '22 at 06:15
  • here is the playground for the ui https://dev-int.teams.microsoft.com/storybook/main/index.html?path=/story/ui-templates-forms--kitchen-sink – umgolla Mar 01 '22 at 06:35
  • Could you please let us know how you are integrating below code in Fluent UI app. https://i.stack.imgur.com/NorZ3.png – Meghana-MSFT Mar 01 '22 at 13:28
  • https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-ui-templates/ts/src this example – umgolla Mar 01 '22 at 14:25
  • We are setting up this sample and get back to you. – Meghana-MSFT Mar 03 '22 at 14:48
  • any updates on the sample? can we inject any custom component in to it other that nortstar components to the json ? – umgolla Mar 06 '22 at 15:59
  • We are checking this internally. Will update you. – Meghana-MSFT Mar 09 '22 at 11:28
  • We have setup the above sample and added a form along with Datepicker to it. This is the code we have added in the welcome.tsx file.
    Attaching a screenshot of the same - https://i.stack.imgur.com/oKAUY.png Please note that form component cannot be added to JSON.     – Meghana-MSFT Mar 11 '22 at 18:17
  • it is not about adding the [NorthStar Form ] Form as JSON to @fluent/react-teams, in @fluent/react-teams we have a Form which takes json as input it currently accepts only input ,text area, dropdown and checkbox but not Date Picker. the example you seems to be a nortstar Form embedded in Welcom.tsx, my query was about passing an datepicker as a part of the "IFormProps" – umgolla Mar 12 '22 at 12:09
  • It is not possible to add date picker to a JSON. – Meghana-MSFT Mar 14 '22 at 07:50