JQuery Calendar : Ummul Qura and Gregorian

Hi Guys,

I had a requirement to create a calendar which lets user select ummul qura and gregorian dates for bootstrap theme. So I found this jquery calendar and modified it to achieve it. I hope you like it.

Javascript

<script type="text/javascript">
    


  


    var calendarHijri,
        calendarGreg;
    var minHijriYear,
            minHijriMonth,
            minHijriDay,
            maxHijriYear,
            maxHijriMonth,
            maxHijriDay;
    /*Update Panel Fix*/
    function pageLoad()
    {
        //Handle Uniform
        if (!jQuery().uniform) {
            return;
        }
        var test = $("input[type=checkbox]:not(.toggle, .make-switch), input[type=radio]:not(.toggle, .star, .make-switch)");
        if (test.size() > 0) {
            test.each(function () {
                if ($(this).parents(".checker").size() == 0) {
                    $(this).show();
                    $(this).uniform();
                }
            });
        }


        calendarHijri = $.calendars.instance('ummalqura');
         calendarGreg = $.calendars.instance('gregorian');

         <% if (MinDate.HasValue) { %>            
                var date = calendarGreg.parseDate('',<%= "'"+ MinDate.Value.ToString("dd-MM-yyyy",new System.Globalization.CultureInfo("en-US")) +"'" %>);
                var cdate = calendarHijri.fromJD(calendarGreg.toJD(date)); 
                minHijriDay = cdate.day();
                minHijriMonth = cdate.month();
                minHijriYear = cdate.formatYear(); 
               
             <% } %>
               <% if (MaxDate.HasValue) { %>
                var date = calendarGreg.parseDate('',<%= "'"+MaxDate.Value.ToString("dd-MM-yyyy",new System.Globalization.CultureInfo("en-US"))+"'" %>);
                var cdate = calendarHijri.fromJD(calendarGreg.toJD(date)); 
                maxHijriDay = cdate.day();
                maxHijriMonth = cdate.month();
                maxHijriYear = cdate.formatYear(); 
               
             <% } %>

        

         <% if (CalendarEnabled)
    { %>
         
         $(<%= "'#" + ClientIDHijri + "'" %>).calendarsPicker({ calendar: calendarHijri,
             <% if (MinDate.HasValue) { %>
             minDate : calendarHijri.newDate(minHijriYear,minHijriMonth,minHijriDay),              
             rangeSelect: true,
             <% } %>
               <% if (MaxDate.HasValue) { %>
             maxDate : calendarHijri.newDate(maxHijriYear,maxHijriMonth,maxHijriDay),            
             <% } %>
             onSelect: function(dates) { 
                 
                 var date = dates[0]; 
                 var cdate = calendarGreg.fromJD(calendarHijri.toJD(date)); 
                 var day = (cdate.day()>=10)?cdate.day() + "":"0" + cdate.day();
                 var month = (cdate.month()>=10)?cdate.month() + "":"0" + cdate.month();

                 document.getElementById(<%= "'" + ClientIDGrogorian + "'" %>).value = day  + '-' + month + '-' + cdate.formatYear();

                 <% if (ExposeSelect)
                { %>
                 OnSelectChanged(document.getElementById(<%= "'" + ClientIDGrogorian + "'" %>).value);
                <% }%>

             } });
         $(<%= "'#" + ClientIDGrogorian + "'" %>).calendarsPicker({ calendar: calendarGreg,
               <% if (MinDate.HasValue) { %>
             minDate : calendarGreg.newDate(<%= MinDate.Value.Year %>,<%= MinDate.Value.Month %>,<%= MinDate.Value.Day %> ),              
             rangeSelect: true,
             <% } %>
               <% if (MaxDate.HasValue) { %>
             maxDate : calendarGreg.newDate(<%= MaxDate.Value.Year %>,<%= MaxDate.Value.Month %>,<%= MaxDate.Value.Day %> ),            
             <% } %>
             onSelect: function(dates) { 
                
                 var date = dates[0]; 
                
                 var cdate = calendarHijri.fromJD(calendarGreg.toJD(date)); 
                 var day = (cdate.day()>=10)?cdate.day() + "":"0" + cdate.day();
                 var month = (cdate.month()>=10)?cdate.month() + "":"0" + cdate.month();
                 document.getElementById(<%= "'" + ClientIDHijri + "'" %>).value = day  + '-' + month + '-' + cdate.formatYear();
               <% if (ExposeSelect)
                { %>
                 OnSelectChanged(document.getElementById(<%= "'" + ClientIDGrogorian + "'" %>).value);
                 <% } %>
             } });
         <% } %>

         <%if( ShowHijry ) {%>
         DateChanged_<%= this.ClientID %>('<%= ClientIDGrogorian%>','<%= ClientIDHijri %>');
     <%
        } 
        %>
<%if(ShowGregorian ) {%>
         DateChanged_<%= this.ClientID %>('<%= ClientIDHijri%>','<%= ClientIDGrogorian %>');
    <%
        } 
        %>
         
    }

    // $.calendars.picker.setDefaults({renderer: $.calendars.picker.themeRollerRenderer}); // Requires jquery.calendars.picker.ext.js
    

    jQuery(document).ready(function(){
        calendarHijri = $.calendars.instance('ummalqura');
         calendarGreg = $.calendars.instance('gregorian');
         var date,cdate;
         var hijriYearDif,gregDateDif;
         <% if (MinDate.HasValue) { %>            
                 date = calendarGreg.parseDate('',<%= "'"+ MinDate.Value.ToString("dd-MM-yyyy",new System.Globalization.CultureInfo("en-US")) +"'" %>);
                 cdate = calendarHijri.fromJD(calendarGreg.toJD(date)); 
                minHijriDay = cdate.day();
                minHijriMonth = cdate.month();
                minHijriYear = cdate.formatYear(); 
                
             <% } %>
               <% if (MaxDate.HasValue) { %>
                 date = calendarGreg.parseDate('',<%= "'"+MaxDate.Value.ToString("dd-MM-yyyy",new System.Globalization.CultureInfo("en-US"))+"'" %>);
                 cdate = calendarHijri.fromJD(calendarGreg.toJD(date)); 
                maxHijriDay = cdate.day();
                maxHijriMonth = cdate.month();
                maxHijriYear = cdate.formatYear();              
             <% } %>
        <% if (MinDate.HasValue && MaxDate.HasValue) { %>
        hijriYearDif = maxHijriYear - minHijriYear;
        
        gregDateDif = <%= (MaxDate.Value.Subtract(MinDate.Value).Days / 365) %>;
        <% } %>
        

         <% if (CalendarEnabled)
    { %>
         
         $(<%= "'#" + ClientIDHijri + "'" %>).calendarsPicker({ calendar: calendarHijri,
             <% if (MinDate.HasValue) { %>
             minDate : calendarHijri.newDate(minHijriYear,minHijriMonth,minHijriDay ),              
             yearRange: minHijriYear+':'+maxHijriYear+'',
             <% } %>
               <% if (MaxDate.HasValue) { %>
             maxDate : calendarHijri.newDate(maxHijriYear,maxHijriMonth,maxHijriDay ),            
             <% } %>
             onSelect: function(dates) { 
                 
                 var date = dates[0]; 
                 if(date != undefined)
                 {
                     var cdate = calendarGreg.fromJD(calendarHijri.toJD(date)); 
                     var day = (cdate.day()>=10)?cdate.day() + "":"0" + cdate.day();
                     var month = (cdate.month()>=10)?cdate.month() + "":"0" + cdate.month();

                     document.getElementById(<%= "'" + ClientIDGrogorian + "'" %>).value = day  + '-' + month + '-' + cdate.formatYear();

                     <% if (ExposeSelect)
                    { %>
                     OnSelectChanged(document.getElementById(<%= "'" + ClientIDGrogorian + "'" %>).value);
                     <% }%>
                 }
                 else
                     document.getElementById(<%= "'" + ClientIDGrogorian + "'" %>).value = '';

             } });
         $(<%= "'#" + ClientIDGrogorian + "'" %>).calendarsPicker({ calendar: calendarGreg,
               <% if (MinDate.HasValue) { %>
             minDate : calendarGreg.newDate(<%= MinDate.Value.Year %>,<%= MinDate.Value.Month %>,<%= MinDate.Value.Day %> ),  
             
             <% } %>
               <% if (MaxDate.HasValue) { %>
             maxDate : calendarGreg.newDate(<%= MaxDate.Value.Year %>,<%= MaxDate.Value.Month %>,<%= MaxDate.Value.Day %> ),            
             <% } %>
       <% if (MinDate.HasValue && MaxDate.HasValue) { %>
            
             yearRange: 'c-'+ gregDateDif+':c+'+ gregDateDif+'',
        <% } %>

            

             onSelect: function(dates) { 
                
                 var date = dates[0]; 
                 if(date != undefined)
                 {
                     var cdate = calendarHijri.fromJD(calendarGreg.toJD(date));
                     console.log(calendarGreg.toJD(date));
                     var day = (cdate.day()>=10)?cdate.day() + "":"0" + cdate.day();
                     var month = (cdate.month()>=10)?cdate.month() + "":"0" + cdate.month();
                     document.getElementById(<%= "'" + ClientIDHijri + "'" %>).value = day  + '-' + month + '-' + cdate.formatYear();
                     <% if (ExposeSelect)
                { %>
                     OnSelectChanged(document.getElementById(<%= "'" + ClientIDGrogorian + "'" %>).value);
                     <% } %>
                 }
                  else
                     document.getElementById(<%= "'" + ClientIDHijri + "'" %>).value = '';
             } });
         <% } %>

         <%if( ShowHijry ) {%>
         DateChanged_<%= this.ClientID %>('<%= ClientIDGrogorian%>','<%= ClientIDHijri %>');
     <%
        } 
        %>
<%if(ShowGregorian ) {%>
         DateChanged_<%= this.ClientID %>('<%= ClientIDHijri%>','<%= ClientIDGrogorian %>');
    <%
        } 
        %>
         
    }
   );

     


    function DateChanged_<%= this.ClientID %>(controlChanged,controlToUpdate) {
    var changedDate = document.getElementById(controlChanged).value;
    if (changedDate != '') {
        try {
            var changedVal = <%= "'"+ClientIDHijri+"'" %>;
            if(controlChanged == changedVal)
            {
                var date = calendarHijri.parseDate('', changedDate);
                var cdate = calendarGreg.fromJD(calendarHijri.toJD(date)); 
                 var day = (cdate.day()>=10)?cdate.day() + "":"0" + cdate.day();
                 var month = (cdate.month()>=10)?cdate.month() + "":"0" + cdate.month();

                 document.getElementById(<%= "'"+ClientIDGrogorian+"'" %>).value = day  + '-' + month + '-' + cdate.formatYear();
             
            }
            else
            {
                var date = calendarGreg.parseDate('', changedDate);
                var cdate = calendarHijri.fromJD(calendarGreg.toJD(date)); 
                 var day = (cdate.day()>=10)?cdate.day() + "":"0" + cdate.day();
                 var month = (cdate.month()>=10)?cdate.month() + "":"0" + cdate.month();
                 document.getElementById(<%= "'"+ClientIDHijri+"'" %>).value = day  + '-' + month + '-' + cdate.formatYear();
         
            }
            
        }
        catch (e) {
            console.log(e);
        }
    }
}

    



</script>