We Keep Coding

Remove Past Dates - Jquery Datepicker

I'm working on a booking system for a client, I managed to disable sundays & mondays (days she is not open) I'm trying to tidy it up a bit and block out days that have already past.
I have the function written to block out sundays & mondays but i'm trying to integrate the block past dates into it as well. I tried adding it into the function I have but I can't seem to get it to work. (I am aware that the first 2 lines are commented out) If I leave both of them in, it only blocks out the prior dates but doesn't block out Sun & Mon
<script>
// set minDate to 0 for today's date
// $('#datepicker').datepicker({ minDate: 0 });
$(document).ready(function() {
$('#datepicker').datepicker({
beforeShowDay: function(date) {
// 0 - Sunday, 1 - Monday
return [date.getDay() == 0 || date.getDay() == 1 ? false : true];
}
});
});
</script>
I would like to get the block prior dates & block sun & mon working on this in one function is this possible?

Try using minDate
$('#datepicker').datepicker({
minDate: '0d',
beforeShowDay: function(date) {
// 0 - Sunday, 1 - Monday
return [date.getDay() == 0 || date.getDay() == 1 ? false : true];
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input id="datepicker"/>

Jquery Datetimepicker disable dates

i am using jquery datetime picker for getting date and time using
$(document).ready(function() {
$('#pickup_date').datetimepicker({
controlType: 'select',
timeFormat: 'hh:mm tt'
});
but i need to enable 3 weeks from the current date only.How to solve this.thanks in advance

<script>
function DisableWeekDays(date) {
var weekenddate = $.datepicker.noWeekends(date);
// In order to disable weekdays, we will invert the value returned by noWeekends functions.
// noWeekends return an array with the first element being true/false.. So we will invert the first element
var disableweek = [!weekenddate[0]];
return disableweek;
}
$(function() {
$( "#datepicker" ).datetimepicker({
beforeShowDay: DisableWeekDays
});
});
</script>

$('yourSelectorForDateTimePicker').datetimepicker({
formatDate:'Y/m/d',
minDate:0, //Today You can also '+1970/01/21' or '-1970/01/21' both ended up meaning -0 or +0
maxDate:'+1970/01/21' //3*7 days from today.
});
use minDate and maxDate
0 means 1970/01/01 which is start time of Unix time.You can plus/minus the String Date to set range of selectable dates.
The case You want to set the range to be yesterday to tomorrow it'll be
$('yourSelectorForDateTimePicker').datetimepicker({
formatDate:'Y/m/d',
minDate:'-1970/01/02', //Yesterday(plus one day from the 0 '1970/01/01')
maxDate:'+1970/01/02' //Tomorrow(minus one day from the 0 '1970/01/01')
});
http://xdsoft.net/jqplugins/datetimepicker/

The above answer is a good one, but if you want to set the date dynamically (based on the current date).
$(function () {
var currentDate = new Date();
var date = currentDate.toDateString();
$("#datetimepicker1").val(new Date() + " 00:01:00");
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: date
});
});
Get the current date into a variable
Convert the date to a string
Pass the string to minDate
Or
$(function () {
$("#datetimepicker1").val(new Date() + " 00:01:00");
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment()
});
});
Using JSMoment and pass moment.

jQuery Datepick (Keith Wood) highlight defaultDate with a CSS-class

I am using the inline version of Keith Woods jquery datepick plugin.
The default value for the picker is set like this:
var dpInputField = $('input#datepicker-value');
var defaultDate = (dpInputField.val() == '') ? '1399593600' : dpInputField.val(); // 1399593600 = 9th May 2014 00:00:00
$('#datepicker').datepick({
dateFormat: $.datepick.TIMESTAMP,
monthsToShow: 2,
changeMonth: false,
altField: '#datepicker-value',
onDate: showDayAndMonth,
defaultDate: defaultDate,
}, $.extend($.datepick.regional[window.language]));
Theres a form submit after selecting a date. If I debug the defaultDate its correct! Just a CSS-class is missing somehow.

Solved it. I am using the onShow: event to call a function which is selecting the HTML object by its class.
for example: class="dp1403344800000", as theres the timestamp as part of the css class, it was no problem to .addClass(datepicker-selected)

JQuery-UI Datepicker Bound Lates possible Date to Now?

I use JQuery-Ui Datepicker like in the following way:
$(".dateElement").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "1970:2013"
});
In the above example the months, year and range are fix. Assume you want the user to insert his birthday. How can I set the lates possible month to the current month and the latest possible year to the current year?
What I want is to ensure that the user cannot insert a date that is in the future. Howcan I do that=

This will limit a datepicker to the current month and year:
var currentDate = new Date();
$(".dateElement").datepicker({
maxDate: new Date(currentDate.getFullYear(),
currentDate.getMonth() + 1,
-1) // 1st day of next month minus 1 day
});
However, if you want to limit it to no later than the current date (so days after today in the current month do not apply), you can just do this:
$(".dateElement").datepicker({
maxDate: 0 // 0 days from today
});
API docs: http://api.jqueryui.com/datepicker/#option-maxDate

maxDate: 0
jqueryui.com/datepicker/#min-max

jQuery UI Datepicker - Disable current date but NOT the highlight

I have the following code which disables the current date by setting minDate to current date + 1:
var today = new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);
$("#minDate").datepicker({
showOn: "none",
minDate: tomorrow,
dateFormat: "DD dd-mm-yy",
onSelect: function(dateText) {
minDateChange;
},
inputOffsetX: 5,
});
The problem is that I want to disable the current date, but still keep it highlighted (Blue border around the date) in the calendar.
Is there a native way to do this using the datepicker or do I have to create a highlight script myself?

you don't need to set today and tomorrow as a variable. just set minDate: 1

The datepicker has a class on todays date called "ui-datepicker-today", so I simply added a class to that:
$(".ui-datepicker-today span").addClass("ui-state-hover")