Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Feature Datepicker

Offen
  • Stimmt etwas nicht?
#27 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
50/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript
Bereich
frontend

Rechercherichtung

Beginne in der Komponente der Buchungstabelle und prüfe den im Issue verlinkten Leitfaden zur grundlegenden Verwendung von js-datepicker. Füge das Paket hinzu, gib den Check-in- und Check-out-Eingabefeldern unterschiedliche IDs und erstelle für jedes einen Picker. Erledigt ist es, wenn beim Klicken auf eines der beiden Eingabefelder ein Datepicker angezeigt wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

🏝️ 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?
Vorherrschende Sprache
JavaScript
Sterne
1
Forks
28
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Die Einrichtungsdateien dieses Projekts haben wir noch nicht geprüft. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus CodeYourFuture/React-Module-Project

Alle Issues in CodeYourFuture/React-Module-Project

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.