Using Nepali Date Picker with AngularJs

In this post, we are going to look at how we can use Nepali Date Picker with AngularJs.

AngularJs has been there for a long time since 2010, and we have many many applications that are written in AngularJs. Today lets take a look at how we can use Nepali Date Picker with AngularJs.

You can view the completed code on Github:
https://github.com/sajanm/nepali-date-picker-with-angularjs

Lets assume we have a running AngularJs application. Here is how the code structure looks like.

The code above gives us the following output on the browser. We will make use of two input boxes, one for the name and the other for the date of birth. I kept the console visible to see if I run into any errors. I typed into the textboxes just to confirm that the two way binding is working properly.

Next, we will add the Nepali Date Picker library into our angular application. We can do that manually or using npm. Use the following command to add the Nepali Date Picker library using npm.

Or if you are not using npm in your project, you can go to https://sajanmaharjan.com.np/nepali-datepicker/ and download the libraries manually and add it to your project.

Now add the corresponding js and css files for the Nepali Date Picker into your project.

<!-- Nepali Date Picker Js -->
<script src="./node_modules/@sajanm/nepali-date-picker/dist/nepali.datepicker.v3.2.min.js"></script>

<!-- Nepali Date Picker Css -->
<link rel="stylesheet" href="./node_modules/@sajanm/nepali-date-picker/dist/nepali.datepicker.v3.2.min.css"/>

Next, Lets' add our codes to the script.js which is referenced in the index.html. Looking at the html structure, we have an angular app named "testApp" and a controller named "testCtrl". In the script.js file, we will write our own directive that will handle the initialization of the Nepali Date Picker.

In the code above, we can see that, a new attribute based directive named "nepaliDatePicker" is added. Any element that has the attribute "nepali-date-picker", the element will be initialized with the Nepali Date Picker.

Now lets add the directive attribute to our date of birth input element as shown below.

Now that we have created the directive, and added it to our input element. Lets go back to the browser and see what happens.

As you can see on the image above, we can see that when we focus on the date of birth input element, the Nepali Date Picker appears. We are now able to select the desired date.

Lets select Bhadra 31, and see what happens.

In the image above, we can see that we selected 2077-05-31 on the Nepali Date Picker, it updated the textbox, but the value on the controller didnt get updated.

Now lets fix that. Go back to script.js and make the following changes.

In the code, we are adding an onChange function that passes the selected value from the textbox to the scope variable. On line 12, we are getting the provided model variable, and assigning the textbox value to it in the scope. To let angularjs detect the scope change, we are putting the assignment inside the $apply function.

Now lets try to select a different date.

When we select 30th Bhadra from the Nepali Date Picker, the values are updated in the textbox as well as the controller scope. Now the value can be passed on for further processing according to your requirements.

You can view the completed code on Github:
https://github.com/sajanm/nepali-date-picker-with-angularjs

Happy Coding 🙂