【问题标题】:eternicode date picker - dynamically change languageeternicode 日期选择器 - 动态更改语言
【发布时间】:2014-11-12 01:18:53
【问题描述】:

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

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

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

我试图让它在我的表单上工作,但不知道如何在不重新刷新页面的情况下让它在我的表单上工作。我查看了源代码,但找不到它 - 也许 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');

我希望比我更聪明的人能告诉我如何让它发挥作用。

【问题讨论】:

  • 将数据传递给 javascript,将其保存在变量中,并让语言属性依赖于该变量。
  • 我了解这个概念,但不了解实际的方法。告诉我怎么做。
  • 如何将任何数据传递给 javascript?
  • 嗯,这就是我要问的关于如何做到这一点的建议!这就是您在之前评论中的建议。
  • 你试过了吗google.com我是想帮你找到答案和学习,而不是复制粘贴代码。

标签: javascript jquery twitter-bootstrap datepicker


【解决方案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" />

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-05-31
    • 1970-01-01
    • 1970-01-01
    • 2017-08-29
    • 1970-01-01
    • 2017-12-22
    • 2020-08-15
    相关资源
    最近更新 更多