javascript - jQuery datePicker week selection -
i have jqueryui datepicker , trying code select specific week day picked, works everyday except sundays. when select sunday, following week displayed should displaying current week. example if select may 9th range may 9 may 15, 2016 , when select 15th may 16 may 22, 2016, when think should displaying same range if selected 9th
html
<input style="display: none" name="date" type="input" id="datepick"/> <span>week of: </span> <span style="font-weight: bold" id="weekrange"> </span> <br/> m : <span id="mondaynum"></span> <br/> tu : <span id="tuesdaynum"></span> <br/> w : <span id="wednesdaynum"></span> <br/> th : <span id="thursdaynum"></span> <br/> f : <span id="fridaynum"></span> <br/> sa : <span id="saturdaynum"></span> <br/> su : <span id="sundaynum"></span> javascript
$( document ).ready(function() { //alert(t1); $("#datepick").datepicker( { showweek:true, showothermonths: true, selectothermonths: true, firstday: 1, showon: "button", buttonimage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png", buttonimageonly:true, onselect: function(datetext, inst) { var dayone,daytwo,daythree,dayfour,dayfive,daysix,dayseven; var date = $(this).datepicker('getdate'); //console.log($.datepicker.iso8601week(new date(datetext))); tempday = $.datepicker.formatdate( 'd', date); if(tempday == 'sun') { console.log("sunday"); console.log(date); console.log(tempday); dayone = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 1); // daytwo = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 2); daythree = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 3); dayfour = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 4); dayfive = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 5); daysix = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 6); dayseven = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 7); $('#weekrange').text($.datepicker.formatdate( 'm d', dayone) + " " + $.datepicker.formatdate( 'm d, yy', dayseven)); $('#mondaynum').text($.datepicker.formatdate( 'd', dayone)); $('#tuesdaynum').text($.datepicker.formatdate( 'd', daytwo)); $('#wednesdaynum').text($.datepicker.formatdate( 'd', daythree)); $('#thursdaynum').text($.datepicker.formatdate( 'd', dayfour)); $('#fridaynum').text($.datepicker.formatdate( 'd', dayfive)); $('#saturdaynum').text($.datepicker.formatdate( 'd', daysix)); $('#sundaynum').text($.datepicker.formatdate( 'd', dayseven)); $("#datepick").datepicker("setdate", dayone); } else { console.log("not sunday"); console.log(tempday); previousweek = ($.datepicker.iso8601week(date) - 1); console.log("picked day previous week: " + previousweek); console.log("current week: " + $.datepicker.iso8601week(date)); var nextweek = ($.datepicker.iso8601week(date) + 1); console.log("picked day following week: " + nextweek); console.log(datetext); dayone = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 1); daytwo = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 2); daythree = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 3); dayfour = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 4); dayfive = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 5); daysix = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 6); dayseven = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 7); } console.log("2nd: " + daytwo); console.log("3rd: " + daythree); console.log("4th: " + dayfour); console.log("5th: " + dayfive); console.log("6th: " + daysix); console.log("7th: " + dayseven); var dateformat = inst.settings.dateformat || $.datepicker._defaults.dateformat; //console.log($.datepicker.formatdate( 'm d', monday, inst.settings ) + " " + $.datepicker.formatdate( 'm d, yy', sunday, inst.settings )); $('#weekrange').text($.datepicker.formatdate( 'm d', dayone, inst.settings ) + " " + $.datepicker.formatdate( 'm d, yy', dayseven, inst.settings )); $('#mondaynum').text($.datepicker.formatdate( 'd', dayone)); $('#tuesdaynum').text($.datepicker.formatdate( 'd', daytwo)); $('#wednesdaynum').text($.datepicker.formatdate( 'd', daythree)); $('#thursdaynum').text($.datepicker.formatdate( 'd', dayfour)); $('#fridaynum').text($.datepicker.formatdate( 'd', dayfive)); $('#saturdaynum').text($.datepicker.formatdate( 'd', daysix)); $('#sundaynum').text($.datepicker.formatdate( 'd', dayseven)); $("#datepick").datepicker("setdate", dayone); //alert($.datepicker.formatdate( 'd', dayone, inst.settings )); } }); //console.log("1st: " + dayone); $("#datepick").datepicker("setdate", new date()); var date = $("#datepick").datepicker('getdate'); //console.log(test); dayone = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 1); daytwo = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 2); daythree = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 3); dayfour = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 4); dayfive = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 5); daysix = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 6); dayseven = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 7); $('#weekrange').text($.datepicker.formatdate( 'm d', dayone) + " " + $.datepicker.formatdate( 'm d, yy', dayseven)); //console.log("1st: "+ bob); });
since it's off 1 day, caused setting first day of week monday, fix subtracting 1 day selected date.
var date = $(this).datepicker('getdate'); date = new date(date.getfullyear(), date.getmonth(), date.getdate() - 1); in action:
var t1; $(document).ready(function() { $("#datepick").datepicker({ showweek: true, showothermonths: true, selectothermonths: true, firstday: 1, showon: "button", buttonimage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png", buttonimageonly: true, onselect: function(datetext, inst) { var dayone, daytwo, daythree, dayfour, dayfive, daysix, dayseven; // subtract 1 day account different first day of week var date = $(this).datepicker('getdate'); date = new date(date.getfullyear(), date.getmonth(), date.getdate() - 1); var tempday = $.datepicker.formatdate('d', date); var previousweek = ($.datepicker.iso8601week(date) - 1); var nextweek = ($.datepicker.iso8601week(date) + 1); dayone = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 1); daytwo = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 2); daythree = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 3); dayfour = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 4); dayfive = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 5); daysix = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 6); dayseven = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 7); var dateformat = inst.settings.dateformat || $.datepicker._defaults.dateformat; $('#weekrange').text($.datepicker.formatdate('m d', dayone, inst.settings) + " " + $.datepicker.formatdate('m d, yy', dayseven, inst.settings)); $('#mondaynum').text($.datepicker.formatdate('d', dayone)); $('#tuesdaynum').text($.datepicker.formatdate('d', daytwo)); $('#wednesdaynum').text($.datepicker.formatdate('d', daythree)); $('#thursdaynum').text($.datepicker.formatdate('d', dayfour)); $('#fridaynum').text($.datepicker.formatdate('d', dayfive)); $('#saturdaynum').text($.datepicker.formatdate('d', daysix)); $('#sundaynum').text($.datepicker.formatdate('d', dayseven)); $("#datepick").datepicker("setdate", dayone); } }); $("#datepick").datepicker("setdate", new date()); var date = $("#datepick").datepicker('getdate'); dayone = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 1); daytwo = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 2); daythree = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 3); dayfour = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 4); dayfive = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 5); daysix = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 6); dayseven = new date(date.getfullyear(), date.getmonth(), date.getdate() - date.getday() + 7); $('#weekrange').text($.datepicker.formatdate('m d', dayone) + " " + $.datepicker.formatdate('m d, yy', dayseven)); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <input style="display: none" name="date" type="input" id="datepick" /> <span>week of: </span> <span style="font-weight: bold" id="weekrange"> </span> <br/>m : <span id="mondaynum"></span> <br/>tu : <span id="tuesdaynum"></span> <br/>w : <span id="wednesdaynum"></span> <br/>th : <span id="thursdaynum"></span> <br/>f : <span id="fridaynum"></span> <br/>sa : <span id="saturdaynum"></span> <br/>su : <span id="sundaynum"></span>
Comments
Post a Comment