Designing a Date Picker Component for Chakra UI

Поделиться
HTML-код
  • Опубликовано: 4 фев 2025

Комментарии • 30

  • @uxrkhan
    @uxrkhan 4 месяца назад

    Just saw the work file on figma community, seems like month selection is missing when the year was there!

  • @Letrasdesordenadas
    @Letrasdesordenadas 3 года назад

    I just leave a comment on other video but you rock mate! Thanks for sharing this ⚡

  • @mdr8263
    @mdr8263 2 года назад +2

    Thanks a lot for a such cool video.
    But I have a question: how to prototype date components in a way that will allow me to pick one day then click on another and the previous will not be active anymore? I have to turn each day in radio button?
    Hope that makes sense😄

  • @EsakkiKrishnan2410
    @EsakkiKrishnan2410 3 года назад

    Great walkthrough of your process loved it

    • @JaviAlaves
      @JaviAlaves  3 года назад

      Thank you, I'm glad it was helpful!

  • @rashmir5731
    @rashmir5731 Год назад

    Needed more info on the interactive components setup

  • @goodnewsarchibong8557
    @goodnewsarchibong8557 2 года назад

    You're a life saver thanks 🙌🙌❤

  • @vinhthekid_mt
    @vinhthekid_mt Год назад

    would you know how to make an event calendar?

  • @mpm5629
    @mpm5629 2 года назад

    Hi Javier, thank you for the tutorial. Do you have one where you share how to animate the calendar? (next step)?
    Thank you

    • @Lifeinaframebystereout
      @Lifeinaframebystereout Год назад

      yep, like this is great, but the actual big deal is how to actually set up the prototype 😅

  • @pjonesg
    @pjonesg 2 года назад

    Can you share that design spec doc, please?

  • @esequielalbornoz5271
    @esequielalbornoz5271 3 года назад

    I'm not a designer and yet loved your video man, really sick.
    Is there anyone working on implementing this feature?

    • @JaviAlaves
      @JaviAlaves  2 года назад +1

      Thanks Esequiel, I appreciate it! You mean whether this component will make it in Chakra UI? Not that I'm aware of, but they're working on a bunch of other amazing things at the moment.

  • @AlexanderMacedo1892
    @AlexanderMacedo1892 3 года назад

    great content!

    • @JaviAlaves
      @JaviAlaves  3 года назад

      Thank you, I appreciate it!

  • @tanyyanac7398
    @tanyyanac7398 2 года назад

    Thanks!

  • @abhiarya9084
    @abhiarya9084 2 года назад

    Love it

  • @irfanali-cr6up
    @irfanali-cr6up 3 года назад

    Did you work on multiple overlays ? I am facing an issue.

    • @JaviAlaves
      @JaviAlaves  3 года назад

      Where did you get stuck specifically?

    • @irfanali-cr6up
      @irfanali-cr6up 3 года назад

      ​@@JaviAlaves I am working on a prototype that include multiple overlays. I want to show first overlay and then the second overlay. First overlay still appears behind the second overlay. I need to hide first overlay.
      Thanks for advance.

    • @JaviAlaves
      @JaviAlaves  3 года назад +1

      @@irfanali-cr6up Could you send me a screen capture of what you're working on, or a share a Figma file with me? Feel free to direct message me on Twitter and I'll be happy to help you - twitter.com/javalaves

  • @oussamasethoum2755
    @oussamasethoum2755 3 года назад

    Great thank you, please can you share the design file of the component ?

    • @JaviAlaves
      @JaviAlaves  3 года назад +2

      Yes! It’s available in my Figma Community profile at figma.com/@javi

    • @oussamasethoum2755
      @oussamasethoum2755 3 года назад

      @@JaviAlaves Thank you very much ❤

  • @hichamabboud9672
    @hichamabboud9672 2 года назад

    How do i get the code please?

    • @JaviAlaves
      @JaviAlaves  2 года назад

      This component hasn't been coded by the Chakra UI team, but you can make a request on their GitHub repos :)

  • @florianvo7616
    @florianvo7616 2 года назад +2

    ehhhhhhhhhhhm I expected to see it get implemented in code.... Preferably with @chakra-ui/react. How is this design "for Chakra UI"? its just a Figma design, it leaves the implementation open. I am very disappointed tbh, 30 min wasted. The video title is missleading, if it said "how to create datepicker Figma design" I wouldn't have watched.

    • @florianvo7616
      @florianvo7616 2 года назад

      The interesting / hard part about creating a custom datepicker is not the design. As a beginner I can tell you that its the component choice within a new library that makes the implementation hard. If I just use for everything its fairly easy to style them and get my expected Result. The hard choice is to decide if you wanna use for example an input field with a table or a grid or just , , ..... There are so many different ways to implement the design you have created with Chakra UI and thats whats overwhelming for beginners. Let's be real everyone knows how a datepicker should look.... Even for creating a simple Form there are like 20+ ways to create it within chakra-ui. Choosing one that makes sense is what makes it hard!

  • @zoharmoyal
    @zoharmoyal 2 года назад

    when i downloaded my date picker, it gave me a blanked Art Board with nothing in it. how can i solve that problem ? @javier alves

  • @BonClyful
    @BonClyful 2 года назад

    How do you add the fonts and colours to your library? I’m new to Figma 🫣