Using Nepali Date Picker in a modal popup

In this post, we are going to look at how we can use Nepali Date Picker in a jQuery/ReactUI modal popup.

I have seen a lot of queries from the users having difficulty using the nepali date picker in a modal popup. Most people use jQuery with their websites and web applications, so I am including examples here.

You can view the completed sample code here:
https://plnkr.co/plunk/mt9fjpkn6EbWuExq

Lets start by creating a simple web page with jQuery and bootstrap.

Here is the result of the above code:

Now, lets add the code to add a button and on click it would show a modal popup. For this, we are pulling the example modal popup as provided by bootstrap here:
https://getbootstrap.com/docs/5.0/components/modal/#live-demo

Here is what it looks after we add the button and click on it to show the modal popup.

Next, lets add the Nepali Date Picker, now that we have a working jQuery modal popup. We can do it using different ways, either directly downloading the required files from http://nepalidatepicker.sajanmaharjan.com.np/ or using npm.

npm install @sajanm/nepali-date-picker

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.6.min.js"></script>
 
<!-- Nepali Date Picker Css -->
<link rel="stylesheet" href="./node_modules/@sajanm/nepali-date-picker/dist/nepali.datepicker.v3.6.min.css"/>

Our code should look like this.

<input type="text" id="nepali-date-picker" />

Similarly, adding the jQuery script to initialize the above text box with Nepali Date Picker, we can write the following code.

$(document).ready(function () {
  // Initialize Nepali Date Picker
  $("#nepali-date-picker").nepaliDatePicker();
});

Now, when we go back to the browser, and try to click on the input box, you can see the Nepali Calendar Date Picker.

Now, lets add a new textbox inside the modal and add required javascript initialization for it.

<div class="modal-body">
	<p>
		<input type="text" id="modal-nepali-date-picker" />
	</p>
</div>
$(document).ready(function () {
  // Initialize Nepali Date Picker
  $("#nepali-date-picker").nepaliDatePicker();

  // Initialize Nepali Date Picker for Modal
  $("#modal-nepali-date-picker").nepaliDatePicker({
    container: "#exampleModal",
  });
});

In the Nepali Date Picker initialization for the text box inside the modal popup, we are adding a new attribute container: "#exampleModal". This is an important step that cant be avoided for the nepali date picker to run correctly in a modal popup. The container attribute signifies which element in the html code to append the Nepali Date Picker to. By default, it appends to the body, but for the modal popup, it needs to get appended to the direct parent, which is the modal popup. In the HTML code, you can see that exampleModal is the id of the Modal div.

Once, all the code have been added and initialized correctly, you should be able to open the modal popup and use the Nepali Date Picker inside it correctly. Here is the final output.

You can view the complete code on Github:
https://github.com/sajanm/nepali-date-picker-in-a-modal-popup

Happy Coding 🙂

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.

npm install @sajanm/nepali-date-picker

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 🙂

Since preeti/kantipur font uses a different scripting internally, sorting using normal excel function will result in sorting according to the english alphabet rather than the preeti/kantipur font text.

So, the only solution this was to convert the text from preeti/kantipur font to unicode, and then sort it and convert it back. I had implemented the online version of it sometime back which is available here:
https://sajanmaharjan.com.np/preeti-kantipur-font-sorting/

I got many request to implement the same in excel, but the problem was that there is no function available for the conversion from preeti/kantipur font to unicode. So, i tried my best to come up with the function. And with rigorous testing, I am finally happy to announce that the function is available in excel now. Please download the latest version of Nepali Functions Addin for Excel v7 from the link below:
https://sajanmaharjan.com.np/nepali-functions-addin-for-excel/

After you have installed the addin following the instructions in the above link. Follow the instructions below to perform sorting in Excel:

Assuming we have the following table that needs to be sorted according to name.

Step 1: Insert a new column after the name.

Step 2: Type the heading text as "Unicode Name" or anything of your preference.

Step 3: Type the formula "=font2unicode(A2)" in cell B2.

Step 4: Check the result of the conversion on cell B2

Step 5: Drag and drop the formula from cell B2 upto B11, to see the result for all the rows.

