如何根据所选语言更改datepicker语言。

时间:2011-09-09 11:06:53

标签: jquery localization datepicker

我已成功将datepicker插入到我的网页中,现在可以顺利运行。我需要实现的是,在从语言选择器更改语言后,datepicker必须反映这一点,显示所选的语言文本。

我有以下代码,到目前为止我无法工作,因为我不太了解jquery。希望能给别人反馈

<head>
 <script type="text/javascript" src="/scripts/datepicker.core.js"></script>   
 <script type="text/javascript" src="/scripts/datepicker.jquery.ui.min.js"></script> 
 <script type="text/javascript" src="/scripts/jquery.ui.datepicker-tr.js"></script>
 <script type="text/javascript" src="/scripts/jquery.ui.datepicker-en-GB.js"></script>
</head>
<body>
    <div id="LanguageSelector">
                <form method="get" action="/"><select id="LanguageDropDownList" name="lang"  onchange="javascript:location='/?lang=' + this.options[this.selectedIndex].value" ><option value="en" selected="selected" >English (en)</option><option value="tr">Türkçe (tr)</option></select><noscript><input type="submit" value=">"></noscript></form>
    </div>

        <div class="calendar" id="datepicker"></div>

        <script type="text/javascript">
            var initialCalendar = true;
            $(function() {   
                $.datepicker.setDefaults( $.datepicker.regional[ ' ' ] );
                var eventDays = [<%=dateOfEvent%>];
                $('#datepicker').datepicker($.datepicker.regional[ 'tr' ],
                {         
                    inline: true,
                    dateFormat: 'yy-mm-dd',
                    changeMonth: true,
                    changeYear: true,
                    onSelect: function(date) {
                        if(!initialCalendar){
                            for(var i in eventDays){
                                if(eventDays[i].Date == date){
                                    window.location = eventDays[i].Url;
                                }
                            }
                        }else{
                            initialCalendar = false;
                        }
                    },
                    beforeShowDay: function(thedate) {
                        thedate = thedate.format("yyyy-MM-dd");
                        for(var i in eventDays){
                            if(eventDays[i].Date == thedate){
                                return [true,""];
                            }
                        }
                        return [false, ""];
                    }
                });

                $( '#LanguageDropDownList' ).change(function() {
                    $( '#datepicker' ).datepicker( "option",
                        $.datepicker.regional[ $( this ).val() ] );
                });
            });

            Date.prototype.format = function(format)  
            {
               var o = {
                 "M+" : this.getMonth()+1,
                 "d+" : this.getDate(),
                 "h+" : this.getHours(),
                 "m+" : this.getMinutes(),
                 "s+" : this.getSeconds(),
                 "q+" : Math.floor((this.getMonth()+3)/3),
                 "S" : this.getMilliseconds()
               }
               if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
                 (this.getFullYear()+"").substr(4 - RegExp.$1.length));
               for(var k in o)if(new RegExp("("+ k +")").test(format))
                 format = format.replace(RegExp.$1,
                   RegExp.$1.length==1 ? o[k] :
                 ("00"+ o[k]).substr((""+ o[k]).length));
               return format;
            }
         </script>
</body>

2 个答案:

答案 0 :(得分:0)

似乎工作正常:http://jsfiddle.net/repw4/936/

如果它仍然不起作用,请尝试销毁日期选择器并重新启动它:

$('#LanguageDropDownList').change(function() {
    $('#date').datepicker('destroy')
        .datepicker($.datepicker.regional[$(this).val()]);
});

查看实际操作:http://jsfiddle.net/repw4/936/

答案 1 :(得分:0)

致电&#39;销毁&#39;如果有的话可以删除一些事件。首先尝试调用'refresh'方法,它会重绘:

</update>