Add Datepicker Component (pc.datepicker)

[Alek99]

This would be a good first issue for someone as seen in our docs someone can wrap a datepicker.

For an intro on how to add a component see our docs: https://pynecone.io/docs/advanced-guide/wrapping-react.

The specs for this component would depend on the data picker library wrapped, or we could event use the base html datepicker.

[qu3vipon]

I did some research and couldn't complete this work, but here is a summary of my research.
Let me first reveal that I am not familiar with ReactJS.

1. There are two different libraries: react-date-picker and react-datepicker

   • I can't tell which one is better.
   • Both of them have a little problem when importing to pynecone.
     • react-date-picker has some conflicts when used with next.js.
       • So I had to replace import statements like below.

         // index.js
         import DatePicker from "react-date-picker/dist/entry.nostyle"
         import "react-date-picker/dist/DatePicker.css"
         import "react-calendar/dist/Calendar.css"

       • Ref: Global CSS cannot be imported from within node_modules. Read more: https://err.sh/next.js/css-npm Location: node_modules\react-date-picker\dist\entry.js wojtekmaj/react-date-picker#340)
     • react-datepicker also had to manually change index.js

       // removed {}
       import DatePicker from "react-datepicker"

2. I choose react-datepicker because its documentation is more detailed. Here is my code.

   class DatePicker(Component):
       library = "react-datepicker"
       tag = "DatePicker"  
     
       value: Var[str]  
       placeholder_text: Var[str]
   
       # date_format: Var[str]
       # time_format: Var[str]
       # locale: Var[str]
     
       @classmethod  
       def get_controlled_triggers(cls) -> Set[str]:  
           return {"on_change", "on_select"}  
     
       def _get_imports(self) -> ImportDict:  
           return utils.merge_imports(  
               super()._get_imports(), {"": {"react-datepicker/dist/react-datepicker.css"}},  
           )
   
   class State(pc.State): 
       date: str = ""  
     
   def index():  
       return pc.center(  
           pc.date_picker(  
               value=State.date,  
               on_change=State.set_date,  
               placeholder_text="Select a date..",  
           )  
       )

3. After I compiled the app, it was rendered nicely. But when I selected a date, the value returned by the callback function was a string in iso format (i.e. 2023-01-01T00:00:00Z). I tried to format this string with the props the library provides, but every formatting prop didn't work.

Hope that it helps.

[FHU-yezi]

Can we use datetime.fromisoformat to deal with this in Python side?

[qu3vipon]

@FHU-yezi Yes, we can. But I'm not sure if we should start manipulating data types on the python side.
I hope there will be a better way of using the ReactJS library itself.

[iron3oxide]

This thread may also be useful