המלצה | קומפוננטת תאריך עברי חדשה | React Hebrew DatePicker
-
שלום לכולם!
בניתי קומפוננטה חדשה שאני חושבת שתעזור לכם -
Hebrew DatePicker לReact!
️הבעיה שפתרתי:
מי מכם לא התחבט עם תאריכים עבריים באפליקציות?
רוב ה-date pickers מתמקדים רק בלוח הגרגוריאני,
ואנחנו נצרכים לממש פתרונות מסובכים.מה הקומפוננטה מציעה:
לוח עברי מלא עם המרה גרגורית אוטומטית
תמיכה מלאה ב-RTL וטקסט עברי
עיצוב מודרני וחלק
Controlled ו-Uncontrolled modes
TypeScript definitions
Portal support למודלים
נטיב לניידהתקנה פשוטה:
npm install react-hebrew-datepickerשימו לב:
מומלץ מאוד לייבא את קובץ ה-CSS אחרת הקומפוננטה תופיע כשחלק מהעיצוב חסר.import 'react-hebrew-datepicker/dist/styles.css'
שימוש בסיסי:
HebrewDatePicker> "name="hebrewDate "בחר תאריך עברי"=label onChange={(e) => console.log(e.target.value)} </היא עובדת מצוין עם טפסים, ואפשר להשתמש בה controlled או uncontrolled לפי הצורך.
NPM: https://www.npmjs.com/package/react-hebrew-datepicker
GitHub: https://github.com/Es-Mes/react-hebrew-datepickerאשמח לשמוע מה דעתכם וכמובן לקבל הצעות לשיפור!
-
שלום לכולם!
בניתי קומפוננטה חדשה שאני חושבת שתעזור לכם -
Hebrew DatePicker לReact!️הבעיה שפתרתי:
מי מכם לא התחבט עם תאריכים עבריים באפליקציות?
רוב ה-date pickers מתמקדים רק בלוח הגרגוריאני,
ואנחנו נצרכים לממש פתרונות מסובכים.מה הקומפוננטה מציעה:
לוח עברי מלא עם המרה גרגורית אוטומטית
תמיכה מלאה ב-RTL וטקסט עברי
עיצוב מודרני וחלק
Controlled ו-Uncontrolled modes
TypeScript definitions
Portal support למודלים
נטיב לניידהתקנה פשוטה:
npm install react-hebrew-datepickerשימו לב:
מומלץ מאוד לייבא את קובץ ה-CSS אחרת הקומפוננטה תופיע כשחלק מהעיצוב חסר.import 'react-hebrew-datepicker/dist/styles.css'
שימוש בסיסי:
HebrewDatePicker> "name="hebrewDate "בחר תאריך עברי"=label onChange={(e) => console.log(e.target.value)} </היא עובדת מצוין עם טפסים, ואפשר להשתמש בה controlled או uncontrolled לפי הצורך.
NPM: https://www.npmjs.com/package/react-hebrew-datepicker
GitHub: https://github.com/Es-Mes/react-hebrew-datepickerאשמח לשמוע מה דעתכם וכמובן לקבל הצעות לשיפור!
@Es-Mes
שלום,
העליתי גרסה חדשה עם דמו חי!!!
מוזמנים לראות -
https://es-mes.github.io/react-hebrew-datepicker/https://www.npmjs.com/package/react-hebrew-datepicker?activeTab=readme
-
שלום לכולם!
בניתי קומפוננטה חדשה שאני חושבת שתעזור לכם -
Hebrew DatePicker לReact!️הבעיה שפתרתי:
מי מכם לא התחבט עם תאריכים עבריים באפליקציות?
רוב ה-date pickers מתמקדים רק בלוח הגרגוריאני,
ואנחנו נצרכים לממש פתרונות מסובכים.מה הקומפוננטה מציעה:
לוח עברי מלא עם המרה גרגורית אוטומטית
תמיכה מלאה ב-RTL וטקסט עברי
עיצוב מודרני וחלק
Controlled ו-Uncontrolled modes
TypeScript definitions
Portal support למודלים
נטיב לניידהתקנה פשוטה:
npm install react-hebrew-datepickerשימו לב:
מומלץ מאוד לייבא את קובץ ה-CSS אחרת הקומפוננטה תופיע כשחלק מהעיצוב חסר.import 'react-hebrew-datepicker/dist/styles.css'
שימוש בסיסי:
HebrewDatePicker> "name="hebrewDate "בחר תאריך עברי"=label onChange={(e) => console.log(e.target.value)} </היא עובדת מצוין עם טפסים, ואפשר להשתמש בה controlled או uncontrolled לפי הצורך.
NPM: https://www.npmjs.com/package/react-hebrew-datepicker
GitHub: https://github.com/Es-Mes/react-hebrew-datepickerאשמח לשמוע מה דעתכם וכמובן לקבל הצעות לשיפור!
-
שלום לכולם!
בניתי קומפוננטה חדשה שאני חושבת שתעזור לכם -
Hebrew DatePicker לReact!️הבעיה שפתרתי:
מי מכם לא התחבט עם תאריכים עבריים באפליקציות?
רוב ה-date pickers מתמקדים רק בלוח הגרגוריאני,
ואנחנו נצרכים לממש פתרונות מסובכים.מה הקומפוננטה מציעה:
לוח עברי מלא עם המרה גרגורית אוטומטית
תמיכה מלאה ב-RTL וטקסט עברי
עיצוב מודרני וחלק
Controlled ו-Uncontrolled modes
TypeScript definitions
Portal support למודלים
נטיב לניידהתקנה פשוטה:
npm install react-hebrew-datepickerשימו לב:
מומלץ מאוד לייבא את קובץ ה-CSS אחרת הקומפוננטה תופיע כשחלק מהעיצוב חסר.import 'react-hebrew-datepicker/dist/styles.css'
שימוש בסיסי:
HebrewDatePicker> "name="hebrewDate "בחר תאריך עברי"=label onChange={(e) => console.log(e.target.value)} </היא עובדת מצוין עם טפסים, ואפשר להשתמש בה controlled או uncontrolled לפי הצורך.
NPM: https://www.npmjs.com/package/react-hebrew-datepicker
GitHub: https://github.com/Es-Mes/react-hebrew-datepickerאשמח לשמוע מה דעתכם וכמובן לקבל הצעות לשיפור!
-
@Es-Mes וואאווו לא ניסיתי עדיין אבל נשמע מרשים...
חיפשתי כזה דבר לפרוייקט בעבר ולא הסתדרתי עם הקיימים...
-
@2580 באמת ממש מוצלח, משתמש בזה ב"ה, ממליץ להוסיף גם בחירת טווח תאריכים...
שלום! נראה שהשיחה הזו מעניינת אותך, אבל עדיין אין לך חשבון.
נמאס לכם לגלול בין אותם הפוסטים בכל ביקור? כשנרשמים לחשבון, תמיד תחזרו בדיוק למקום שבו הייתם קודם, ותוכלו לבחור לקבל התראות על תגובות חדשות (בין אם במייל, ובין אם בהתראת פוש). תוכלו גם לשמור סימניות ולפרגן ב-upvote לפוסטים כדי להביע הערכה לחברי קהילה אחרים.
בעזרת התרומה שלך, הפוסט הזה יכול להיות אפילו טוב יותר 💗
הרשמה התחברות { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}