populate JQuery datetimepicker with persian(jalaali) calendar

I want to use JQuery datetimepicker with persian calendar. Since it's not officially supported, I'm trying to do it using moment.js and moment-jalaali.js.

I managed to get the input to change to persian date.

I mean upon clicking on day 6th of December 2014 the input would change to "1393/9/15" which is the same date in persian calendar.

and this is what I've done so far:

<script type="text/javascript" src="jquery.datetimepicker.js')}}"></script>
<script type="text/javascript" src="moment.min.js')}}"></script>
<script type="text/javascript" src="moment-jalaali.js')}}"></script>
<script type="text/javascript">
    Date.parseDate = function( input, format ){
        return moment(input,format).toDate();
    };
    Date.prototype.dateFormat = function( format ){
        return moment(this).format(format);
    };
    $(document).ready(function () {
        $('.datepicker').datetimepicker({
            format: 'jYYYY/jM/jD - H:m',
            lang: 'fa'
        });
    });
</script>

But calendar is still showing gregorian calendar. and adding the "lang" option to datepicker, only changes the language of calendar.

I have to populate the calendar with persian calendar and I have absolutely no idea how.

Solution

after a long time I found this repo very useful.

this is the normal jquery ui datepicker:

$(document).ready(function(){
  $('.date-input').datepicker();
});

div.ui-datepicker{
 font-size:12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css">
<input type="date" class="date-input">

which can be modified to show jalali calendar with including bootstrap-datepicker.min.js instead of jquery.ui.js.

BUT: since this repo wanted to add twitter bootstrap theme for the datepicker, some of class names in the datepicker was changed to work with twitter bootstrap theme. But that wasn't what I wanted. I wanted to be able to use jquery ui themes. so I forked the repo and and edited the class names back to the jquery ui original names.

Just include these files (jquery-ui-jalali-datepicker.min.js & datepicker.fa.min.js) and any jquery-ui theme can be applied.

the result is like this:

$(document).ready(function(){
  $('.date-input').datepicker();
});

div.ui-datepicker{
 font-size:12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/Taxellool/jquery-ui-jalali-datepicker/master/jquery-ui-jalali-datepicker.min.js"></script>
<script src="https://raw.githubusercontent.com/Taxellool/jquery-ui-jalali-datepicker/master/datepicker.fa.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css">
<input type="date" class="date-input"/>