Skip to content

meir-gazit/React-Hebrew-DatePicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


React-Hebrew-DatePicke
Logo
You can customize React-Hebrew-DatePicker to (almost) any language
React-Hebrew-DatePicke

As well known, react-dates library provides an easily internationalizable datepicker. You can customize some parts from the UI, and a lot more if you put your fingers under the hood. The react-dates library documentation exposes and explains some parts of the code functionality. In the last project I've worked on I had to use and twick it so the UI will be in Hebrew, a RTL language, so before I started I was googling on "change language of the react datepicker". However, I couldn't find a working example to bootstrap, so now after I've finished it, I thought that maybe someone could use it. Please read carefully the following, including the important note at the end. you can see a live demo on my code-sand-box.

I'm encouraging you to explore the react-dates and the moment folders in order to get familiar with the code and styling - you can find some more things that you want to update.

There are some parts of the code you have to change in order to customize the datepicker to your language.

The first one lays in "[your project]/node_modules/react-dates/lib/components/DateRangePicker.js" (I needed the date-range-picker but I think you can tweak other pickers in this folder) that's on lines 71/72 there are 2 variables varNames: startDatePlaceholderText, endDatePlaceholderText that will display in the input placeholder text, on the same file you can define the direction rtl or ltr its on line 111 varName: isRTL - true/false.

Second is the interface settings part in the "[your project]/node_modules/react-dates/lib/defaultPhrases.js", this file contain the datepicker shortcuts - when you click on the question mark at the bottom right corner of the gui the help window will appear, this file holds the help text - change the file to your language.

The react-dates relay on the moment library as its date format, that's mean you have to update some settings in it and you do it from your code, it's on the top of DatePicker.js file in the project's root, there you have to change date and time to your needed language. this part of code is taken from moment file "[your project]/node_modules/moment/min/locales.js".

⚠️ ⚠️

The code in this repository is provided with no guarantee, so you can do with it anything you want, at your own risk. It is most advised to test it in a debug env. before taking it to a production website.

after cloning the repo just run npm install or yarn add .

npm
yarn
github
example - react-dates on airbnb story
embrace yourself
google search results



Releases

No releases published

Packages

No packages published