Step 6: Select the whole table and use "Format as Table" and choose a format.

Step 7: Check "My table has headers" and click on OK, since we have headers defined for the table.

You should see your table as shown below, with sortable headings and formatting.

Step 8: Click on the drop down besides "Unicode Name" header and choose "Sort A to Z".

If you inspect the result, the data is sorted by "Unicode Name", which also automatically sorts the row data.

Additionally, we can hide the "Unicode Name" column according to our needs.

In this way, we are able to sort by Preeti/Kantipur font data. Please feel free to leave any comments below if you have any issues.

We have always run into a situation when we need to calculate the difference between two dates, but there is no concrete method that gives us the number of days accurately.

This is the function that is used widely.

// Old Function
function date_diff(date1, date2){
	var one_day = 1000 * 3600 * 24;
	var time_diff = Math.abs(date2.getTime() - date1.getTime());
	var days = time_diff / one_day;
	return Math.ceil(days);
}

The above function does calculate the number of days but uses Math.ceil() which doesnt provide the exact days as there is a decimal error.

For Example, when we try to find the difference between two dates 1944/01/01 and 2019/03/06, on line 5, the value of days is 27458.041666666668 which needs to be adjusted with a Math.ceil() or Math.floor() which might always throw off the final answer by 1 day. This is because dates don't account for DST(Daylight Saving Time) changes.

To overcome the above situation, we can use the following refined function.

function date_diff(date1, date2){
	var one_day = 1000 * 3600 * 24;
	const utc1 = Date.UTC(
		date1.getFullYear(), 
		date1.getMonth(), 
		date1.getDate()
	);
	const utc2 = Date.UTC(
		date2.getFullYear(), 
		date2.getMonth(), 
		date2.getDate()
	);
	var days = (utc2 - utc1) / one_day;
	return Math.abs(days);
}

In the above solution the value of days on line 13 is 27458 when we try to find the difference between the same dates 1944/01/01 and 2019/03/06.

The refined solution first normalizes the two given dates to UTC, and then calculates the difference between the two UTC dates. The good thing about UTC is that UTC time never observes DST. Thus, we get an accurate number of days between the two dates.

While working with Java Script, all of us must have surely run into the case where we need to loop through an array and break the running loop if a certain condition is met. There are many methods how we can loop through an array but we are always looking for the most efficient way to do that.

Our favorite loop method: Array.prototype.forEach

forEach is such an useful method.
But…how can I break the forEach loop?
Well… you can't break forEach.

1
2
3
4
5
6
var arr = ["Kathmandu", "Pokhara", "Lumbini", "Gorkha"];
 
arr.forEach(function(value, index, _arr) {
    console.log(index + ": " + value);
    return false;
});

The result should look like

0: Kathmandu
1: Pokhara
2: Lumbini
3: Gorkha

It's still iterating through all items in the array. What should I do if I want to stop the loop based on the condition? We either set a variable that changes only if the condition is met, but it will still mean that the loop will iterate until the array is exhausted to the last item.

So, what do we do?? It's simple.

Don't use “forEach”. Use “some” or “every”.


Array.prototype.some

Array.prototype.some is pretty much the same as forEach but it break when the callback returns true.

Example:

1
2
3
4
5
6
var arr= ["Kathmandu", "Pokhara", "Lumbini", "Gorkha"];
 
arr.some(function (value, index, _arr) {
    console.log(index + ": " + value);
    return value === "Pokhara";
});

The result should look like

0: Kathmandu
1: Pokhara

What happened here? Since the third iteration returned true, we successfully stopped the loop!


Array.prototype.every

Array.prototype.every is almost identical to some except it's expecting false to break the loop.

Example:

1
2
3
4
5
6
var arr = ["Kathmandu", "Pokhara", "Lumbini", "Gorkha"];
 
arr.every(function(value, index, _arr) {
    console.log(index + ": " + value);
    return value.indexOf("Lumbini") > 0;
});

The result should look like

0: Kathmandu
1: Pokhara
2: Lumbini

What happened here? Since the third iteration returned false, we successfully stopped the loop!

Now you can break loops whenever you want! Enjoy.