Hijri (Arabic) calendar date picker, используя javascript и MVC

Я работаю над проектом, который имеет форму, которая требует, чтобы пользователь вводил дату, используя календарь Hijri (Арабский). Я уже создал файлы JavaScript для этого, но это в английском формате.Hijri (Arabic) calendar date picker, используя 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>

источник

2016-09-26 AhmedNazeh

Вы имеете в виду отображение месяц имя и название дня арабскими буквами ? Я вижу, что файл hijri-date.js содержит имена месяцев, написанные как латинские (Muharram, Safar и т. Д.), Вам может потребоваться изменить их на арабский вручную. –

oooh, спасибо, что ты помог мне, , чтобы решить мою проблему, большое спасибо – AhmedNazeh

привет, откуда я могу получить этот инструмент? – Loai

Вы можете написать свою собственную вспомогательную функцию, чтобы установить параметры Datepicker 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(); 
});

источник

2017-10-03 17:07:31 Tiramonium

Hijri (Arabic) calendar date picker, используя javascript и MVC

ответ

Смежные вопросы