JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td>Select Week:</td>
<td><select name="dateentryweek" id="entryweek1" onclick="javascript:loadWeekOnly2()"">
<option value=""></option><option value="2013-07-01">Week 1</option><option value="2013-07-08">Week 2</option><option value="2013-07-15">Week 3</option><option value="2013-07-22">Week 4</option>
<option value="2013-07-29">Week 5</option><option value="2013-08-05">Week 6</option><option value="2013-08-12">Week 7</option><option value="2013-08-19">Week 8</option>
<option value="2013-08-26">Week 9</option><option value="2013-09-02">Week 10</option><option value="2013-09-09">Week 11</option><option value="2013-09-16">Week 12</option>
<option value="2013-09-23">Week 13</option><option value="2013-09-30">Week 14</option><option value="2013-10-07">Week 15</option><option value="2013-10-14">Week 16</option>
<option value="2013-10-21">Week 17</option><option value="2013-10-28">Week 18</option><option value="2013-11-04">Week 19</option><option value="2013-11-11">Week 20</option>
<option value="2013-11-18">Week 21</option><option value="2013-11-25">Week 22</option><option value="2013-12-02">Week 23</option><option value="2013-12-09">Week 24</option>
<option value="2013-12-16">Week 25</option><option value="2013-12-23">Week 26</option><option value="2013-12-30">Week 27</option><option value="2014-01-06">Week 28</option>
<option value="2014-01-13">Week 29</option><option value="2014-01-20">Week 30</option><option value="2014-01-27">Week 31</option><option value="2014-02-03">Week 32</option>
<option value="2014-02-10">Week 33</option><option value="2014-02-17">Week 34</option><option value="2014-02-24">Week 35</option><option value="2014-03-03">Week 36</option>
<option value="2014-03-10">Week 37</option><option value="2014-03-17">Week 38</option><option value="2014-03-24">Week 39</option><option value="2014-03-31">Week 40</option>
<option value="2014-04-07">Week 41</option><option value="2014-04-14">Week...
JavaScript
$(document).ready(function () {
function myWeekCalc(date) {
var checkDate = new Date(date.getTime());
// Find
checkDate.setDate(checkDate.getDate() + 185 - (checkDate.getDay()));
var time = checkDate.getTime();
checkDate.setMonth(0); // Compare with Jan 1
checkDate.setDate(1);
return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
}
jQuery('input[name=selectweek1]').datepicker({
dateFormat: 'yy-mm-dd',
changeYear:true,
changeMonth:true,
firstDay: 1,
calculateWeek: myWeekCalc,
showWeek:true,
minDate: new Date(2013, 6, 1),
maxDate: new Date(2014, 5, 29)
});
jQuery('input[name=selectweek2]').datepicker({
dateFormat: 'yy-mm-dd',
changeYear:true,
changeMonth:true,
firstDay: 1,
calculateWeek: myWeekCalc,
showWeek:true,
minDate: new Date(2013, 6, 1),
maxDate: new Date(2014, 5, 29)
});
$('#entryweek1').change( function(){
$('#inputweek1').val( $(this).val() );
}).click( function(){
$('#inputweek1').val( $(this).val() );
});
$('#entryweek2').change( function(){
$('#inputweek2').val( $(this).val() );
}).click( function(){
$('#inputweek2').val( $(this).val() );
});
document.getElementById("radioboxselectweek").checked = false;
document.getElementById("radioboxselectrange").checked = false;
});
function loadWeekOnly() {
document.getElementById("radioboxselectweek").checked = true;
document.getElementById("radioboxselectrange").checked = false;
document.getElementById("inputweek1").value="";
document.getElementById("inputweek2").value="";
}
function loadRangeOnly() {
document.getElementById("radioboxselectweek").checked = false;
document.getElementById("radioboxselectrange").checked = true;
document.getElementById("entryweek1").value="";
document.getElementById("entryweek2").value="";
}
function loadWeekOnly1() {
document.getElementById("radioboxselectweek").checked =...