title: Hijri (Arabic) calendar date picker using javascript and MVC
body: <p>I am working on a project that has a form which requires the user to input a date using the Hijri (Arabic) calendar.
  I have already created JavaScript files to do it, but it's in English format.</p>
  
  <p>I just want it in Arabic.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#cal-1, #cal-2 {
    margin-left: 12px;
    margin-top: 10px;
  }
  .icon-button {
    width: 30px;
  }
  input {
    width: 243px;
    margin-bottom: 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://ZulNs.github.io/libs/calendar.css" rel="stylesheet"/&gt;
  &lt;script src="https://ZulNs.github.io/libs/calendar.js"&gt;&lt;/script&gt;
  &lt;script src="https://ZulNs.github.io/libs/hijri-date.js"&gt;&lt;/script&gt;
  &lt;div id="cal-1"&gt;
   &lt;input id="date-1" type="text" /&gt;
   &lt;button class="icon-button" onclick="showCal1();"&gt;&amp;#x25a6;&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="cal-2"&gt;
   &lt;input id="date-2" type="text" /&gt;
   &lt;button class="icon-button" onclick="showCal2();"&gt;&amp;#x25a6;&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>