Nepali Datepicker

Nepali Datepicker is a pure javascript plugin that allows us to select date from an interactive calendar. The datepicker can be tied to any standard input field, and shows the calendar on focus. The datepicker is hidden after you select the desired date or when focused out of the input.

You can test out the code, and generate javascript code snippets here:

View Demo

You can download the file here:

Overview:

  • Light weight
  • Free to use
  • No database required
  • BS date range from 2000 to 2099
  • AD date range from 1944 to 2043

How to install:

  • Include nepali.datepicker.v4.0.1.min.js
/* Use online reference */
<script src="https://nepalidatepicker.sajanmaharjan.com.np/nepali.datepicker/js/nepali.datepicker.v4.0.1.min.js" type="text/javascript"></script>
 
/* or local */
<script src="/path/to/local/nepali.datepicker.min.js" type="text/javascript"></script>
  • Include nepali.datepicker.v4.0.1.min.css
/* Use online reference */
<link href="https://nepalidatepicker.sajanmaharjan.com.np/nepali.datepicker/css/nepali.datepicker.v4.0.1.min.css" rel="stylesheet" type="text/css"/>
 
/* or local */
<link href="/path/to/local/nepali.datepicker.min.css" rel="stylesheet" type="text/css"/>
  • Initialize the nepali datepicker
/* Select your element */
var mainInput = document.getElementById("nepali-datepicker");
 
/* Initialize Datepicker with options */
mainInput.nepaliDatePicker();

Usage:

<html lang="en">
    <head>
        <title>Nepali Datepicker v3</title>
        <meta http-equiv="x-ua-compatible" content="ie=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <!-- Nepali Datepicker -->
        <link href="https://nepalidatepicker.sajanmaharjan.com.np/nepali.datepicker/css/nepali.datepicker.v4.0.1.min.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <p>
            <input type="text" id="nepali-datepicker" placeholder="Select Nepali Date"/>
        </p>
 
        <script src="https://nepalidatepicker.sajanmaharjan.com.np/nepali.datepicker/js/nepali.datepicker.v4.0.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            window.onload = function() {
                var mainInput = document.getElementById("nepali-datepicker");
                mainInput.nepaliDatePicker();
            };
        </script>
    </body>
</html>

Bonus - Nepali Date Functions

The nepali.datepicker is built upon nepali.functions, so all the functions available under the nepali.functions are available to use after you include the nepali.datepicker javascript file.

Availabe NepaliFunctions (View the full documentation)

  • ConvertToDateObject: Convert date string to object
  • ConvertDateFormat: Convert date object to string
  • AD2BS: Convert AD to BS
  • BS2AD: Convert BS to AD
  • ValidateBsDate: Validate if the given BS date is valid
  • GetCurrentAdDate: Gets the Current AD Date
  • GetCurrentAdYear: Gets the Current AD Year
  • GetCurrentAdMonth: Gets the Current AD Month
  • GetCurrentAdDay: Gets the Current AD Day
  • GetCurrentBsDate: Gets the Current BS Date
  • GetCurrentBsYear: Gets the Current BS Year
  • GetCurrentBsMonth: Get the Current BS Month
  • GetCurrentBsDay: Gets the Current BS Day
  • GetAdMonths: Get AD Month List
  • GetAdMonth: Get AD Month
  • GetBsMonths: Get BS Month List
  • GetBsMonth: Get BS Month
  • GetBsDays: Get BS Day List
  • GetBsDay: Get BS Day
  • GetBsDaysUnicodeShort: Get BS Day List in Short
  • GetAdDays: Get AD Day List
  • GetAdDay: Get AD Day
  • GetBsMonthsInUnicode: Get BS Month List In Nepali
  • GetBsMonthInUnicode: Get BS Month In Nepali
  • GetDaysInAdMonth: Get Days in the given AD Month
  • GetDaysInBsMonth: Get Days in the given BS Month
  • AdDatesDiff: Difference between two AD dates
  • BsDatesDiff: Difference between two BS dates
  • BsAddDays: Add days to given BS date
  • GetBsFullDate: Get full BS date
  • GetAdFullDate: Get full AD date
  • GetAdFullDay: Get Full AD day

Example:

<script src="https://nepalidatepicker.sajanmaharjan.com.np/nepali.datepicker/js/nepali.datepicker.v4.0.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    console.log(NepaliFunctions.GetCurrentBsDate());
</script>

Datepicker Options

Option NameTypeDescription
ndpTriggerButtonbooleanAccepts true or false.
Specify if you want to add a physical button after the datepicker.
ndpTriggerButtonClassstringAccepts any string.
Specify the class name(s) you want to add to the buton.
ndpTriggerButtonTextstringAccepts any string.
Specify the text that will appear on the button.
ndpEnglishInputstringAccepts any string.
Specify the id of the input element that will receive the english date after the Nepali Date Picker selection.
ndpYearCountnumberAccepts any number.
Specify the number of items to display on the Nepali Year selection.
ndpYearbooleanAccepts true or false.
Speficy if you want to show the nepali year selection.
ndpMonthbooleanAccepts true or false.
Speficy if you want to show the nepali month selection.
disableDaysBeforenumberAccepts any number.
Specify the number of days you want to disable before the current date.
disableDaysAfternumberAccepts any number.
Specify the number of days you want to disable after the current date.
disableBeforedateAccepts any date.
Specify the start date the users will be able to choose from.
disableAfterdateAccepts any date.
Specify the end date the users will be able to choose till.
dateFormatstringAccepts the given format.
YYYY-MM-DD, MM-DD-YYYY, YYYY/MM/DD, MM/DD/YYYY.
onChangefunctionAccepts a function.
Specify the function that will be called after the date selection.
unicodeDatebooleanAccepts true or false.
Specify if you want to show the date selection as unicode date.
readOnlyInputbooleanAccepts true or false.
Specify if the input is read only.
containerstringAppends the nepali datepicker to a specific element; eg: container: '#picker-container' (will default to "body")

You can test out the code, and generate javascript code snippets here:

View Demo

You can download the file here:

Comments

comments