用波斯（jalaali）日历填充 JQuery datetimepicker答案

【问题标题】：populate JQuery datetimepicker with persian(jalaali) calendar用波斯（jalaali）日历填充 JQuery datetimepicker
【发布时间】：2015-01-24 15:11:12
【问题描述】：

我想将JQuery datetimepicker 与波斯日历一起使用。由于它不受官方支持，我尝试使用moment.js 和moment-jalaali.js 来实现。

我设法将输入更改为波斯日期。

我的意思是点击 2014 年 12 月 6 日时，输入将更改为“1393/9/15”，这与波斯历中的日期相同。

这就是我到目前为止所做的：

<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>

但是日历仍然显示公历。并将“lang”选项添加到 datepicker，只会更改日历的语言。

我必须用波斯历来填充日历，但我完全不知道该怎么做。

【问题讨论】：

标签： jquery calendar datetimepicker momentjs

【解决方案1】：

很久之后我发现this repo很有用。

这是正常的 jquery ui 日期选择器：

$(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">

可以修改为显示 jalali 日历，包括 bootstrap-datepicker.min.js 而不是 jquery.ui.js。

但是：由于这个 repo 想要为 datepicker 添加 twitter bootstrap 主题，datepicker 中的一些类名被更改为与 twitter bootstrap 主题一起使用。但这不是我想要的。我希望能够使用 jquery ui 主题。所以我分叉了 repo 并将类名编辑回 jquery ui 原始名称。

只需包含这些文件（jquery-ui-jalali-datepicker.min.js & datepicker.fa.min.js），即可应用任何 jquery-ui 主题。

结果是这样的：

$(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"/>

【讨论】：