Demo & Documentation

How to use it?

HTML Code
<p>
    <label>DOB: </label>
    <input type="text" value="" name="date" class="bod-picker" placeholder="Select Date of Birth">
    <button id="clear-bth" onclick="">Clear</button>
</p>

<!-- this should go after your </body> -->
< script type="text/javascript" src="jquery.min.js"> </script>
<script type="text/javascript" src="dist/jquery.nepaliDatePicker.min.js"> </script>
<link rel="stylesheet" href="dist/nepaliDatePicker.min.css">
                
Js Code
$(".bod-picker").nepaliDatePicker({
    dateFormat: "%D, %M %d, %y",
    closeOnDateSelect: true
});

$("#clear-bth").on("click", function(event) {
    $(".bod-picker").val('');
});
                
Demo

Options

Option Data Type Description
closeOnDateSelect Boolean
Default value : true
Enable/disable close date picker on date select.
dateFormat String
Default value : "%D, %M %d, %y"
Set det format.
dateFormat: " %D, %M %d, %y"
dateFormated output: बिही, फागुन १०, २०७४
  • %d : date
    १, १२, ...
  • %D : Week day name
    आईत, सोम, ...
  • %m : Nepali month
    १, ५, ...
  • %M : Month name
    बैशाख, जेठ, असार, ...
  • %y : Year
    २०७४, ...
minDate String Set min date select range.
"सोम, जेठ १०, २०७३"
Note: Date should be formated as dateFormat option provided
maxDate String Set max date select range.
"मंगल, जेठ ३२, २०७३"
Note: Date should be formated as dateFormat option provided
HTML Code
<p>
    <label>From Date: </label>
    <input type="text" value="२०७३-२-२३" name="date" id="from-picker">
</p>
<p>
    <label>To Date: </label>
    <input type="text" value="" name="date" id="to-picker">
</p>
                
JS Code
var currentDate = new Date();
var currentNepaliDate = calendarFunctions.getBsDateByAdDate(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
var formatedNepaliDate = calendarFunctions.bsDateFormat("%y-%m-%d", currentNepaliDate.bsYear, currentNepaliDate.bsMonth, currentNepaliDate.bsDate);
$("#from-picker").nepaliDatePicker({
    dateFormat: "%y-%m-%d",
    closeOnDateSelect: true,
    minDate: "२०७०-१-२०",
    maxDate: formatedNepaliDate
});

$("#to-picker").val(formatedNepaliDate);
$("#to-picker").nepaliDatePicker({
    dateFormat: "%y-%m-%d",
    closeOnDateSelect: true,
    minDate: "२०७०-१-२०",
    maxDate: formatedNepaliDate
});
                
Demo

Event Handler:

Event Description
show Event trigger on calendar show
dateSelect Event trigger on select date
dateChange Event trigger on date change
yearChange Event trigger on year change
monthChange Event trigger on month change
HTML Code
                    <p>
                        <label>Date: </label>
                        <input type="text" value="" name="date" id="date-picker" placeholder="Select Date">
                    </p>
                
Js Code
$("#date-picker").nepaliDatePicker({
    dateFormat: "%y-%m-%d",
    closeOnDateSelect: true
});

function eventLog(event){
    var datePickerData = event.datePickerData;
    var outputData = {
        "type": event.type,
        "message": event.message,
        "datePickerData": datePickerData
    };

    var output = '<p><code>▸ ' + JSON.stringify(outputData) + '</code></p>';
    $('.output').append(output);
}

$("#date-picker").on("show", function (event) {
    var output = '<p><code>▸ Show event trigger</code></p>';
    $('.output').append(output);
});

$("#date-picker").on("yearChange", function (event) {
    eventLog(event);
});

$("#date-picker").on("monthChange", function (event) {
    eventLog(event);
});

$("#date-picker").on("dateChange", function (event) {
    eventLog(event);
});

$("#date-picker").on("dateSelect", function (event) {
    eventLog(event);
});
                
Demo

Output

API:

Function Parameter Description
getNepaliNumber(number)
  • @param {Number} number
  • @returns {String}
Return equivalent number in nepaliNumber
getNumberByNepaliNumber(nepaliNumber)
  • @param {String} nepaliNumber
  • @returns {Integer}
Return equivalent number from nepaliNumber
getBsMonthInfoByBsDate(bsYear, bsMonth, bsDate, dateFormatPattern)
  • @param {Number} bsYear
  • @param {Number} bsMonth
  • @param {Number} bsDate
  • @param {String} dateFormatPattern
  • @returns
                                    
                                        {
                                            adDate : DateObject,
                                            bsDate : Number,
                                            bsMonth : Number,
                                            bsMonthDays : Number,
                                            bsMonthFirstAdDate : DateObject,
                                            bsYear: Number,
                                            formattedDate : String,
                                            weekDay : Number
                                        }
                                    
                                
Return Bs month data
getAdDateByBsDate(bsYear, bsMonth, BsDate)
  • @param {Number} bsYear
  • @param {Number} bsMonth
  • @param {Number} BsDate
  • @return {DateObject}
Return corresponding Ad date by Bs date
getBsMonthDays(bsYear, bsMonth)
  • @param {Number} bsYear
  • @param {Number} bsMonth
  • @returns {Number}
Return number of days in bsMonth
getBsDateByAdDate(adYear, adMonth, adDate)
  • @param {Number} adYear
  • @param {Number} adMonth
  • @param {Number} adDate
  • @returns
                                    
    {
        bsYear : Number,
        bsMonth : Number,
        bsDate : Number
    }
                                
                            
Return corresponding Bs date data by Ad date
getBsYearByAdDate(adYear, adMonth, adDate)
  • @param {Number} adYear
  • @param {Number} adMonth
  • @param {Number} adDate
  • @return {Number}
Return corresponding Bs year by Ad date
getBsMonthByAdDate(adYear, adMonth, adDate)
  • @param {Number} adYear
  • @param {Number} adMonth
  • @param {Number} adDate
  • @return {Number}
Return corresponding Bs month by Ad date
bsDateFormat(dateFormatPattern, bsYear, bsMonth, bsDate, day)
  • @param {String} dateFormatPattern
  • @param {Number} adYear
  • @param {Number} adMonth
  • @param {Number} adDate
  • @param {Number} day
  • @return {String}
Return formated Bs date
parseFormattedBsDate(dateFormat, dateFormattedText)
  • @param {String} dateFormat
  • @param {String} dateFormattedText
  • @return
                                    
    {
        bsYear : Number,
        bsMonth : Number,
        bsDate : Number,
        bsDay: Number
    }
                                
                            
Parse formated date
JS Code
    console.log(calendarFunctions.getNepaliNumber(125));

    console.log(calendarFunctions.getNumberByNepaliNumber("१२५"));

    console.log(calendarFunctions.getAdDateByBsDate(2074, 10, 15));

    console.log(calendarFunctions.getBsMonthDays(2074, 10);

    console.log(calendarFunctions.getBsDateByAdDate(2017, 2, 15));

    console.log(calendarFunctions.getBsYearByAdDate(2017, 2, 15));

    console.log(calendarFunctions.getBsMonthByAdDate(2017, 2, 15));

    console.log(calendarFunctions.bsDateFormat("%y %M, %d %D", 2074, 11, 9));

    console.log(calendarFunctions.parseFormattedBsDate("%y %M, %d %D", "२०७४ चैत, ९ बुध"));
            
Output