In my web page i have a jquery calendar to selected multiple dates.When i select each date the calendar will refresh to highlight the selected date.Now the problem is that each time i am select a date the page is also going to top of the page.How can i keep the page in position and select dates again and again..?
Here is my js
$( "#datepickerr" ).datepicker({
dateFormat: 'yy-mm-dd' ,
dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
todayHighlight: true,
// showButtonPanel: true,
beforeShowDay: function ( date ) {
if(date.getTime() >= date1 && date.getTime() <= date2){
return[true,'date-range',''];
}
else{
return [true, ( (date.getTime() >= Math.min(prv, cur) && date.getTime() <= Math.max(prv, cur)) ? 'date-range' : '')];
}
},
onSelect: function ( dateText, inst ) {
var d1, d2;
prv = cur;
cur = (new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)).getTime();
if ( prv == -1 || prv == cur ) {
prv = cur;
date1=date2=prv ;
$('#datepickerr').val( dateText );
$('#datepickerr').datepicker("refresh");
} else {
d1 = $.datepicker.formatDate( 'yy-mm-dd', new Date(Math.min(prv,cur)), {} );
d2 = $.datepicker.formatDate( 'yy-mm-dd', new Date(Math.max(prv,cur)), {} );
date1=d1;
date=d2;
$('#datepickerr').val( d1+' '+d2 );
$('#datepickerr').datepicker("refresh");
}
hideDatepicker(null);
}
});
general idea
var selected = [];
$("#datepickerr").datepicker({
onSelect: function(dateText, inst) {
var index = selected.indexOf(dateText);
if (index !== false) {
$('.d-' + dateText).removeClass('selected');
selected.splice(index, 1);
} else {
$('.d-' + dateText).addClass('selected');
selected.push(dateText)
}
}
});
.selected {
/* your highlight style */
}
<!-- <tag class="d-dateText"><tag class="d-dateText"><tag class="d-dateText"><tag class="d-dateText"> -->
Related
I am using ui-datepicker and it is working fine on chrome but not on safari. I have also tried by putting CSS file first and then JS file in my main index.html file. It is generating ui-datepicker-div in bottom but it is empty on Safari.
Here is HTML i am using:
<input type="image" src="images/calendar-icon.jpg" ng-model="selectedWeek" weekpicker format="yy-mm-dd" style="margin-left:10px;" />
and here is JavaScript i am using:
myApp.directive('weekpicker', function () {
function link(scope, element, attrs, ngModelCtrl, $rootScope) {
var frmt = "mm/dd/yy";
if (attrs.format != undefined) {
frmt = attrs.format;
} else if (attrs.placeholder != undefined) {
frmt = attrs.placeholder;
}
scope.getSunday = function(fromDate) {
var curr = new Date(fromDate); // get current date
var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
var firstday = new Date(curr.setDate(first)).toUTCString();
return firstday;
};
scope.getWeekDaysRange = function (inputDateString) {
return scope.getDates(new Date(inputDateString), (new Date(inputDateString)).addDays(6));
};
scope.getDates = function(startDate, stopDate) {
var dateArray = new Array();
var currentDate = startDate;
while (currentDate <= stopDate) {
var curdate = new Date(currentDate);
var dateElements = {
day : cal_days_labels[curdate.getDay()],
date : curdate.getDate(),
month : cal_months_labels[curdate.getMonth()],
year : curdate.getFullYear(),
datestamp : curdate.getFullYear()+''+scope.padWithZero(curdate.getMonth()+1)+''+scope.padWithZero(curdate.getDate())
};
dateArray.push(dateElements);
currentDate = currentDate.addDays(1);
}
return dateArray;
};
scope.padWithZero = function(number) {
if(number>-10 && number<10) {
number = '0'+number;
}
return number;
};
$(element).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
showWeek: true,
beforeShow: function(dateText, inst) {
},
onSelect : function(dateText, inst) {
current = {day: inst.currentDay, month : inst.currentMonth, year : inst.currentYear};
var selectedDateString = new Date(current.year+'-' + (1+current.month) + '-' + current.day);
var weekBoundryDates = selectedDateString.getWeekBoundryDaysFromToday();
var weekBoundries = weekString(weekBoundryDates);
scope.$apply(function() {
scope.selectedWeek = weekBoundries;
});
scope.$digest();
scope.$emit("weekselected", inst);
},
onClose: function(dateText, inst) {
}
});
scope.$watch(function(scope){
return scope.selectedWeek;
}, function(newVal, oldVal){
});
};
return {
restrict: 'A',
require: 'ngModel',
link: link
};
});
the above code is working fine in Chrome, but not in Safari.
Can anyone help me please.
Change input type image to text it will work :)
<input type="text" src="images/calendar-icon.jpg" ng-model="selectedWeek" weekpicker format="yy-mm-dd" style="margin-left:10px;" />
I have a big trouble with android mobile on my web site when I click my calendar datepicker appears and after keyboard hiding my datepicker hides, I couldn't find the problem for months.
On IOS and desktop version I have no problem and I have this trouble only with android devices.
I don't think problem is about with my calendar function but I want to share with you:
var dateFormat = "DD/MM/YY",
from = $("#checkin,.checkin").datepicker({
firstDay: 1,
minDate: 0,
showButtonPanel: true,
closeText: 'Temizle',
onClose: function(dateText, inst) {
},
onSelect: function(selectedDate) {
window.setTimeout($.proxy(function() {
$(this).parents(".book-holiday").find("#checkout,.checkout").focus();
}, this), 10);
var yenitarih = new Date();
var date = $(this).datepicker('getDate');
var checkoutStartDate = new Date(new Date(date).setDate(date.getDate() + 1));
var checkoutEndDate = new Date(new Date(date).setDate(date.getDate() + 500000));
$("#checkout,.checkout").datepicker("option", "minDate", checkoutStartDate);
$("#checkout,.checkout").datepicker("option", "maxDate", checkoutEndDate);
},
isTo1: true,
beforeShowDay: function(date) {
var selectedDate = $(this).datepicker('getDate'),
fromDate = from.datepicker('getDate');
if (!fromDate || !selectedDate) {
return [true]
}
var dateClass = '';
var dateClass = '';
if (date > fromDate && date < selectedDate) {
dateClass = 'start';
} else if (+date == +selectedDate) {
dateClass = 'stop';
}
return [true, dateClass];
},
beforeShow: function(input, inst) {
$(this).datepicker("widget").addClass("main-datepicker");
controlDatepicker(".checkin,#checkin");
}
});
$("#checkout,.checkout").datepicker({
firstDay: 1,
minDate: 0,
showButtonPanel: true,
closeText: 'Temizle',
onClose: function(dateText, inst) {
},
isTo1: true,
onSelect: function(selectedDate) {
$(this).parents(".book-holiday").find(".popover-wrapper").addClass("open");
$(this).parents(".book-holiday").find(".popover-wrapper").addClass("open");
},
beforeShowDay: function(date) {
var selectedDate = $(this).datepicker('getDate'),
fromDate = from.datepicker('getDate');
if (!fromDate || !selectedDate) {
return [true]
}
var dateClass = '';
if (date > fromDate && date < selectedDate) {
dateClass = 'start';
} else if (+date == +selectedDate) {
dateClass = 'stop';
}
return [true, dateClass];
},
beforeShow: function(input, inst) {
$(this).datepicker("widget").addClass("main-datepicker");
controlDatepicker(".checkin,#checkin");
}
I set readonly to my datepicker input but when I click it keyboard is showing I don't understand why is it opening ?
and I want to share my web site: click to see - please check it out on android devices and click to datepicker
I have a array with dates. I want to loop this array and disable selectable dates in datepicker control. I need to do this in beforeShowDay parameter!
This is my code:
var datesForDisable = ["25-01-2017", "26-01-2017", "27-01-2017"]
$("#holidayDateFrom").datepicker({
format: 'dd-mm-yyyy',
autoclose: true,
weekStart: 1,
calendarWeeks: true,
todayHighlight: true,
//datesDisabled: datesForDisable,
//daysOfWeekDisabled: [0, 6],
beforeShowDay: function (currentDate) {
var dayNr = currentDate.getDay();
if (dayNr == 6) {//This works
return false;
}
if (dayNr == 0) {//This works
return false;
}
// This dosnt works..
var dateNr = moment(currentDate.getDate()).format("DD-MM-YYYY");
if (datesForDisable.length > 0) {
for (var i = 0; i < datesForDisable.length; i++) {
var date = new Date(datesForDisable[i]);
if (date == dateNr) {
return false;
}
}
}
return true;
}
})
How to do this? Thank you previously!
You can compare the dates as timestamp(unix time)
var datesForDisable = ["25.01.2017", "26.01.2017", "27.01.2017"]
$("#datepicker").datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
weekStart: 1,
calendarWeeks: true,
todayHighlight: true,
//datesDisabled: datesForDisable,
//daysOfWeekDisabled: [0, 6],
beforeShowDay: function (currentDate) {
var dayNr = currentDate.getDay();
var dateNr = moment(currentDate.getDate()).format("DD-MM-YYYY");
if (dayNr == 6) {//This works
return false;
}
if (dayNr == 0) {//This works
return false;
}
if (datesForDisable.length > 0) {
for (var i = 0; i < datesForDisable.length; i++) {
if (moment(currentDate).unix()==moment(datesForDisable[i],'DD.MM.YYYY').unix()){
return false;
}
}
}
return true;
}
})
datesDisabled: datesForDisable
I am not sure why you comment this option. As per your question, This option is providing the same thing you are look for. Take a look:
http://jsfiddle.net/CxNNh/4056/
Its worked perfect for me
var datesForDisable = ["03-04-2019", "03-09-2019", "03-15-2019"];
$(document).ready(function () {
$('.datepicker').datepicker({
multidate: true,
format: 'mm-dd-yyyy',
todayHighlight: false,
datesDisabled: datesForDisable,
multidateSeparator: ', ',
templates : {
leftArrow: '<i class="fi-arrow-left"></i>',
rightArrow: '<i class="fi-arrow-right"></i>'
}
});
});
I'm trying to disable certain days of the calendar, but I can not.
I'm using this datepicker https://github.com/eternicode/bootstrap-datepicker/blob/master/docs/index.rst.
The javascript code I have is this, I work all I need except the days you want to disable.
var disabledDays = ['11/29/2013', '11/27/2013', '11/28/2013'];
function daysDisabled(date) {
for (var i = 0; i < disabledDays.length; i++) {
if (new Date(disabledDays[i]).toString() == date.toString()) {
return [false, ''];
}
}
return [true, ''];
}
$('.datepicker').datepicker({
format: 'dd-mm-yyyy',
todayHighlight: true,
autoclose: true,
weekStart: 1,
startDate: '0d',
language: 'es',
beforeShowDay: daysDisabled
})
just modify your function like this:
function daysDisabled(date) {
for (var i = 0; i < disabledDays.length; i++) {
if (new Date(disabledDays[i]).toString() == date.toString()) {
return false;
}
}
return true;
}
Created Fiddle for you.
Working Fiddle
function initComponent(){
/* Date retrait */
$("#dateRetrait").datepicker({
dateFormat: 'dd-mm-yy',
minDate: new Date(),
beforeShowDay: function(d) {
var dmy = (d.getMonth()+1);
if(d.getMonth()<9)
dmy="0"+dmy;
dmy+= "-";
if(d.getDate()<10) dmy+="0";
dmy+=d.getDate() + "-" + d.getFullYear();
console.log(dmy+' : '+($.inArray(dmy, disbleddates)));
if ($.inArray(dmy, disbleddates) != -1) {
return [false, "","Available"];
} else{
return [true,"","unAvailable"];
}
}
});
I'm trying to disable certain dates from a Jquery UI datepicker calendar.
My problem is that only the last date checked by disableDays function is disabled, not all of them. Why it disables only the last checked date. Should I return a different response from this function ?
Full script:
var disabled_days = new Array(); // Array of Date() objects
$('.date-picker-day').live('click', function () {
$(this).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'dd',
beforeShow: function () {
[..]
},
beforeShowDay: disableDays,
onClose: function (dateText, inst) {
}
}).focus();
});
function disableDays(date) {
var ret = false;
$.each(disabled_days, function (k, v) {
if (v.getDate() == date.getDate()) {
console.log(v + 'vs.' + date + ' invalid');
ret = [false];
} else {
ret = [true];
}
});
return ret;
}
You need to stop further iterations of the disabled_days array as soon as a negative match is found, else in the next value iteration the date will not match and ret will again get true value
function disableDays(date) {
var ret = false;
$.each(disabled_days, function (k, v) {
if (v.getDate() == date.getDate()) {
console.log(v + 'vs.' + date + ' invalid');
ret = [false];
return false;
} else {
ret = [true];
}
});
return ret;
}
Demo: Fiddle