Nepali Date Picker

Nepali Date Picker - Demo & Documentation

Usage

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 src="//code.jquery.com/jquery-3.7.1.slim.min.js"></script>
<script src="//unpkg.com/nepali-date-picker@2.0.2/dist/nepaliDatePicker.min.js"></script>
<link rel="stylesheet" href="//unpkg.com/nepali-date-picker@2.0.2/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

DOB:

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 formatted as dateFormat option provided
maxDate	String	Set max date select range. "मंगल, जेठ ३२, २०७३" Note: Date should be formatted 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

From Date:

To Date:

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

Date:

Output

API:

Global variable calendarFunctions
Month start form 0 index
1: January | बैशाख
12: December | चैत
Week Day start form 0 index
1: Sunday | आईत
7: Saturday | शनि

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