2016-09-26 5 views
4

사용자가 Hijri (아랍어) 달력을 사용하여 날짜를 입력해야하는 양식의 프로젝트를 진행 중입니다. JavaScript 파일을 이미 만들었지 만 영어 형식입니다.자바 스크립트 및 MVC를 사용하는 Hijri (아랍어) 달력 날짜 선택 도구

나는 아랍어로 원한다.

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>

+0

처럼 선택의 초기화 ? 'hijri-date.js' 파일에 라틴어 (Muharram, Safar 등)로 작성된 월 이름이 포함되어 있으므로 수동으로 아랍어로 변경해야 할 수 있습니다. –

+0

우우, 고마워, 너 고맙다. 내게 도움이된다. 내 문제를 해결하기 위해 , 고마워. – AhmedNazeh

+0

안녕하세요.이 도구를 어디에서 구할 수 있습니까? – Loai

답변

0

당신은 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(); 
});