2014-11-12 6 views
2

eternicode bootstrap date picker을 테스트 폼에 설치했습니다. 이것은 잘 작동하고 있습니다.eternicode date picker - 동적 언어 변경

사용자가 양식의 언어 선택 목록을 변경할 때 날짜 선택 도구의 언어를 동적으로 변경하려고합니다.

정확한 작업은 eternicode 샌드 박스에 show here입니다. 사용자가 언어 선택 목록을 변경하면 날짜 선택 도구의 언어가 페이지를 새로 고침하지 않고 선택한 언어로 변경됩니다.

이 양식을 내 양식에서 작동 시키려고했으나 페이지를 새로 만들지 않고 양식에서 작동하도록하는 방법을 알아낼 수 없습니다. 나는 소스 코드를 살펴 봤지만 찾을 수 없었다. 아마 b/c 나는 자바 스크립트가 좋지 않다.

eternicode 부트 스트랩 날짜 선택 도구의 언어 파일을 테스트 양식에 설치했습니다.

$("#id_test_finish_date").datepicker({ 

     autoclose: true, 
     changeMonth: true, 
     changeYear: true, 
     clearBtn: true, 
     endDate: '01/2900', 
     format: 'mm/yyyy', 
     language: 'en', 
     minViewMode: 1, 
     startView: 2, 
     startDate: '01/1965', 

    }).attr('readonly','readonly'); 

: 여기

<select name="language_code" id="id_language_code" > <option value="ar">Arabic - العربية</option> <option value="en-GB">English (UK) - English (UK)‎</option> <option value="en" selected="selected">English (US)</option> <option value="fr-CA">French (Canada) - français (Canada)‎</option> <option value="fr">French (France) - français (France)‎</option> <option value="de">German - Deutsch</option> <option value="it">Italian - italiano</option> <option value="pl">Polish - polski</option> <option value="pt-BR">Portuguese (Brazil) - português (Brasil)‎</option> <option value="pt">Portuguese (Portugal) - português (Portugal)‎</option> <option value="ru">Russian - pусский</option> <option value="es">Spanish (Spain) - español (España)‎</option> </select> 

내가 내 양식에 내 텍스트 필드에 날짜 선택기를 추가 할 필요가 자바 스크립트 코드 : 여기

내가 가진 그 관련 선택 목록 코드 나는 나보다 똑똑한 사람이 나에게이 일을하는 법을 보여줄 수 있기를 바라고있다.

+0

는, 자바 스크립트에 데이터를 전달 변수에 저장하고, 언어 속성에 따라 달라질 수 있습니다 그 변수. – Aaron

+0

나는 개념을 이해하지만 실제 방법론은 이해하지 못한다. 어떻게하는지 보여줘. – user3354539

+0

어떻게 모든 데이터를 자바 스크립트로 전달하겠습니까? – Aaron

답변

2

http://jsfiddle.net/pc9barL0/

JQ :

//datepicker localization files: 
//https://github.com/eternicode/bootstrap-datepicker/tree/master/js/locales 

//how to localize plugin 
//http://bootstrap-datepicker.readthedocs.org/en/latest/i18n.html 

//required files 
//on the left side JSFIDDLE click on the External Resources to see the required files 

$("#id_test_finish_date").datepicker({ 
    autoclose: true,  
    clearBtn: true, 
    endDate: '01/01/2900', 
    format: 'dd/mm/yyyy', 
    startDate: '01/01/1965'} 
).attr('readonly','readonly'); 


$("#id_language_code").change(function() { 
    $element=$("#id_test_finish_date"); 

    $element.datepicker('remove'); 
    $element.datepicker({language: $(this).val()}); 
}); 

HTML :

<select name="language_code" id="id_language_code" > 
    <option value="ar">Arabic - العربية</option>  
    <option value="en" selected="selected">English (US)</option>  
    <option value="fr">French (France) - français (France)‎</option> 
    <option value="ru">Russian - pусский</option>  
    <option value="rs">Serbian - српски</option>  
</select> 
<br/><br/> 
<input type="text" id="id_test_finish_date" /> 
+0

감사합니다 dm4web, 그 코드는 잘 작동합니다! – user1261774

관련 문제