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 DemoYou can download the file here:
/* Use online reference */
<script src="https://nepalidatepicker.sajanmaharjan.com.np/nepali.datepicker/js/nepali.datepicker.v4.0.4.min.js" type="text/javascript"></script>
/* or local */
<script src="/path/to/local/nepali.datepicker.min.js" type="text/javascript"></script>
/* Use online reference */
<link href="https://nepalidatepicker.sajanmaharjan.com.np/nepali.datepicker/css/nepali.datepicker.v4.0.4.min.css" rel="stylesheet" type="text/css"/>
/* or local */
<link href="/path/to/local/nepali.datepicker.min.css" rel="stylesheet" type="text/css"/>
/* Select your element */
var mainInput = document.getElementById("nepali-datepicker");
/* Initialize Datepicker with options */
mainInput.nepaliDatePicker();
<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.4.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.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
var mainInput = document.getElementById("nepali-datepicker");
mainInput.nepaliDatePicker();
};
</script>
</body>
</html>
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)
<script src="https://nepalidatepicker.sajanmaharjan.com.np/nepali.datepicker/js/nepali.datepicker.v4.0.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
console.log(NepaliFunctions.GetCurrentBsDate());
</script>
Option Name | Type | Description |
---|---|---|
ndpTriggerButton | boolean | Accepts true or false. Specify if you want to add a physical button after the datepicker. |
ndpTriggerButtonClass | string | Accepts any string. Specify the class name(s) you want to add to the buton. |
ndpTriggerButtonText | string | Accepts any string. Specify the text that will appear on the button. |
ndpEnglishInput | string | Accepts any string. Specify the id of the input element that will receive the english date after the Nepali Date Picker selection. |
ndpYearCount | number | Accepts any number. Specify the number of items to display on the Nepali Year selection. |
ndpYear | boolean | Accepts true or false. Speficy if you want to show the nepali year selection. |
ndpMonth | boolean | Accepts true or false. Speficy if you want to show the nepali month selection. |
disableDaysBefore | number | Accepts any number. Specify the number of days you want to disable before the current date. |
disableDaysAfter | number | Accepts any number. Specify the number of days you want to disable after the current date. |
disableBefore | date | Accepts any date. Specify the start date the users will be able to choose from. |
disableAfter | date | Accepts any date. Specify the end date the users will be able to choose till. |
dateFormat | string | Accepts the given format. YYYY-MM-DD, MM-DD-YYYY, YYYY/MM/DD, MM/DD/YYYY. |
onChange | function | Accepts a function. Specify the function that will be called after the date selection. |
unicodeDate | boolean | Accepts true or false. Specify if you want to show the date selection as unicode date. |
readOnlyInput | boolean | Accepts true or false. Specify if the input is read only. |
container | string | Appends 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 DemoYou can download the file here: