View Demo

Download nepali.datepicker.v2.2.zip

Dependencies
The only required dependencies is: jQuery

Overview:

  • Light weight
  • Date Range from 2000 BS to 2089 BS
  • Date Range from 1944 AD to 2033 AD
  • Free for Use
  • No Database map required

The nepali datepicker has been built similar to traditional jQuery datepicker. We have always relied on direct input for Nepali dates, but now we can choose dates from the datepicker as we have done for English dates.

The nepali datepicker is tied to a form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input) to close. If a date is chosen, the chosen date is shown as the input’s value.

Instructions for use:

  • Include jQuery library
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  • Include nepali.datepicker.v2.2.min.js
    <<script type="text/javascript" src="nepali.datepicker.v2.2.min.js"></script>
  • Include nepali.datepicker.v2.2.min.css
    <link rel="stylesheet" type="text/css" href="nepali.datepicker.v2.2.min.css" />
  • Then, simply attach to the id or class using .nepaliDatePicker()

    eg: $(“#id”).nepaliDatePicker() or $(“.class”).nepaliDatePicker()

    <script>
         $(document).ready(function(){
              $('.nepali-calendar').nepaliDatePicker();
         });
    </script>
    

Various Usages

    • Datepicker with Disabled Dates(View Demo)
      $('#nepaliDate1').nepaliDatePicker({
      	disableBefore: '12/08/2073',
      	disableAfter: '12/20/2073'
      });
      
    • Datepicker with Disabled Number of Days(View Demo)
      $('#nepaliDate1').nepaliDatePicker({
      	disableDaysBefore: '10',
      	disableDaysAfter: '10'
      });
      
    • Datepicker with callback (View Demo)
      $('#nepaliDate1').nepaliDatePicker({
      	onChange: function(){
      		alert($('#nepaliDate1').val());
      	}
      });
      
    • Datepicker with button (View Demo)
      $('#nepaliDate3').nepaliDatePicker({
      	onFocus: false,
      	ndpTriggerButton: true,
      	ndpTriggerButtonText: 'Date',
      	ndpTriggerButtonClass: 'btn btn-primary btn-sm'
      });
      
    • Datepicker with english date textbox (View Demo)
      $('#nepaliDate').nepaliDatePicker({
      	ndpEnglishInput: 'englishDate'
      });
      
    • Datepicker inside modal (View Demo)
    • Datepicker with Year and/or Month selection
$('#nepaliDate5').nepaliDatePicker({
	npdMonth: true,
	npdYear: true,
	npdYearCount: 10 // Options | Number of years to show
});
  • Datepicker hidden functions (AD2BS and BS2AD) (View Demo)
    $('#englishDate9').change(function(){
    	$('#nepaliDate9').val(AD2BS($('#englishDate9').val()));
    });
    
    $('#nepaliDate9').change(function(){
    	$('#englishDate9').val(BS2AD($('#nepaliDate9').val()));
    });
    

Comments