Hijri（阿拉伯语）使用JavaScript和MVC的日历选取器

问题描述：

我正在研究一个需要用户使用Hijri（阿拉伯语）日历输入日期的窗体项目。我已经创建了JavaScript文件来完成它，但它是英文格式。Hijri（阿拉伯语）使用JavaScript和MVC的日历选取器

我只是想用阿拉伯语。

var cal1 = new Calendar(), 
 
    cal2 = new Calendar(true, 0, false, true), 
 
    date1 = document.getElementById('date-1'), 
 
    date2 = document.getElementById('date-2'), 
 
    cal1Mode = cal1.isHijriMode(), 
 
    cal2Mode = cal2.isHijriMode(); 
 

 
document.getElementById('cal-1').appendChild(cal1.getElement()); 
 
document.getElementById('cal-2').appendChild(cal2.getElement()); 
 
cal1.show(); 
 
cal2.show(); 
 
setDateFields(); 
 

 
cal1.callback = function() { 
 
    if (cal1Mode !== cal1.isHijriMode()) { 
 
    cal2.disableCallback(true); 
 
    cal2.changeDateMode(); 
 
    cal2.disableCallback(false); 
 
    cal1Mode = cal1.isHijriMode(); 
 
    cal2Mode = cal2.isHijriMode(); 
 
    } 
 
    else 
 
    cal2.setTime(cal1.getTime()); 
 
    setDateFields(); 
 
}; 
 

 
cal2.callback = function() { 
 
    if (cal2Mode !== cal2.isHijriMode()) { 
 
    cal1.disableCallback(true); 
 
    cal1.changeDateMode(); 
 
    cal1.disableCallback(false); 
 
    cal1Mode = cal1.isHijriMode(); 
 
    cal2Mode = cal2.isHijriMode(); 
 
    } 
 
    else 
 
    cal1.setTime(cal2.getTime()); 
 
    setDateFields(); 
 
}; 
 

 
function setDateFields() { 
 
    date1.value = cal1.getDate().getDateString(); 
 
    date2.value = cal2.getDate().getDateString(); 
 
} 
 

 
function showCal1() { 
 
    if (cal1.isHidden()) cal1.show(); 
 
    else cal1.hide(); 
 
} 
 

 
function showCal2() { 
 
    if (cal2.isHidden()) cal2.show(); 
 
    else cal2.hide(); 
 
}

#cal-1, #cal-2 { 
 
    margin-left: 12px; 
 
    margin-top: 10px; 
 
} 
 
.icon-button { 
 
    width: 30px; 
 
} 
 
input { 
 
    width: 243px; 
 
    margin-bottom: 8px; 
 
}

<link href="https://ZulNs.github.io/libs/calendar.css" rel="stylesheet"/> 
 
<script src="https://ZulNs.github.io/libs/calendar.js"></script> 
 
<script src="https://ZulNs.github.io/libs/hijri-date.js"></script> 
 
<div id="cal-1"> 
 
\t <input id="date-1" type="text" /> 
 
\t <button class="icon-button" onclick="showCal1();">&#x25a6;</button> 
 
</div> 
 
<div id="cal-2"> 
 
\t <input id="date-2" type="text" /> 
 
\t <button class="icon-button" onclick="showCal2();">&#x25a6;</button> 
 
</div>

难道你的意思是在阿拉伯字母显示月份名称和日期名称？我看到'hijri-date.js'文件包含以拉丁文写成的月份名称（Muharram，Safar等），您可能需要手动将它们更改为阿拉伯语。 –

oooh，谢谢你你是Awsome它的帮助我，来解决我的问题，非常感谢 – AhmedNazeh

你好，从哪里我可以得到这个工具？ – Loai

答

你可以编写自己的辅助函数来设置的jQuery UI的日期选择器参数并写入星期名称，月份名称和其他选项，如果你愿意的话。也许编码将是一个问题，以后，需要尝试找出答案。

jQuery(function ($) { 
    $.datepicker.regional['pt-BR'] = { 
     closeText: 'Fechar', 
     prevText: '', 
     nextText: '', 
     currentText: 'Hoje', 
     monthNames: ['Janeiro', 'Fevereiro', 'Mar&ccedil;o', 'Abril', 'Maio', 'Junho', 
      'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'], 
     monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 
      'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'], 
     dayNames: ['Domingo', 'Segunda-feira', 'Ter&ccedil;a-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sabado'], 
     dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'], 
     dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'], 
     weekHeader: 'Sm', 
     dateFormat: 'dd/mm/yy', 
     firstDay: 0, 
     isRTL: false, 
     showMonthAfterYear: false, 
     yearSuffix: '', 
     changeMonth: true, 
     changeYear: true 
    }; 
    $.datepicker.setDefaults($.datepicker.regional['pt-BR']); 
});

因此，替换每个参数的文字为自己设置的插件使用的区域，并在选择初始化它，就像

$(function() { 
    $(".type-data").datepicker(); 
});

Hijri（阿拉伯语）使用JavaScript和MVC的日历选取器

相关推荐