javascriptとMVCを使用したHijri（アラビア語）カレンダー日付ピッカー

Question

私はHijri（アラビア語）カレンダーを使用して日付を入力する必要があるフォームを持つプロジェクトに取り組んでいます。 JavaScriptファイルを作成しましたが、英語の形式です。

アラビア語で欲しいだけです。

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>

Answer 1

あなたはjQueryのUIのDatePickerのパラメータを設定し、あなたがしたい場合は曜日名、月名や他のオプションを記述するために、独自のヘルパー関数を書くことができます。たぶん、エンコードは後で問題になるでしょう、調べる必要があります。

jQuery(function ($) { 
    $.datepicker.regional['pt-BR'] = { 
     closeText: 'Fechar', 
     prevText: '', 
     nextText: '', 
     currentText: 'Hoje', 
     monthNames: ['Janeiro', 'Fevereiro', 'Març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ç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(); 
});