Question

我已将eternicode bootstrap date picker安装到测试表单中。这很有效。

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

确切的操作是在eternicode沙盒上显示here。如果用户更改了语言选择列表，则日期选择器的语言将更改为所选语言，而不会重新刷新页面。

我试图让这个在我的表单上工作，但是无法弄清楚如何在没有页面重新刷新的情况下让它在我的表单上工作。我查看了源代码，但找不到它 - 也许是b / c我不是很擅长javascript。

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

以下是我的相关选择列表代码：

<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');

我希望比我聪明的人可以告诉我如何让这个工作。

Answer 1

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

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

1 个答案: