twitter-bootstrap-3 – 如何将bootstrap datepicker日期更改为jalali日期

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap-3 – 如何将bootstrap datepicker日期更改为jalali日期前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用bootstrap日期选择器,但不幸的是它不支持jalali日历.我在谷歌搜索转换它,但我没有找到任何有用的东西.所以我需要更改datepicker并自定义它,如下图所示.

解决方法

persian-datepicker下载文件zip persian-datepicker
然后补充说
文件zip中,示例代码可用
<script type="text/javascript" src="../lib/jquery.js"></script>
<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../lib/bootstrap/js/bootstrap.min.js"></script>
<link href="css/persian-datepicker-0.4.5.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../lib/persian-date.js"></script>
<script type="text/javascript" src="js/persian-datepicker-0.4.5.min.js"></script>

然后添加HTML代码示例

<div class="form-group col-xs-6">
<label>Select Date</label>
<input id="observer" type="text" class="form-control"/>
</div>

<div class="form-group col-xs-6">
<div id="inlineDatepicker" data-date="2016/12/13 12:20" class="col-xs-12">   </div> 
<div class="col-xs-12">
    <input id="inlineDatepickerAlt" type="text" class="form-control"/>
</div>

然后脚本jquery添加

<script type="text/javascript">
 $(document).ready(function () {    
    $("#observer").persianDatepicker({
        altField: '#observer',altFormat: "YYYY MM DD HH:mm:ss",observer: true,format: 'YYYY/MM/DD HH:mm:ss',timePicker: {
            enabled: true
        },});


    //inline datepicker
    $("#observer").css( "z-index","1000" );
    window.pd = $("#inlineDatepicker").persianDatepicker({
        timePicker: {
            enabled: true
        },altField: '#inlineDatepickerAlt',altFormat: "YYYY/MM/DD HH:mm",checkDate: function (unix) {
            var output = true;
            var d = new persianDate(unix);
            if (d.date() == 20) {
                output = false;
            }
            return output;
        },checkMonth: function (month) {
            var output = true;
            if (month == 1) {
                output = false;
            }
            return output;

        },checkYear: function (year) {
            var output = true;
            if (year == 1396) {
                output = false;
            }
            return output;
        }

    }).data('datepicker');
    $("#inlineDatepicker").pDatepicker("setDate",[1391,12,1,11,14]);

}); 
</script>

如果时间不想要
这是jquery

$("#observer").persianDatepicker({
        altField: '#observer',altFormat: "YYYY MM DD",format: 'YYYY/MM/DD',});
原文链接:https://www.f2er.com/bootstrap/233948.html

猜你在找的Bootstrap相关文章