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
Related
I am using below date-picker plugin for angularjs which is made from pickadate.js
https://github.com/alongubkin/angular-datepicker
I am using this plugin twice on the page. Plugin have very good option max date and min date which will help us select between those date.
Example options
$scope.depOptions = {
format: 'dd/mm/yyyy',
min: minDate,
max: maxDate,
onClose: function(){
$scope.arrOptions.min = $scope.depDate;
}
}
Now I want to make min date starting from selected. I tried $watch and also tried to onClose method provided by plugin but I could not do it. Kindly somebody help me.
http://plnkr.co/edit/QBFwqyUIJxtw1dltMDky?p=preview
It seems that the element's configuration once initialized cannot be changed. Try putting the arrival input in ngIf, so that it is always rendered anew when departure changes.
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 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.
I'm trying to have my Jquery UI Date Picker insert YYYY/MM/DD format (due to SQL limitations). I see the options on the Jquery site, but can't get it to work. Below is my working code (without Alt Date). It's in a div that is hidden initially so it needs live():
$(function() {
$('.datepicker').live('focus', function () {
var picker = $(this).datepicker({showOn: ''});
picker.datepicker("show");
});
});
Any help?
You need to add "option", "dateFormat", "yy/mm/dd" to your datepicker call.
var picker = $(this).datepicker({dateFormat: "yy/mm/dd", showOn: ''});
This will make datepicker format the date value selected as 2011/08/22.