Easy Nepali Date Picker For HTML | jQuery

 

A customizable, easy-to-use, input-based Nepali date picker plugin based on the Nepali calendar. Users can select a Nepali date in a navigable month view and change month & year from dropdowns at the top of the Nepali calendar.

Introduction

Date pickers let users select a date or range of dates. They should be suitable for the context in which they appear. The default date picker is not so good looking as there are plenty of other date pickers available in the internet like Google's Materialize date picker or Bootstrap's date picker .

But today I will be teaching you how you integrate Nepali date picker in your web project. I will be using the Advance jQuery date picker by Sonil.

Demo - Click Here

You can check out its documentation in detail. It is an easy advanced jQuery date picker for Nepali that supports both single date selection and date range (multi-date) selection. So lets get into it!

Using Nepali Date Picker

Integration

1. First step is to download the given files and add it in your project source file. Download the files.

Importing

2. Now we need to go to our index.html file and paste the below code inside head tag to import our CSS files and other CDN.

<link rel="stylesheet" href="nepali-date-picker.min.css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism.min.css" rel="stylesheet" />

3. Then you need to paste the following scrips after the body tag.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="nepali-date-picker.min.js"></script>

  <script>
    jQuery(document).ready(function () {
      $(".date-picker").nepaliDatePicker();
    });
  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>  

Basic Usage

4. Now to use nepali date picker in your project, create a form tag with input in it which has a class of date-picker form-control. Check out the below code.

  <form action="">
    <label for="staticEmail" class="col-form-label">Select Date: </label>
    <input type="text" class="date-picker form-control" data-single="1" name="date1" value=""
      placeholder="Click here to select date" />
  </form>
  

Our Final Code would look like this:

Output

Conclusion

In this way following simple steps you can easily add a custom nepali date picker in your project. You can also add multiple date picker by following the original documentation. If you have learnt something share it with your friends and if you have any doubt directly comment down below. I will be there to help you out.

To know more about coding follow The Info Docs.