Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Feature Datepicker

Aperta
#27 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
50/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript
Ambito
frontend

Direzione di ricerca

Inizia dal componente della tabella delle prenotazioni e consulta la guida all’uso di base di js-datepicker collegata nell’issue. Aggiungi il package, assegna ID distinti agli input di check-in e check-out e crea un picker per ciascuno. Il lavoro è completato quando, facendo clic su uno dei due input, viene visualizzato un selettore di date.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

🏝️ Priority Stretch 📅 Week 4 🦑 Size Large 🧩 Feature
28. Date picker

Instructions: Add the js-datepicker package to your project using npm install, and import it at the top of your booking table component. Add different IDs to your 'check in date' and 'check out date' <input> elements, then create two date pickers using const checkInPicker = datepicker(YOUR_ID) (where YOUR_ID is the ID you assigned to your check in/check out date elements).

Hint: Read the js-datepicker usage guide

Test:

The date picker appears when you click on the 'check in date' and 'check out date' input elements.

Reflection:

Using js-datepicker in this exercise allows you to practice installing and working with packages in JavaScript.

Packages contain new functions and properties to work with that may not be available in native JavaScript/HTML. Using packages can often save time instead of writing your own functions, as you are importing code that someone else has written. However, this can have downsides:

  • not all packages are high quality
  • some may have bugs or may reduce accessibility by recreating native elements

(js-datepicker recreates HTML's native datepicker element)

Think about some of the code you have written in this project. Are there any packages available that might have helped you to complete the features?

For example, #26 used validation. Searching npmjs.com for 'validate' shows multiple packages, such as 'validator' and 'Validate'.

Open both of these packages in your browser, and consider the following questions:

  • Is it clear what this package does? Will it solve my specific problem better than writing my own code?
  • Do I trust that the code in this package is safe to run on my machine? Do other people trust this package? (Hint: look at weekly downloads, last update, dependents, and visit the repository)
  • Is this package accessible? Will it work on all browsers?
  • If I decide to use this package and it breaks, will I know how to fix it or replace it?
Lingua principale
JavaScript
Stelle
1
Fork
28
Nessuna PR unita negli ultimi 30g

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di CodeYourFuture/React-Module-Project

Tutte le issue di CodeYourFuture/React-Module-Project

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.