feat: add locale option for nepali language support (#12)

src/App.tsx

@@ -13,6 +13,9 @@ function App() {
           <div>Basic Nepali Date picker</div>
           <NepaliDatePicker name="date1" />
           <hr />
+          <div>Nepali Date picker (locale=ne)</div>
+          <NepaliDatePicker name="dateNe" locale="ne" />
+          <hr />
           <div>Input onDateSelect, value: {inputValue}</div>
           <NepaliDatePicker
             value={inputValue}

src/components/NepaliCalendar/NepaliCalendar.module.scss

@@ -35,7 +35,7 @@
 }
 
 .calendarCellCurrent {
-  color: #9325b1;
+  color: #2096f5;
   font-weight: bold;
 }
 

src/components/NepaliCalendar/NepaliCalendar.tsx

@@ -3,23 +3,35 @@ import NepaliDate from 'nepali-datetime'
 
 import YearSelector from '../core/YearSelector'
 import MonthSelector from '../core/MonthSelector'
-import { MAX_NEPALI_YEAR, MIN_NEPALI_YEAR, WEEK_DAYS_SHORT_EN } from '../../constants'
+import {
+  DEFAULT_LOCALE,
+  LOCALE_NE,
+  MAX_NEPALI_YEAR,
+  MIN_NEPALI_YEAR,
+  WEEKDAYS_SHORT_EN,
+  WEEKDAYS_SHORT_NE,
+} from '../../constants'
 import { getCalendarTableArray, ICalendarDate } from '../../utils/calendar'
 import classNames from '../../utils/classNames'
+import type { Locale } from '../../types'
 
 import styles from './NepaliCalendar.module.scss'
+import { nepaliNumber } from '../../utils/nepaliNumber'
 
 export interface INepaliCalendarProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   selectedNepaliDate?: NepaliDate | null
   onDateSelect?: ((nepaliDate: NepaliDate) => void) | null
+  locale?: Locale
 }
 
 const NepaliCalendar: React.FC<INepaliCalendarProps> = ({
   selectedNepaliDate,
   onDateSelect = null,
+  locale = DEFAULT_LOCALE,
 }) => {
   const now = new NepaliDate()
+  const weekDays = locale === LOCALE_NE ? WEEKDAYS_SHORT_NE : WEEKDAYS_SHORT_EN
 
   const [selectedYear, setSelectedYear] = useState(
     selectedNepaliDate?.getYear() ?? now.getYear()
@@ -97,10 +109,12 @@ const NepaliCalendar: React.FC<INepaliCalendarProps> = ({
           <YearSelector
             selectedYear={selectedYear}
             onChange={newYear => setSelectedYear(newYear)}
+            locale={locale}
           />
           <MonthSelector
             selectedMonth={selectedMonth}
             onChange={newMonth => setSelectedMonth(newMonth)}
+            locale={locale}
           />
         </div>
         <div className={`ndt-next ${styles.prevNext}`}>
@@ -126,12 +140,12 @@ const NepaliCalendar: React.FC<INepaliCalendarProps> = ({
       </div>
       <div className={`ndt-calendar-container ${styles.calendarContainer}`}>
         <div className={`ndt-calendar-grid ${styles.calendarGrid}`}>
-          {WEEK_DAYS_SHORT_EN.map(weekShortEn => (
+          {weekDays.map(weekShort => (
             <div
-              key={weekShortEn}
+              key={weekShort}
               className={classNames('ndt-calendar-header', styles.calendarCell)}
             >
-              {weekShortEn}
+              {weekShort}
             </div>
           ))}
         </div>
@@ -150,7 +164,9 @@ const NepaliCalendar: React.FC<INepaliCalendarProps> = ({
                 !calendarDate.active && styles.calendarCellInactive
               )}
             >
-              {calendarDate.date}
+              {calendarDate.date && locale === LOCALE_NE
+                ? nepaliNumber(calendarDate.date)
+                : calendarDate.date}
             </div>
           ))}
         </div>

src/components/NepaliDatePicker.tsx

@@ -3,20 +3,27 @@ import NepaliCalendar from './NepaliCalendar'
 import Popover from './core/Popover'
 import NepaliDate from 'nepali-datetime'
 import PickerInput from './core/PickerInput'
+import { DEFAULT_LOCALE, LOCALE_NE } from '../constants'
+import type { Locale } from '../types'
+import { englishNumber } from '../utils/nepaliNumber'
 
 interface INepaliDatePickerProps extends React.InputHTMLAttributes<HTMLInputElement> {
   value?: string
   format?: string
   inputElement?: ReactElement | null
+  locale?: Locale
   onDateSelect?: ((value: string) => void) | null
 }
 
 const getNepaliDateOrNull = (
   nepaliDateStr: string,
-  format: string
+  format: string,
+  locale: Locale
 ): NepaliDate | null => {
+  const value = locale === LOCALE_NE ? englishNumber(nepaliDateStr) : nepaliDateStr
+
   try {
-    return new NepaliDate(nepaliDateStr, format)
+    return new NepaliDate(value, format)
   } catch {
     return null
   }
@@ -27,6 +34,7 @@ const NepaliDatePicker: React.FC<INepaliDatePickerProps> = ({
   format = 'YYYY-MM-DD',
   inputElement = null,
   onDateSelect = null,
+  locale = DEFAULT_LOCALE,
   ...rest
 }) => {
   const [isPopoverVisible, setIsPopoverVisible] = useState(false)
@@ -46,7 +54,9 @@ const NepaliDatePicker: React.FC<INepaliDatePickerProps> = ({
   }
 
   const handleSetDate = (nepaliDate: NepaliDate) => {
-    setDateValue(nepaliDate.format(format))
+    const inputValue =
+      locale === LOCALE_NE ? nepaliDate.formatNepali(format) : nepaliDate.format(format)
+    setDateValue(inputValue)
     setIsPopoverVisible(false)
   }
 
@@ -61,7 +71,8 @@ const NepaliDatePicker: React.FC<INepaliDatePickerProps> = ({
       onOpenChange={newOpen => setIsPopoverVisible(newOpen)}
       content={
         <NepaliCalendar
-          selectedNepaliDate={getNepaliDateOrNull(inputValue, format)}
+          locale={locale}
+          selectedNepaliDate={getNepaliDateOrNull(inputValue, format, locale)}
           onDateSelect={handleSetDate}
         />
       }

src/components/core/MonthSelector.tsx

@@ -1,19 +1,30 @@
-import { NEPALI_MONTHS_EN } from '../../constants'
+import {
+  DEFAULT_LOCALE,
+  LOCALE_NE,
+  NEPALI_MONTHS_EN,
+  NEPALI_MONTHS_NE,
+} from '../../constants'
+import { Locale } from '../../types'
 
 interface IMonthSelectionProps {
   selectedMonth: number
   onChange?: (newMonth: number) => void
+  locale?: Locale
 }
 
+const getNepaliMonths = (locale: Locale) =>
+  locale === LOCALE_NE ? NEPALI_MONTHS_NE : NEPALI_MONTHS_EN
+
 const MonthSelector: React.FC<IMonthSelectionProps> = ({
   selectedMonth,
   onChange: onMonthChange,
+  locale = DEFAULT_LOCALE,
 }) => (
   <select
     value={selectedMonth}
     onChange={e => onMonthChange && onMonthChange(Number(e.target.value))}
   >
-    {NEPALI_MONTHS_EN.map((month, month0) => (
+    {getNepaliMonths(locale).map((month, month0) => (
       <option key={month} value={month0}>
         {month}
       </option>

src/components/core/YearSelector.tsx

@@ -1,4 +1,11 @@
-import { MAX_NEPALI_YEAR, MIN_NEPALI_YEAR } from '../../constants'
+import {
+  DEFAULT_LOCALE,
+  LOCALE_NE,
+  MAX_NEPALI_YEAR,
+  MIN_NEPALI_YEAR,
+} from '../../constants'
+import { Locale } from '../../types'
+import { nepaliNumber } from '../../utils/nepaliNumber'
 
 const YEARS = Array.from(
   { length: MAX_NEPALI_YEAR - MIN_NEPALI_YEAR + 1 },
@@ -8,19 +15,21 @@ const YEARS = Array.from(
 interface IYearSelectionProps {
   selectedYear: number
   onChange?: (newYear: number) => void
+  locale?: Locale
 }
 
 const YearSelector: React.FC<IYearSelectionProps> = ({
   selectedYear,
   onChange: onYearChange,
+  locale = DEFAULT_LOCALE,
 }) => (
   <select
     value={selectedYear}
     onChange={e => onYearChange && onYearChange(Number(e.target.value))}
   >
     {YEARS.map(year => (
       <option key={year} value={year}>
-        {year}
+        {locale === LOCALE_NE ? nepaliNumber(year) : year}
       </option>
     ))}
   </select>

src/constants.ts

@@ -1,5 +1,11 @@
 import dateConverter from 'nepali-datetime/dateConverter'
 
+export const NEPALI_NUMBERS = ['०', '१', '२', '३', '४', '५', '६', '७', '८', '९']
+
+export const LOCALE_EN = 'en'
+export const LOCALE_NE = 'ne'
+export const DEFAULT_LOCALE = LOCALE_EN
+
 export const MIN_NEPALI_YEAR = dateConverter.npMinYear()
 export const MAX_NEPALI_YEAR = dateConverter.npMaxYear()
 
@@ -123,4 +129,20 @@ export const NEPALI_MONTHS_EN = [
   'Chaitra',
 ]
 
-export const WEEK_DAYS_SHORT_EN = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+export const NEPALI_MONTHS_NE = [
+  'बैशाख',
+  'जेठ',
+  'असार',
+  'श्रावण',
+  'भाद्र',
+  'आश्विन',
+  'कार्तिक',
+  'मंसिर',
+  'पौष',
+  'माघ',
+  'फाल्गुण',
+  'चैत्र',
+]
+
+export const WEEKDAYS_SHORT_EN = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+export const WEEKDAYS_SHORT_NE = ['आइत', 'सोम', 'मंगल', 'बुध', 'बिहि', 'शुक्र', 'शनि']

src/types.ts

@@ -0,0 +1,3 @@
+import { LOCALE_EN, LOCALE_NE } from './constants'
+
+export type Locale = typeof LOCALE_EN | typeof LOCALE_NE

src/utils/nepaliNumber.ts

@@ -0,0 +1,17 @@
+import { NEPALI_NUMBERS } from '../constants'
+
+export const nepaliNumber = (num: number | string) => {
+  return num
+    .toString()
+    .split('')
+    .map(digit => (!isNaN(Number(digit)) ? NEPALI_NUMBERS[Number(digit)] : digit))
+    .join('')
+}
+
+export const englishNumber = (num: number | string) => {
+  return num
+    .toString()
+    .split('')
+    .map(char => (NEPALI_NUMBERS.includes(char) ? NEPALI_NUMBERS.indexOf(char) : char))
+    .join('')
+}