Navigating between weeks on jquery datepicker via external buttons - javascript

I am working on asp.net mvc. I am trying to show a datepicker in a web page, along with two buttons i.e. previous and next which are for navigating between weeks in datepicker. I am able to show datepicker and able to select total week dates based on user selected date, like
$('#txtSrchFrom').datepicker({
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function (dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
$('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
if (startDate.getMonth() == endDate.getMonth()) {
$('#txtSrchFrom').val(getMonthName(startDate.getMonth()) + " " + startDate.getDate() + " - " + endDate.getDate() + ", " + startDate.getFullYear());
}
else {
$('#txtSrchFrom').val(getMonthName(startDate.getMonth()) + " " + startDate.getDate() + " - " + getMonthName(endDate.getMonth()) + " " + endDate.getDate() + ", " + startDate.getFullYear());
}
selectCurrentWeek();
},
beforeShowDay: function (date) {
var cssClass = '';
if (date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function (year, month, inst) {
selectCurrentWeek();
}
});
$('#txtSrchFrom .ui-datepicker-calendar tr').live('mousemove', function () { $(this).find('td a').addClass('ui-state-hover'); });
$('#txtSrchFrom .ui-datepicker-calendar tr').live('mouseleave', function () { $(this).find('td a').removeClass('ui-state-hover'); });
and here is my markup,
<input type="button" class="btn btn-info" value="<< Prev" />
<div class="input-group" style="width: 220px;">
<input type="text" class="form-control" id="txtSrchFrom" name="txtSrchFrom" readonly="readonly" placeholder="Search by From Date" />
<span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>
<input type="button" class="btn btn-info" value="Next >>" onclick="return gotoNextweek();"/>
<br />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
Suppose I am currently in 1st week, and when i click on next button i need to switch to next week and all dates in that week needs to be selected. and previous button needs to work in a similar way. I have tried it by setting the endDate + 7 days to datepicker like,
function gotoNextweek() {
var $picker = $("#txtSrchFrom");
var date = new Date($picker.datepicker('getDate'));
date.setDate(endDate.getDate() + 7);
return false;
}
but it doesn't works for me. Please guide me, how to achieve this.

If you just want to add 7 days to the current selected date use:
var new_date = $("#datepicker").datepicker( "getDate" );
new_date = new_date.setDate(new_date.getDate()+7);
new_date = new Date(new_date);
$( "#datepicker" ).datepicker( "setDate", new_date );

The date returned from $picker.datepicker('getDate') is already a date object, you can't pass it to new Date() once more
$('#next, #prev').on('click', function(e) {
var date = $('#datepicker').datepicker('getDate');
e.target.id == 'next' ? date.setDate(date.getDate()+7) : date.setDate(date.getDate()-7);
$('#datepicker').datepicker('setDate', date );
});
FIDDLE

Related

select date from datepicker after i want next year date in next field

from date selected by the datepicker in dd-mm--yy format after this i need next year date with -1 day..i.e From:29-07-2016 then To:28-07-2016 like this...please guyz help me..i m sharing my source code
$('#oldDate').on('change', function(e){
var oldDate = new Date(this.value);
$('.datepicker').datepicker({dateFormat:'dd-mm-yy'});
$('#old').html(new Date(oldDate));
oldDate.setDate(oldDate.getDate()-1);
oldDate.setFullYear(oldDate.getFullYear()+1);
var day = ("0" + oldDate.getDate()).slice(-2);
var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);
var today = oldDate.getFullYear()+"-"+(month)+"-"+(day);
// var today = oldDate.(day)+"-"+(month)+"-"+getFullYear();
// alert(today);
$('#new').val(today);
<p class="left">
<label for="from">FROM:</label>
<input type="text" name="from" id="oldDate" class="datepicker"/>
</p>
<p class="pull-right">
<label for="to">TO:</label>
<input type="text" name="to" id="new">
</p>
To achieve expected result, use datepicker and then use on change function to make work
JS:
$('.datepicker').datepicker({
dateFormat: 'dd-mm-yy'
}).datepicker("setDate", "0");
$('#oldDate').click(function() {
$('#oldDate').datepicker('setDate', new Date());
});
$('#oldDate').on('change', function(e) {
console.log(this.value)
var x = this.value;
var from = x.split("-");
var f = new Date(from[2], from[1] - 1, from[0]);
var oldDate = new Date(f);
$('#old').html(new Date(oldDate));
oldDate.setDate(oldDate.getDate() - 1);
oldDate.setFullYear(oldDate.getFullYear() + 1);
console.log(oldDate)
var day = ("0" + oldDate.getDate()).slice(-2);
var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);
var today = (day) + "-" + (month) + "-" + oldDate.getFullYear();
// var today = oldDate.(day)+"-"+(month)+"-"+getFullYear();
// alert(today);
$('#new').val(today);
});
Codepen-http://codepen.io/nagasai/pen/XKBZmN
Check this :
<script type="text/javascript">
var dt = new Date('2016/12/10');
var month = dt.getMonth()+1;
var day = dt.getDate()-1;
var year = dt.getFullYear()+1;
alert(month + '-' + day + '-' + year);
</script>

Showing dynamic rates for all dates using jquery ui calendar

In a Car Rental Website Reservation System, i am using jquery ui calendar as a date range picker for "From Date" and "To Date" selection.
I want to show dynamic rates for different dates as shown in figure. Please let me know how i can do that ?
<input type="text" id="booking-from" name="booking-from" />
<input type="text" id="booking-to" name="booking-to" />
$( "#booking-from" ).datepicker({
defaultDate: "+1w",
minDate: 0,
firstDay: 0,
dateFormat: 'dd-mm-yy',
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
/*var day1 = $("#booking-from").datepicker('getDate').getDate() + 1;
var month1 = $("#booking-from").datepicker('getDate').getMonth();
var year1 = $("#booking-from").datepicker('getDate').getFullYear();
year1 = year1.toString().substr(2,2);
var fullDate = day1 + "-" + month1 + "-" + year1;*/
var minDate = $(this).datepicker('getDate');
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$( "#booking-to" ).datepicker( "option", "minDate", newMin );
}
});
$( "#booking-to" ).datepicker({
defaultDate: "+1w",
minDate: '+2d',
changeMonth: true,
firstDay: 0,
dateFormat: 'dd-mm-yy',
numberOfMonths: 1,
onClose: function( selectedDate ) {
var maxDate = $(this).datepicker('getDate');
var newMax = new Date(maxDate.setDate(maxDate.getDate() - 1));
$( "#booking-from" ).datepicker( "option", "maxDate", newMax);
}
});
$("#booking-from").datepicker('setDate', '+1');
$("#booking-to").datepicker('setDate', '+8');
Fiddle
I have manage it using jQuery Datepicker by Keith Wood library
$('#startPicker,#endPicker').datepick({
onSelect: customRange, onDate: showDayOfYear, showTrigger: '#calImg'
});
function customRange(dates) {
if (this.id === 'startPicker') {
console.log(dates[0]);
$('#endPicker').datepick('option', 'minDate', dates[0] || null);
}
else {
$('#startPicker').datepick('option', 'maxDate', dates[0] || null);
}
}
function pad(n) {
return n < 10 ? '0' + n : n
}
var specificPrices = {"2016-06-12": "$300", "2016-06-26": "$63", "2016-07-26": "$63", "2016-07-15": "$63", "2016-08-16": "$63"}
function showDayOfYear(date) {
var checkDate = date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate()); //2015-12-04
var specificPrice;
if (specificPrices[checkDate]) {
specificPrice = specificPrices[checkDate];
} else {
specificPrice = '';
}
return {
content: date.getDate() + '<br><sub>' + specificPrice + '</sub>', dateClass: 'showDoY'
}
HTML
<p><span class="demoLabel">Date range with separate fields:</span></p>
<input type="text" id="startPicker"> to
<input type="text" id="endPicker">
jsfiddle Link

How to assign a specific date to a textbox using jquery

I have a jQuery function that assigns today's date to a textbox when a radio button is clicked.
In the example below, when the radio button value is "I", the Date Inactive date is today. When the radio button value is "A", the Date Active date is also today.
I am trying to introduce another action: when the radio button value is "A" I want to make id DNE to be equal to "12-31" of the current year (so in this case, "12-31-2016").
Since I wasn't sure how to do that, I entered ??? as the value. Thanks for any help.
Date.prototype.yyyymmdd = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + dd[1]?dd:"0"+dd[0]); // padding
};
$(document).ready(function(){
var d = new Date();
$(".Status").change(function () {
if ($(this).val() == "I")
$("#Date_Inactive").val(d.yyyymmdd());
if ($(this).val() == "A")
$("#Date_Accepted").val(d.yyyymmdd());
$("#DNE").val(???);
});
});
P.S: notice that you're missing an ( in
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + dd[1]?dd:"0"+dd[0]);
// Missing ( ^^^ HERE
Otherwise:
$("#DNE").val( d.yyyymmdd().substring(5, 10) );
Date.prototype.yyyymmdd = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);
};
$(function(){
var d = new Date();
$(".Status").change(function () {
if ($(this).val() == "I")
$("#Date_Inactive").val( d.yyyymmdd() );
if ($(this).val() == "A")
$("#Date_Accepted").val( d.yyyymmdd() );
$("#DNE").val( d.yyyymmdd().substring(5, 10) );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="dateRadio" value="I" class="Status">
<input type="radio" name="dateRadio" value="A" class="Status">
<br>
<input type="text" id="Date_Inactive"> inactive <br>
<input type="text" id="Date_Accepted"> accepted<br>
<input type="text" id="DNE">DNE
Or if you want to do it without the func - here you go:
$("#DNE").val('12-31-'+new Date().getFullYear());

how to set date to input field using another date input field?

I have two input fields fromDate and toDate(both are date).I am using datepicker for input field fromDate. toDate is readonly and is dependent on the fromDate.That is date of toDate is is 6+.For example,if fromDate is 11/30/2014 then toDate is 12/6/2014.
My jsp code is
<input type="text" class="form-control dpd1" id="fromDate" name="fromDate">
<span class="input-group-addon">To</span>
<input type="text" class="form-control dpd2" id="toDate" name="toDate" readonly/>
and js code is:$('.dpd1').datepicker();
Thanks
You can do this with jQuery and change(). In change, You can get the value of fromDate and with Date object create new value for the toDate input.
$(function() {
$('#fromDate').change(function() {
var fromDateValue = $(this).val();
var toDateValue = new Date();
// some operations
$('#toDate').val(yourToDate);
});
})
You can add 6 days with this:
var today = new Date();
var todayplus6days= new Date(today);
todayplus6days.setDate(today.getDate()+6);
UPDATE:
jsFiddle: http://jsfiddle.net/8dx0sLey/1/
$(function() {
$('#fromDate').change(function() {
var fromDateValue = $(this).val();
var toDateValue = new Date(fromDateValue);
toDateValue.setDate(toDateValue.getDate()+6);
var sDate = toDateValue.getFullYear() + '-' + (toDateValue.getMonth()+1) + '-' + toDateValue.getDate();
$('#toDate').val(sDate);
});
})
I think you're looking for this.
$("#from").datepicker({
onClose: function (selectedDate, instance) {
if (selectedDate != '') { //added this to fix the issue
$("#to").datepicker("option", "minDate", selectedDate);
var date = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings);
date.setDate(date.getDate() + 6);
console.log(selectedDate, date);
$("#to").datepicker("option", "minDate", date);
}
}
});
I tried using input type date:
http://jsfiddle.net/washington_guedes/dafbz0qo/
$(document).ready(function(){
$("#fromDate").on("blur", function(){
var year = parseInt( $(this).val().substring(0,4) );
var month = parseInt( $(this).val().substring(5,7) );
var day = parseInt( $(this).val().substring(9,11) );
month += 6;
if( month > 12){
month %= 12;
year++;
}
$("#toDate").val(year + "-" +
((month<10)?"0":"") +
month + "-" +
((day<10)?"0":"") + day);
});
});
Code:
$('#fromDate').datepicker();
$('#fromDate').change(function(){
var toDate = new Date($(this).val());
toDate.setDate(toDate.getDate()+6);
month = toDate.getMonth()+ 1;
year = toDate.getFullYear();
$('#toDate').val(month+'/'+toDate.getDate()+'/'+year );
});
Demo

How to get datepicker to be highlighted upon refresh

I have a datepicker that highlights a selected week. It is using an ajax request. Which is where I am having a problem. When I select a week i.e. 29/08/11 and the page refreshes the highlighted week is no longer highlighted.
Datepicker.js
$(function()
{
var startDate;
var endDate;
var selectCurrentWeek = function()
{
window.setTimeout(function () { $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')}, 1000);
}
function check(d) {
if(d.length() == 2) {
dd = d;
return dd;
} else {
dd = "0" + myDateParts[0];
return dd;
}
}
var selectedWeek;//remember which week the user selected here
$('.week-picker').datepicker( {
beforeShowDay: $.datepicker.noWeekends,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = 'yy-mm-dd'
var newDate = $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
var oldDate = document.getElementById('startDate');
var date_textnode = oldDate.firstChild;
var date_text = date_textnode.data;
myDateParts = date_text.split("-");
var dd = myDateParts[2];
var mm = myDateParts[1];
var yy = myDateParts[0];
selectCurrentWeek();
window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd; <<
At this point above this is where the window is refreshed and it GETs the URL. So that when I select a date it outputs like the following http://0.0.0.0:3000/timesheet?week_commencing=2011-09-05
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
index.html.erb
window.onload = function getURL(){
var url = document.location.href;
urlSplit = url.split("/timesheet");
if(urlSplit[1]== "")
{
var d = getMonday(new Date());
dd = zeroPad(d.getDate(),2);
mm = zeroPad(d.getMonth()+1,2);
yy = d.getFullYear();
document.getElementById('startDate').innerHTML = yy + "-" + mm + "-" + dd;
//window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;
}
else
{
week = url.split("week_commencing=");
//return week[1];
document.getElementById('startDate').innerHTML = week[1];
}
}
Note
The window.onload URL function gets the week commencing from the url
Jsfiddle - Including datepicker
http://jsfiddle.net/YQ2Zw/12/
Update
You can use the defaultDate to set the initial date selected on the datepicker, and simulate a click event on the calendar to highlight the week:
var selectDate = '09/29/2011';
$('.week-picker').datepicker({
defaultDate: selectDate
}).click(function(event) {
// highlight the TR
$(".ui-datepicker-current-day").parent().addClass('highlight');
// highlight the TD > A
$(".ui-datepicker-current-day:eq(0)").siblings().find('a').addClass('white');
}).click();
Example: http://jsfiddle.net/william/YQ2Zw/15/
Update
Assuming Datepicker.js is loaded in timesheet, you should be able to do that with two more lines:
window.onload = function getURL(){
var url = document.location.href;
urlSplit = url.split("/timesheet");
if(urlSplit[1]== "")
{
var d = getMonday(new Date());
dd = zeroPad(d.getDate(),2);
mm = zeroPad(d.getMonth()+1,2);
yy = d.getFullYear();
document.getElementById('startDate').innerHTML = yy + "-" + mm + "-" + dd;
//window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;
$('.week-picker').datepicker({
defaultDate: mm + '/' + dd + '/' + yy
}).click();
}
else
{
week = url.split("week_commencing=");
//return week[1];
document.getElementById('startDate').innerHTML = week[1];
}
}

Categories