.datepicker date selection effects query - javascript

I am working on my personal work website.
My problem is, in calender "From" date can be picked even before today (not good), moreover if "From" date is selected 5 days from today, in "To" date it still gives me option to select date for before "From" selected date.
while it should only let me select date beyond what I have in "From" date. Moreover can't figure out how to bring hover effect in "end date"(Like even if hover 6th day from now, shouls highlight 5th & sixth day.)
JavaScript:
$(document).ready(function(){
$('#from').datepicker({
numberOfMonths:2
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#to').datepicker({
numberOfMonths:2
});
});
</script>

To adjust the from date and set the minDate try something like the following.
You can find the api documentation here: http://api.jqueryui.com/datepicker
$(document).ready(function(){
$('#from').datepicker({
minDate: 0,
numberOfMonths:2,
onSelect: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$('#to').datepicker({
minDate: 0,
numberOfMonths:2
});
});

According to API DatePicker
you need to set minDate & maxDate on selection.
$(document).ready(function(){
$('#from').datepicker({
numberOfMonths:2,
onSelect: function (date) {
$("#to").datepicker("option", "minDate", date);
}
});
$('#to').datepicker({
numberOfMonths:2,
onSelect: function (date) {
$("#from").datepicker("option", "maxDate", date);
}
});
});

Related

select by default previous date with jquery calendar

I have datepicker codes below to display me calendar, the current date is selected by default, i would like to select the previous date by default instead (the day before today). I have tried but i failed anybody can help me please?
$(function() {
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
});
I finally resolved my issue this way
$(function() {
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val();
$("#datepicker").click(function() {
date = new Date();
date.setDate(date.getDate()-1);
$( "#datepicker" ).datepicker( "setDate" , date);
});
});
Try this:
$(".datepicker").datepicker("setDate", -1)
More info: http://api.jqueryui.com/datepicker/#method-setDate

Validation in Jquery datepicker

I want to set maximum limit in JQuery Datepicker so that the user can't pick date after current date. Currently I'm using http://jqueryui.com/datepicker/ plugin.
How to set maximum limit in JQuery datepicker ?
you can validate by Jquery
$(document).ready(function(){
if($("#datepicker").val() == ''){
alert("Please Select Your date");
}
});
try this- just in the datepicker function you are using pass these parameters
$("#date").datepicker({
onSelect: function(selectedDate) {
$( "#date1" ).datepicker( "option", "maxDate", selectedDate);
}
});
Try
option-maxDate
Working Demo
$("#date").datepicker("option","maxDate",0);
or
$("#date").datepicker("option","maxDate",new Date());
Working Demo
$(function () {
$("#date").datepicker({
maxDate: 0
});
});
$("#date").datepicker({
dateFormat: 'dd/mm/yy',
minDate: 0,
maxDate: "+30M",
});
fore more look here

Why datepicker show same month when change month on a first time on autoOpening second datepicker

Click on the first field;
select any day; (then automatic opening second datepicker)
click next month button
showing datepicker has flash, but month not change
after this, next month button (and prev month button) have work.
WHYYYYYYY ?????
Fiddel Demo
$(".from_date").datepicker({
minDate: 'D',
dateFormat: "dd/mm/yy",
defaultDate: "+1w",
numberOfMonths: 2,
onClose: function(selectedDate) {
$(".to_date").datepicker("option", "minDate", selectedDate);
$(this).parents('.span2').next().children().find('.to_date').focus();
}
});
$(".to_date").datepicker({
minDate: '+1D',
dateFormat: "dd/mm/yy",
defaultDate: "+1w",
numberOfMonths: 2
});
I can confirm the bug, it has something to do with opening the second datepicker from the onClose function, adding a zero delay timeout seems to work though:
onClose: function(selectedDate) {
var $toDate = $(this).closest('.span2').next().find('.to_date');
$toDate.datepicker("option", "minDate", selectedDate);
setTimeout(function(){$toDate.datepicker('show')},0);
}
Updated fiddle
Note: I changed your code a bit, I optimized your .to_date selector and made it so only the corresponding input is updated with the selected date

Setting the minimum date of jquery datepicker

I am working on a project which involves using HTML5 and Javacript/JQuery. I am trying to make use of the Jquery datepicker and trying to set the minimum date to today's date so the user can't select a date from yesterday.
Below is my Javascript.
$(function()
{
var today = new Date();
$("#txtStartDate").datepicker(
{
changeMonth: true,
numberOfMonths: 1,
minDate: new Date(today.getYear(), today.getMonth() +1, today.getDay()),
onClose: function(selectedDate)
{
$("#txtStartDate").datepicker("option", "dateFormat", "dd-mm-yy", selectedDate);
}
});
});
It doesn't seem to be making any difference as I can still go back to days before yesterday.
Thanks for any help you can provide.
I guess you did'nt read the documentation ?
minDate
Type: Date or Number or String
Default: null
The minimum selectable date. When set to null, there is no minimum.
Multiple types supported:
Date: A date object containing the minimum date.
Number: A number of days from today. <- set to 0, it's no days from today !
So setting minDate to 0 should work, right !
$(function () {
var today = new Date();
$("#txtStartDate").datepicker({
changeMonth: true,
numberOfMonths: 1,
minDate: 0,
onClose: function (selectedDate) {
$("#txtStartDate").datepicker("option", "dateFormat", "dd-mm-yy", selectedDate);
}
});
});

Setting minimum date to date picked in previous datepicker

I have two date pickers. A startdate and an enddate.
The way I have the code set up is that the second datepicker won't be initiated until the first one has been changed. The enddate datepicker is initialized with the current date on startdate. The only problem is that if you change the time on the first datepicker it doesn't refresh the mindate on enddate.
$(function(){
$( "#startdate" ).datepicker({ minDate: currentTime });
//When the startdate changes change the mindate for the enddate picker
$( "#startdate" ).change(function (){
startTime = ($("#startdate").val());
$("#enddate").datepicker({ minDate: startTime });
});
//$( "#enddate" ).datepicker({ minDate: currentTime });
});
You will need to use the option method as described in the documentation (http://jqueryui.com/demos/datepicker/#method-option) to update the minDate option of an already initialized widget:
$( "#startdate, #enddate" ).datepicker({ minDate: currentTime });
$('#startdate').change(function () {
var startTime = ($("#startdate").val());
$("#enddate").datepicker('option', 'minDate', startTime);
});
Notice I put a var statement in-front of the startTime variable so it will be declared in the local scope of the event handler. Also both Datepickers get initialized strait-off and then the #enddate widget gets an updated minDate option each time the #startdate element is changed.
Here is a demo: http://jsfiddle.net/VP25m/
EDIT: Try using the refresh() function on datepicker:
$( "#startdate" ).change(function (){
startTime = ($("#startdate").val());
$("#enddate").datepicker({ minDate: startTime });
$("#enddate").datepicker('refresh');
});
OLD ANSWER BELOW:
You will probably want to set the end date datepicker to a variable so you can destroy and re-initialize it when the start date changes.
$( "#startdate" ).change(function (){
startTime = ($("#startdate").val());
if($("#enddate").datepicker("enabled")) {
endDatePicker.datepicker( "destroy" );
}
var endDatePicker = $("#enddate").datepicker({ minDate: startTime });
});
Use datepicker's onSelect event instead of change event of textbox. In this event you get the selected date as the first argument which you can use to set as minDate of enddate datapicker.
$( "#startdate" ).datepicker({
minDate: currentTime,
onSelect: function(date){
//if the datepicker is not initialized
$("#enddate").datepicker({ minDate: date });
//if the datepicker is already initialized
$("#enddate").datepicker("option", "minDate", date);
}
});
Demo
Reference: http://jqueryui.com/demos/datepicker/#event-onSelect

Categories

Resources