leapfrogtechnology/nepali-date-picker

Nepali Date Picker jQuery Plugin 🇳🇵

Nepali Date Picker

Nepali Date Picker jQuery Plugin for everyone. 🇳🇵

Installation

npm install nepali-date-picker

Demo and Documentation

https://leapfrogtechnology.github.io/nepali-date-picker/demo/

Usage

Include jQuery, nepaliDatePicker.min.js and nepaliDatePicker.min.css in your HTML.

<!-- this should go after your </body> -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/jquery.nepaliDatePicker.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/nepaliDatePicker.min.css" crossorigin="anonymous" />

Add Input Element

<input type="text" value="" name="date" class="date-picker" />

Initialize Date Picker

$('.date-picker').nepaliDatePicker({
  dateFormat: '%D, %M %d, %y',
  closeOnDateSelect: true,
  minDate: 'सोम, जेठ १०, २०७३',
  maxDate: 'मंगल, जेठ ३२, २०७३'
});

Contributing

Install

npm install
npm run update

Build

npm run build

Test

npm test

nepali-date-picker's Issues

calendarFunctions doesnot work if value passed as parameter

I have a value '2019, 9, 17' as ad date, I want to convert this to bs date. The problem is:
if i run console.log(calendarFunctions.getBsDateByAdDate(2019, 9, 17));
It shows correct value but if i write
var cp = '2019, 9, 17 ';
console.log(calendarFunctions.getBsDateByAdDate(cp));
then it says invalid format. What is the issue with this ??

datepicker does not show up on focus in

Bug: Date conversion from AD to BS

Date conversion fails for a specific AD month.

Step to reproduce:
calendarFunctions.getBsDateByAdDate(2018, 03, 12)

This throws "RangeError: Parameter bsMonth value should be in range of 1 to 12"

Problem with datepicker position

Datepicker doesn't appear at the position of datepicker input. The left and top value of datepicker css is incorrect.

Nepali Date conversion issue from April 1 to April 14 (2021).

Datepicker won't hide

Datepicker won't hide when I click the document. I have to click on date in datepicker to get it hidden.

Date data wrong for 2081 jestha

In the month of jesth of 2081 there should be total 32 days in that month but there is only 31 days in your data set. Please fix this issue.

How to use this with npm?

I am trying to use this Nepali Date Picker in Vue js. And encountering the issue like

.

how to retrieve month and day in double digit?

is there any way that i can get dates in format of YYYY-MM-DD (२०७३-०२-०३) .... i dont find other plugins to working incredibly than this but it would be more profitable if i could generate in the format as i mentioned

Help, rather than Issue

Any plan to support it in vue component?

Error: Property 'nepaliDatePicker' does not exist on type 'JQuery<HTMLElement>

Hey there, thanks for the datepicker,

I tried to implement it in my application, however, its throwing error on Initialize Date Picker

ts file:

$(".date-picker").nepaliDatePicker({
      dateFormat: "%D, %M %d, %y",
      closeOnDateSelect: true,
      minDate: "सोम, जेठ १०, २०७३",
      maxDate: "मंगल, जेठ ३२, २०७३"
    });

HTML:

<div class="form-group">
    <input type="text" value="" name="date" class="date-picker nepalidatepicker">
</div>

Do I need to import anything in my TS file to get rid of this error?

Get date in AD on date change

Is there a way we can get date in AD on date change and input date in AD on plugin initialization or during runtime?
What I'm trying to do is, get a date in AD when user changes the date in nepali and add the date in hidden input so that I don't have to convert it in backend.

Uncaught Error: Invalid nepali number

Thank you for such good library. But i am facing an issue while editing project start date and end date.
When i supply english date directly, it is obvious to show invalid nepali number. But when i store the english start date and english end date in hidden input and later use getBsDateByAdDate function, it do not give error but the nepali calendar is not set to given date.
Can you help me with this?

My datepicker setup is like below:

My datepicker when providing nepali date after conversion like in setup:

My datepicker date is not set according to given date input:

Date Picker doesn't close on focus out

If we focus out by tabbing the field datepicker doesn't close.

not clear, what to import in react

documentation is not clear on what to import this in reactjs,

Is there is a way to set holidays?

I use below CSS to indicate holidays, it would be awesome if I can set date range or some sort of date arrays.

/*Custom - Holiday indicator*/
<style> #ndp-nepali-box #ndp-table table td:has(a[data-value="2080-03-03"]){ background: #ff9898; } </style>
<style> #ndp-nepali-box #ndp-table table td:has(a[data-value="2080-03-04"]){ background: #ff9898; } </style>
<style> #ndp-nepali-box #ndp-table table td:has(a[data-value="2080-03-05"]){ background: #ff9898; } </style>

/*Saturday - सार्बजनिक bida*/
<style> 
#ndp-nepali-box #ndp-table table tr td:nth-child(7){ background: #ff3f3f; } 
#ndp-nepali-box #ndp-table table tr td:nth-child(7)>a{color:white;}
</style>

set current date as default date in input field

how to set current nepali date automatically as default date in date select input field.???

Issue in today's date selection in calendar UI

Date selection for nepali date seems to be off by one day in the calendar UI.
Issue seems to started from english date April 1st, 2021 (Chaitra 19th, 2077)

latest date is not accurate in nepali date picker instead of chaitra 24 its coming 25

latest date is not accurate in nepali date picker instead of chaitra 24 its coming 25

Support for time select

It would have been nicer to have time select alongside the date itself like for input type datetime-local.

cant use year and month only

i got the following error while using month and year only:

jquery.nepaliDatePicker.min.js:1 Uncaught ReferenceError: Missing required parameters: bsYear, bsMonth, bsDate

am i doing something wrong??
following is my code:

$(document).ready(function(){
    $('#nepaliDatepicker').nepaliDatePicker({
        dateFormat: "%y-%m",
        closeOnDateSelect: true
    });
    let nep_date = (calendarFunctions.getBsDateByAdDate(year, month, day));
    let nepMonth = calendarFunctions.getNepaliNumber(nep_date.bsMonth);
    let nepYear = calendarFunctions.getNepaliNumber(nep_date.bsYear);
    $('#nepaliDatepicker').val(nepYear+'-'+nepMonth);
});

input validation is not working

Why is the required in the input doesn't work?

Issues with nepali dates after February

The today's date and date conversion function, shows yesterday's date. I tried testing in demo app, where it shows that today's date as 19th of Chaitra Wednesday, same result for April 2, 2020 conversion.

Date ranging from 1 BS or 1000 BS?

I would like to manually input the data from 1BS or 1000 BS, it is possible?
I can provide the data and i would love to contribute too.

integrate with laravel 8

Hello,

can we integrate with laravel 8, and laravel 8 application in module?

Regards,
Kamal

Issue to date converter

Couldnt get time to check what is going wrong. but i think this will help main dev to fix the issue quick.
Here is the issue.

request for feature

please if possible add a feature to calculate the age from the selected date