JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Localize calendar</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link rel="stylesheet" href="/--stylesheets/ta_date.css">
<link rel="stylesheet" href="/--stylesheets/custom-theme/jquery-ui-1.8.24.custom.css">
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/i18n/jquery-ui-i18n.js"></script>
</head>
<body>
<p>Play around..<br>
I set the date to 1. Jan 2013 because that is where the bug is visible. <b>1st till 5th Jan 2013 never belongs to 52th week of 2012 ;-)</b> Each date belongs to its week! indipendent of how the weeks are shown, right?! Hm.. how to solve that? ..Now it seams that calculateWeek checks the first date in row. Maybe better to check maybe for monday in each row!? A Problem/Choice anyway..</p>
<hr>
<div id="datepicker" />
<select id="locale">
<option value="en-GB">English</option>
<option value="de">German (Deutsch)</option>
</select>
<select id="debug">
<option value="bug">orginal buggy</option>
<option value="fix">my fix</option>
</select>
<p title="calculateWeek checks these days" id="calculateWeek_date">calculateWeek checks these days: </p>
</body>
</html>
JavaScript
var bug_flag = true;
$(function() {
$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
$( "#datepicker" ).datepicker( $.datepicker.regional[ "de" ] );
$( "#datepicker" ).datepicker( "option", "showWeek", true );
$( "#datepicker" ).datepicker( "option", "firstDay", 0 );
$( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#datepicker" ).datepicker( "option", "calculateWeek", myWeekCalc );
$( "#datepicker" ).datepicker( "setDate", "13-01-01" );
$( "#locale" ).change(function() {
$( "#datepicker" ).datepicker( "option",
$.datepicker.regional[ $( this ).val() ] );
$( "#datepicker" ).datepicker( "option", "showWeek", true );
$( "#datepicker" ).datepicker( "option", "firstDay", 0 );
$( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#datepicker" ).datepicker( "option", "calculateWeek", myWeekCalc );
$("#calculateWeek_date").html('');
});
bug_flag = true;
$( "#debug" ).change(function() {
if ($( this ).val() == 'bug')
bug_flag = true;
else
bug_flag = false;
$("#calculateWeek_date").html('');
$( "#datepicker" ).datepicker( "refresh" );
});
});
function myWeekCalc(date) {
$("#calculateWeek_date").append('' +$.datepicker.formatDate('yy-mm-dd',date)+', ');
if(bug_flag) {
// using orginal function
return $.datepicker.iso8601Week( date);
} else {
// this is my fix
var myDate=new Date(date);
myDate.setDate(date.getDate()+1);
return $.datepicker.iso8601Week( myDate );
}
}