Adopting Bangla in jQuery UI DatePicker

While working on a Bangla Application in ASP.net, I was required a Bangla DatePicker. The requirement of the project was using Bijoy Bangla KeyBoard. I don’t know why this was chosen as we have nice phonetic keyboard Avro. However, I relied on CSS3 @font-face TAG for showing Bangla Font in the Site as I did not have additional time to play with Bangla Visualization Techniques – The project was really fast track in manner and I was solely newbie for Bangla UI. So, there must be some other good way to achieve it, meanwhile I am providing my codes here.

The style sheet is given herewith:

<style type="text/css">
@font-face {    font-family: sutonny ;    
src: url( normal.ttf ) format("truetype");  }  

@font-face {    font-family: sutonnyb ;    
src: url( bold.ttf ) format("truetype");  }  

@font-face {    font-family: sutonnyi ;    
src: url( italic.ttf ) format("truetype");  }  

@font-face {    font-family: sutonnybi ;    
src: url( bold-italic.ttf ) format("truetype");  }  

/* Then use it like you would any other font */  
.normal { font-family: sutonny , verdana, 
helvetica, sans-serif; font-size:30px; } 
.bold { font-family: sutonnyb , verdana, 
helvetica, sans-serif; font-size:30px;  }

.italic { font-family: sutonnyi , verdana, 
helvetica, sans-serif; font-size:30px;  }

.bold-italic { font-family: sutonnybi , verdana, 
helvetica, sans-serif; font-size:30px;  }

</style>

My DatePicker markup was:

<input type="text"  class="dtpicker normal" />

jQuery, ui.core and ui.datepicker was used. But I changed the names, short names & long names of the Days and Months with some Unicode Character Values. My changes are at Line 44 to Line 88. I have found a site (http://thpbd.org/bangla/) that gives Unicode Value from Bangla Characters – you may find it helpful too.

First I tried the datepicker to see if it works. Then I replaced the ui.datepicker.js with my own one. Please download it and use when needed. The result is shown here:

Bangla jQuery DatePicker from jQuery UI Datepicker
Bangla jQuery DatePicker from jQuery UI Datepicker

Hope you will like it!!!!!!!

Advertisements

3 thoughts on “Adopting Bangla in jQuery UI DatePicker

      1. Thanks for reply. I used SolaimanLipi font in my project and run it in IE and Mozilla browser. Could you send me please the test page,jQuery, ui.core and ui.datepicker css by email.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s