5

ユーザーがイスラム暦 (アラビア語) カレンダーを使用して日付を入力する必要があるフォームを持つプロジェクトに取り組んでいます。そのための 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">
	<input id="date-1" type="text" />
	<button class="icon-button" onclick="showCal1();">&#x25a6;</button>
</div>
<div id="cal-2">
	<input id="date-2" type="text" />
	<button class="icon-button" onclick="showCal2();">&#x25a6;</button>
</div>

4

1 に答える 1