I want to disable all future dates in the calendar after today. Today's date is highlighted in Yellow (Feb 23rd 2012)in the diagram below. All the other future dates should be non clickable. How can i do that ?
For instance 24th,25th.... etc should not be clickable
Note:
$('.datepicker').BlackoutDates.Add(new CalendarDateRange(DateTime.Now.AddDays(1), DateTime.MaxValue)); doesn't work
If you are using JQuery UI datepicker calandar, use maxdate method : http://api.jqueryui.com/datepicker/#option-maxDate
$( ".selector" ).datepicker({ maxDate: new Date() });
new Date() corresponds to the current date
demo : http://jsfiddle.net/UQTY2/21/
if the datepicker wizard has already been initialized on the input, you can also use:
$( ".selector" ).datepicker("option", {maxDate: "+0D" });
That should also work when a day ends and a new day starts after the datepicker has been initialized.
Related
What I Have
In jquery.ui.datepicker I have changed the value minDate to +1 so todays date or any historical date cannot be selected.
All good so far.....However.....
What I Want
I want to stop anyone selecting tomorrows date after 8pm today, so, after 8pm tomorrows date should no longer be available for selection.
I cannot see an option to do this in the default values or any of the examples on the datePicker website.
What is the best or easiest way I can achieve this?
Thanks in advance of a hopefully good suggestion
Since, jQuery DatePicker hasn't yet provided the functionality to support time(i guess) we need to do this in manual way.
You can use beforeShow options of jQuery DatePicker; which is called upon the datePicker UI display every time you click on DatePicker input field.
So, Inside beforeShow you can calculate the current time and manipulate the minDate as required ,
beforeShow : function(){
var dateTime = new Date();
var hour = dateTime.getHours();
//If Hour is greater or equals to 8PM
if(hour >= 20){
//Disable all past days including tomorrow and today
$(this).datepicker( "option", "minDate", "+2" );
}
}
Here is the working demo.
P.S
I haven't tried this yet but you should look into this
DateTimePicker plugin
if you want a more subtle approach
i'm using two datepickers to select range of dates, and I have the following problem:
When i select "start date" on datepicker I, I update minDate on the second one (analogously when selecting "end date" I update maxDate on the first one).
The problem is, that updating maxDate or minDate causes refreshing of datepicker.
So, for example if someone was browsing months on datepicker II and then selects some date on datepicker I then datepicker II will refresh and display goes back to last selected date on datepicker II, instead of staying at month user was browsing.
I already know the way to find out which month was last displayed on datepicker - by using "onChangeMonthYear" option.
The question is how to force datepicker to navigate to month I want (without actually changing selected date).
I'd really appreciate any help or suggestions.
Code, as requested. I'm using AngularJS, but I guess you can easily see how this would be translated into JQuery:
scope.fromDate.onChangeMonthYear = function(year, month){
//saving info about date I
};
scope.toDate.onChangeMonthYear = function(year, month){
//saving info about date II
};
scope.fromDate.onSelect = function(selectedDate) {
element.find(".date-to").datepicker("option", "minDate", selectedDate);
};
scope.toDate.onSelect = function(selectedDate) {
element.find(".date-from").datepicker("option", "maxDate", selectedDate);
};
according to jquery ui datepicker api reference:
// getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
// setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );
this should be used after the initialization, without reseting the datepicker
I'd like to think I'm tech savvy, but my experience with js is all code-hacking, so I really don't know what I'm doing.
I have all of the options of the datepicker set up in an external js file. The datepicker is for selecting a delivery date. In the header, I have a clock that counts down to 2 PM - the latest we can deliver. At 2, the clock turns off and is replaced with an image. However, we don't delivery on Sundays or specific dates set in the datepicker options, but the clock still shows on those dates.
I want the clock to read the next available delivery date from the dateicker (set by minDate). Is there any way for me to call that variable from my datepicker options back to the header?
var minDate = $( "%your_selector%" ).datepicker( "option", "minDate" );
You can use the option getter for the datepicker:
$(selector).datepicker('option', 'minDate');
jQuery UI Datepicker - minDate
I have an online form and I want to hide/display specific fields based on the date the user selects in a datepicker field. However, the date they select must fall within a specific date range in order for the additional fields to be shown/hidden.
Right now, this is the only code I have (I am not jQuery writer)
jQuery(document).ready(function ($) {
$("#dpick").datepicker("getDate");
var monthsWithExams;
monthsWithExams = $("#dpick").datepicker("getDate");
if monthsWithExams - THIS IS WHAT I NEED HELP FIGURING OUT
});
#dpick is the id of my datepicker field. Once they select a date, I want the code to check whether the selected date is inside a specific date range - for example, if they pick any day in December, then I want the form field with id tours to be hidden. I think I can write the if...else part, I just don't know how to check if date is inside date range.
I am not a jQuery expert so please try to explain it to me so that I can understand! Thanks for any help! :)
You can set the range by giving the minDate(starting date) and maxDate(Ending date)
//This will only allow 30 days from now range
$(function() {
$("#txtFiled").datepicker({
minDate: 'today',
maxDate: "+30D"
});
});
The datepicker has an "onClose" which can take the chosen date and check it against other dates.
$( "#dpick" ).datepicker({
onClose: function ( selectedDate ) {
var date = selectedDate ;
// if date is between x and y hide element A
}
});
I would like to set a value to input tag on which I create a datepicker. When datepicker is initialized I want to set it. Here is an some pseudo example what I want:
HTML:
<input id="test" value=""></input>
Javascript:
$('#text').datepicker({ dateFormat: 'dd.mm.yy'});
var currentDate = $('#text').datepicker('getDate');
$('#text').val(currentDate.format('dd.mm.yy'));
Thanks in advance!
If you are trying to set a default date for the datePicker plugin, you might want to use the defaultDate option.
Extract from JQuery UI/datepicker docs:
defaultDate: Date, Number, StringDefault:null
Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.
Code examples
Initialize a datepicker with the defaultDate option specified.
$( ".selector" ).datepicker({ defaultDate: +7 });
Get or set the defaultDate option, after init.
//getter
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
//setter
$(".selector").datepicker( "option", "defaultDate", +7 );
All this you can easily find in the JQuery docs found here: http://docs.jquery.com