jquery - 使用波斯(jalaali)日历填充 JQuery datetimepicker

Question

我想使用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”选项，仅更改日历的语言。

我必须用波斯日历填充日历，但我完全不知道如何操作。

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

但是:由于此存储库想要为日期选择器添加 twitter 引导主题，因此日期选择器中的一些类名称已更改为与 twitter 引导主题一起使用。但这不是我想要的。我希望能够使用 jquery ui 主题。所以我 fork 了 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"/>