Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Feature Datepicker

Ouverte
  • Quelque chose ne va pas ?
#27 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
50/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
javascript
Domaine
frontend

Piste de recherche

Commencez dans le composant du tableau de réservation et consultez le guide d’utilisation de base de js-datepicker lié dans l’issue. Ajoutez le package, donnez des IDs distincts aux champs de saisie d’arrivée et de départ, et créez un picker pour chacun. C’est terminé lorsqu’un sélecteur de date apparaît quand l’un ou l’autre des champs de saisie est sélectionné.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

🏝️ 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?
Langage dominant
JavaScript
Étoiles
1
Forks
28
Aucune PR mergée en 30 j

Préparer son environnement

Nous n'avons pas encore vérifié les fichiers d'installation de ce projet. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de CodeYourFuture/React-Module-Project

Toutes les issues de CodeYourFuture/React-Module-Project

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.