Hey this question might have been asked before, however I haven't been able to find a solution.
I have two bootstrap date pickers. Based on the first date selection the second date should be restricted to the first date + 15.
I would like the vice-versa to happen as well. When a user selects the second date first the first date should be restricted to the second date - 15.
My code so far :
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#inputDate1').datepicker({
onRender: function (date) {
return date.valueOf() > now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
//made changes to condition below
var newDate = new Date(ev.date)
checkout.setValue(newDate);
checkin.hide();
$('#inputDate2')[0].focus();
}).data('datepicker');
var checkout = $('#inputDate2').datepicker({
onRender: function (date) {
//made changes to below line
var after = new Date(checkin.date);
after.setDate(after.getDate() + 14);
if(now.valueOf() > after.valueOf())
{
return (date.valueOf() <= after.valueOf()) && (date.valueOf()>= checkin.date.valueOf()) ? '' : 'disabled';
}
else if(after.valueOf() > now.valueOf())
{
return (date.valueOf() <= now.valueOf()) && (date.valueOf()>= checkin.date.valueOf()) ? '' : 'disabled';
}
}
}).on('changeDate', function (ev) {
checkout.hide();
}).data('datepicker');
Any help is appreciated.
Ok i figured out how to do it and here i paste my working code.
$(document).ready(function() {
var nowTemp = new Date();
var end = new Date();
var start;
$('#start').datepicker({
startDate: start,
endDate: end,
autoclose: true
}).on('changeDate', function (e){
var tempdate = new Date(e.date);
var tempdate1 = new Date(e.date);
tempdate1.setDate(tempdate1.getDate() + 15);
$('#end').datepicker('setStartDate', tempdate);
$('#end').datepicker('setEndDate', tempdate1);
});
$('#end').datepicker({
startDate: start,
endDate: end,
autoclose: true
}).on('changeDate', function (e){
var tempdate = new Date(e.date);
var tempdate1 = new Date(e.date);
tempdate1.setDate(tempdate1.getDate() - 15);
$('#start').datepicker('setStartDate', tempdate1);
$('#start').datepicker('setEndDate', tempdate);
});
});
Related
In my project - which is a App, I have multiple datepicker which is Version 2.0. My Client wants me to customise my datepicker by showing the date of the calendar top, so I did some tweaks, it is working on the page with one datepicker but it's an another story when it comes to multiple datepicekers on one page.my code is as follows.
$(elem).datepicker(options);
//Customized Datepicker Plugin 03/07/2017
//Author - Jithin Raj
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$(elem).on('show', function() {
var cPicVal = '',
yPicVal = '';
if ($('.datepicker-dropdown').find('.new-date-wrap').length <= 0) {
$('.datepicker-dropdown').prepend('<div class="new-date-wrap"><div class="custom-year-pic-view"><span></span></div><div class="custom-day-pic-view"><span></span></div></div>');
}
if ($(elem).val() == '') {
cPicVal = (Date.parse(today).toString('ddd, MMM dd'));
yPicVal = (Date.parse(today).toString('yyyy'));
} else {
cPicVal = (Date.parse($(elem).val()).toString('ddd, MMM dd'));
yPicVal = (Date.parse($(elem).val()).toString('yyyy'));
}
$('.custom-day-pic-view').find('span').text(cPicVal);
$('.custom-year-pic-view').find('span').text(yPicVal);
});
});
Can anyone suggest me a another fullprofe method, thankyou Cheers..
I think I found an answer.
I changed my code a little bit and added moment.js and now it's working all over my app.
$(elem).datepicker(options);
//Customized Datepicker Plugin 03/07/2017
//Author - Jithin Raj
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$(elem).on('show', function() {
var cPicVal = '',
yPicVal = '';
elem = $(this)
if ($('.datepicker-dropdown').find('.new-date-wrap').length <= 0) {
$('.datepicker-dropdown').prepend('<div class="row-fluid new-date-wrap"><div class="row-fluid custom-year-pic-view"><span></span></div><div class="row-fluid custom-day-pic-view"><span></span></div></div>');
}
if ($(elem).val() == '') {
cPicVal = (moment(today).format('ddd, MMM DD'));
yPicVal = (moment(today).format('YYYY'));
} else {
cPicVal = (moment($(elem).val()).format('ddd, MMM DD'));
yPicVal = (moment($(elem).val()).format('YYYY'));
}
$('.custom-day-pic-view').find('span').text(cPicVal);
$('.custom-year-pic-view').find('span').text(yPicVal);
});
This script is not working for the Date Format MM-dd-yyyy. Please let me know if there is a option to fix it. I want to make it generic.
My Script
<script type="text/javascript">
$(document).ready(function () {
debugger;
var _dateFormat = '';
_dateFormat = $("#hdnDtFormat").val();
var dateArray = ("#hdnCollectionDate").val();
var enabledDays = new Array();
if (dateArray.length > 0) {
enabledDays = dateArray.split(",");
var _firstVal = enabledDays[0];
var _LastVal = enabledDays[4];
GetCalederLoad(_firstVal, _LastVal, _dateFormat);
}
});
function GetCalederLoad(startDt, endDt, dtFormat) {
if (dtFormat != undefined && dtFormat != "")
dtFormat = dtFormat.toLowerCase();
$("#drpNewCollectionDateSvc").datepicker({
autoclose: true,
clearBtn: true,
startDate: startDt, // '(System.Web.Mvc.SelectList)(ViewData["CollectionDate"]).First();', //firstarrdate,
endDate: endDt, // '(System.Web.Mvc.SelectList)(ViewData["CollectionDate"]).Last();',// lastarrdate,
format: dtFormat,
daysOfWeekDisabled: [0, 6],
Default: false,
beforeShowDay: function (Date) {
var curr_date = Date.toJSON().substring(0, 10);
}
});
}
</script>
I'm getting data from Server in the format of
$(document).ready(function () {
var _dateFormat = '';
_dateFormat = 'MM-dd-yyyy';
var dateArray = '07/05/2016,07/06/2016,07/07/2016,07/08/2016,07/11/2016';
var enabledDays = new Array(); enabledDays = dateArray.split(",");
var _firstVal = enabledDays[0]; var _LastVal = enabledDays[4];
});
The issue is not clear but there is no option named format. Correct name is dateFormat, e.g.
$( ".selector" ).datepicker({
dateFormat: "yy-mm-dd"
});
I am using foundation datepicker and I am trying to disable dates. I am able to disable dates for one field, where dates are disabled from week ago, but I am not able to disable dates that are going from now into the future:
onRender: function (date) {
return date.valueOf() > date.valueOf() ? 'disabled' : '';
}
This is the complete code:
var date = new Date();
var weekBack = new Date(new Date(date).setDate(date.getDate() - 7));
$('#datePicker').fdatepicker({
closeButton: false,
initialDate: weekBack,
format: 'dd.mm.yyyy',
onRender: function (date) {
return date.valueOf() > weekBack.valueOf() ? 'disabled' : '';
},
}).on('changeDate', function (ev) {
var dateFrom = $("#datePicker").val().split(".").reverse().join("-");
var dateTo = $("#datePicker1").val().split(".").reverse().join("-");
timelines(dateFrom, dateTo);
barCharts(dateFrom, dateTo);
});
$('#datePicker1').fdatepicker({
closeButton: false,
initialDate: date,
format: 'dd.mm.yyyy',
onRender: function (date) {
return date.valueOf() > date.valueOf() ? 'disabled' : '';
},
}).on('changeDate', function (ev) {
var dateFrom = $("#datePicker").val().split(".").reverse().join("-");
var dateTo = $("#datePicker1").val().split(".").reverse().join("-");
timelines(dateFrom, dateTo);
barCharts(dateFrom, dateTo);
});
You just set the endDate as following:
var now = new Date();
$("#birthday").fdatepicker({
format: "dd M yyyy",
endDate: now
});
Conversely, if you want to disable the past days, set the startDate:
var now = new Date();
$("#checkin").fdatepicker({
format: "dd M yyyy",
startDate: now
});
Hope this useful!
can that help you?
http://jsfiddle.net/D9C4F/
http://foundation.zurb.com/forum/posts/39753-foundation-datepicker-select-end-date
and that as well?
http://app.thewatchenthusiast.com/themes/base/bower_components/foundation-datepicker/example.html
I using a date-picker to set a start and end date. The date range is supposed to move forward each day for a two week, sliding window of entry.
My code below works but I would like to refactor it into something that is easier to maintain. What techniques or tools can I use to improve this code?
var challenge_start = new Date(2015,04,04);
var challenge_end = new Date(2015,06,12);
var range_start;
var range_end;
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(today<challenge_start) {
range_start=challenge_start;
range_end=challenge_start;
}
else if(today>challenge_start && today<challenge_end) {
if(mm==5) {
if(dd<18) {
range_start=challenge_start;
range_end=today;
}
else {
range_start=today.setDate(today.getDate()-14);
range_end=today;
}
}
else if(mm=6) {
if(dd<29) {
range_start=today.setDate(today.getDate()-14);
range_end=today;
}
else {
range_start=today.setDate(today.getDate()-14);
range_end=challenge_end;
}
}
else if(mm==7) {
if(dd<12) {
range_start=today.setDate(today.getDate()-14);
range_end=challenge_end;
}
else {
range_start=challenge_end;
range_end=challenge_end;
}
}
}
else if(today>challenge_end) {
range_start=challenge_end;
range_end=challenge_end;
}
$("#date").datepicker({
startDate: range_start,
endDate: range_end,
keyboardNavigation: false,
autoclose: true,
todayHighlight: true,
language: langdate,
disableTouchKeyboard: true
});
I may not understand what you are striving for, but I'm pretty sure you don't need to have those if(mm==x) and if(dd=x) statements.
Perhaps this is what you want:
var challenge_start = new Date(2015,04,04);
var challenge_end = new Date(2015,06,12);
function getDatePlusDays(origDate, days) {
var date = new Date(origDate.getTime());
date.setDate(date.getDate() + days);
return date;
}
function getClosestDateInRange(startDate, endDate, date) {
return (date < startDate) ? startDate
: ((date > endDate) ? endDate: date);
}
var today = new Date();
var range_start = getClosestDateInRange(challenge_start, challenge_end, getDatePlusDays(today, -14));
var range_end = getClosestDateInRange(challenge_start, challenge_end, today);
jsfiddle
how to set start date 1 week after?
I'm using this calender http://www.eyecon.ro/bootstrap-datepicker/` var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#dpd1').datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
checkout.hide();
}).data('datepicker');`
Use this to set the variable "now" to 7 days after the current date:
var nowTemp=new Date();
var oneWeekAfter = new Date();
oneWeekAfter.setDate(nowTemp.getDate()+7);
oneWeekAfter.getDate();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), oneWeekAfter.getDate(), 0, 0, 0, 0);