eternicode日期选择器-动态更改语言

eternicode date picker - dynamically change language

本文关键字:语言 动态 日期 选择器 eternicode      更新时间:2023-09-26

我已经在测试表单中安装了eternicode引导日期选择器。这运行得很好。

我现在想在用户更改表单上的语言选择列表时动态更改日期选择器的语言。

确切的操作显示在这里,在eternicode砂箱上。如果用户更改语言选择列表,则日期选择器的语言将更改为所选语言,而不会重新刷新页面。

我已经尝试过让它在我的表单上运行,但如果没有页面刷新,我就不知道如何让它在表单上运行。我看过源代码,但找不到它——也许b/c我不太擅长javascript。

我已经将eternicode引导日期选择器的语言文件安装到测试表单中。

这是我拥有的相关选择列表代码:

<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>

以下是我必须将日期选择器添加到表单上的文本字段的javascript代码:

    $( "#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');

我希望有比我更聪明的人能告诉我如何做到这一点

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" />