How to change datepicker language based on selected language.?
I have successful inserted datepicker into my webpage and it works smoothly now. What I need to achieve is that after changing the language from language selector, datepicker must reflect this, show the selected language text.
I have the following code, I could not manage to work it so far cause I do not know jquery well. Hope to give someone feedback
<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(),
开发者_如何学JAVA "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>
It seems to be working fine as well: http://jsfiddle.net/repw4/936/.
If it still doesn't work for you, try to destroy the datepicker and re-initiate it:
$('#LanguageDropDownList').change(function() {
$('#date').datepicker('destroy')
.datepicker($.datepicker.regional[$(this).val()]);
});
See it in action: http://jsfiddle.net/repw4/936/
Calling the 'destroy' could remove some events if any. Try calling the 'refresh' method first, it will do a redraw:
$('#date').datepicker('refresh')
加载中,请稍侯......
精彩评论