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
Related
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"/>
I have a Jquery datepicker for a webapplication, my question is: I want to highlight 2 days at the same time when needed. This is only for the weekend days
When I select Saturday, Sunday must be highlighted (adding a class named: "ui-state-active") too and for Sunday the same, when Sunday selected, Saturday must be highlighted too.
beforeShowDay: function(d) {
var selecteddate = $( ".datepicker" ).datepicker( "getDate" );
var day = selecteddate.getDay();
if (day == 6) { // day 6 = saturday
// Now saturday must get the class highlight
return [true, 'highlight'];
}
else if (day == 0){ // day 0 = sunday
// Now sunday must get the class highlight
return[true, 'highlight'];
}
}
Regards
Dennis
You need to implement the beforeShowDay event for the datepicker:
The function takes a date as a parameter and must return an array with
[0] equal to true/false indicating whether or not this date is
selectable, [1] equal to a CSS class name(s) or '' for the default
presentation, and [2] an optional popup tooltip for this date. It is
called for each day in the datepicker before it is displayed.
So you need to do something like:
$("#datepicker").datepicker({
beforeShowDay: function(d) {
//check if it's Sunday then highlight Saturday and vice versa.
}
});
I am trying to restrict jquery datepicker values. So the the from date can not exceed the to date and vice versa.
Demo https://jsfiddle.net/DTcHh/21594/
I've tried multiple instances of this but can not seem to get it to work. Is it because I am using the UK date format?
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy'
});
$('#from_date').datepicker({
onSelect: function(dateStr) {
var min = $(this).datepicker('getDate') || new Date(); // Selected date or today if none
var max = new Date(min.getTime());
max.setMonth(max.getDay() + 1); // Add one month
$('#to_date').datepicker('option', {minDate: min, maxDate: max});
}
});
$('#to_date').datepicker({
onSelect: function(dateStr) {
var max = $(this).datepicker('getDate'); // Selected date or null if none
$('#from_date').datepicker('option', {maxDate: max});
}
});
As i'm new to JavaScript i'm keen to know exactly why my code doesn't work, so i can learn from this.
You cannot initialize date picker on same element twice. First, you called the date picker on element with its class; then with its ID.
Try to move the date format to date picker default function.
$.datepicker.setDefaults({
dateFormat: 'dd-mm-yy'
});
Or, you need to set dateFormat every time you initialize a date picker element.
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.
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")