jquery datepicker - why not working right?

unwashed potato!

unwashed potato!

unwashed potato!

Soldato
Joined
12 Feb 2006
Posts
17,369
Location
Surrey
my datepicker was working fine until about a month ago i noticed it not acting right. it still works, but the date restriction range doesn't work any more, and when clicking the input field, i get the standard browser "recent typed options" popping up over the datepicker.

can someone take a look at this code and see anything wrong with it?

Code: 
<div id="datepicker"></div>


<link href="/j/jquery-ui.min.css" rel="stylesheet">
<script src="/j/jquery-ui.min.js"></script>

<script>

var notAvailableDates = "";
</script>

<?php if ($service == "oven") {  ?>

<script>

var notAvailableDates = ["18-6-2018","21-6-2018"];

</script>

<?php } ?>


<script>

function available(date) {
  dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, notAvailableDates) !== -1) {
    return [false, "","unAvailable"];
  } else {
    return [true,"","Available"];
  }
}


$( "#date" ).datepicker({
     beforeShowDay: available,
    minDate: -0,
    maxDate: "+10M +10D",
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    beforeShowDay: $.datepicker.noWeekends,
});





</script>
 
The problem is because you're setting the `beforeShowDay` property twice, hence the first setting will never be used as it's overwritten. As this is the case I'm not sure how the code ever worked at all.

To fix it, you need to remove the latter setting and incorporate `$.datepicker.noWeekends` in to the `available()` function, like this:

Code: 
var notAvailableDates = ["18-6-2018", "21-6-2018"];

function available(date) {
  var noWeekend = $.datepicker.noWeekends(date);
  var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
  if (!noWeekend[0] || notAvailableDates.indexOf(dmy) !== -1) {
    return [false, "", "unAvailable"];
  } else {
    return [true, "", "Available"];
  }
}

$("#datepicker").datepicker({
  beforeShowDay: available,
  minDate: -0,
  maxDate: "+10M +10D",
  dateFormat: 'dd/mm/yy',
  firstDay: 1
});


http://jsfiddle.net/cbLqo0jt/

Also note that if you don't need the (largely redundant) tooltip on the disabled dates, then you can simplify the `available()` function even further:

Code: 
function available(date) {
  var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
  return [$.datepicker.noWeekends(date)[0] && notAvailableDates.indexOf(dmy) == -1];
}
 
Last edited:
thanks for that. i've copied the code across and can't seem to get it to work. you're right the noweekend part was causing the issue, and i've now realised is what stopped it from working. the date range restriction worked and i've since added the noweekend to some services which as you say over wrote the first setting.

i've tried copying and pasting your exact code (changing it to just #date rather than #datepicker) and it stops entirely. nothing now pops up.

also what do you mean bu the tooltip on disabled dates? i've never seen a tooltip on a disabled date.

finally, i like how in your jfiddle link that the date selector is always on show, rather then popping up. is this easy to implement?

EDIT:

you can see the use of this at the link below. the oven cleaning service is the only service that the date restrictions apply to at the moment. i've got the restrictions in place now and taken out the noweekends until i can get it working properly

https://www.mayercleaning.co.uk/online-quote/?service=oven
 
Fairly sure the answer is no said:
i've tried copying and pasting your exact code (changing it to just #date rather than #datepicker) and it stops entirely. nothing now pops up.
Click to expand...
Check the console to see if there's any errors.

Fairly sure the answer is no said:
also what do you mean bu the tooltip on disabled dates? i've never seen a tooltip on a disabled date.
Click to expand...
That was my point :) The third element of the array you were returning was supposed to be the tooltip text of the date, but in reality it rarely works, so you can just omit it and use the shortened logic in my second example

Fairly sure the answer is no said:
finally, i like how in your jfiddle link that the date selector is always on show, rather then popping up. is this easy to implement?
Click to expand...
Yep - this is all down to what element you instantiate the plugin on. If it's an 'input' then it displays as a popup and the selected date is stored as the value of the input. If it's a 'div' it shows in the page at all times, but you need to handle the storing of the selected value yourself.

Fairly sure the answer is no said:
you can see the use of this at the link below. the oven cleaning service is the only service that the date restrictions apply to at the moment. i've got the restrictions in place now and taken out the noweekends until i can get it working properly

https://www.mayercleaning.co.uk/online-quote/?service=oven
Click to expand...
Have you updated the site, as it looks like it's working there for me (Chrome on Windows)
 
so i'm trying to go over this to get it so that the datepicker is always shown. i've got this set up, however it's the storing of the dates that i don't know how to do.

at the moment it's an input field, so i can do that straight forward as the form uses POST to pass the information from one page to the next and back.

i'm trying to get it to set a hidden field to the value selected, however this is proving harder than i had hoped.
 
Last edited:
The datepicker will do that for you.
Use the altField and altFormat settings.

POSTing the selected date value means capturing the input from jQuery and passing it to your PHP code. It's a PITA trying to format dates correctly when passing it between languages and it's always best to use a non region specific format like yyyy-mm-dd. Use this in your altField settings so you POST in this format and display the date on-screen in whatever format you like.
 
EDIT:

so i've got it working for the most part now. i've had the issue with the datepicker auto selected todays date on load, which although i've managed to create a work around for the initial load of page, i'm having an issue with it selecting todays date when i move forward a month and go back to the current month, even when i don't select anything, today is now highlighted again. very annoying as the customer would end up thinking they are getting a quote for today.

so i now need to research a solution to this. an annoying issue as if the datepicker didn't automatically select todays date if setDate is set to null, this would all be working beautifully.
 
Last edited:
Code: 
function available(date) {
  dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, notAvailableDates) !== -1) {
    return [false, "","unAvailable"];
  } else {
    return [true,"","Available"];
  }
}

no realising i want the option to say just saturdays available but not sundays. i've had a play with the above, and looked online but nothing that i can seem to get to work while having the same functions as the above gives.

any help?
 
If you want to make it unavailable on every sunday, you can add:

if(date.getDay() == 0) {return [false, "","unAvailable"];}

That gets the day of the week number from the date. (Sunday = 0, Monday = 1, etc...)
 
Code: 
<script>

var notAvailableDates = ["01-01-2019", "02-01-2019", "03-01-2019", "04-01-2019", "05-01-2019", "07-01-2019", "08-01-2019", "09-01-2019", "10-01-2019", "11-01-2019", "14-01-2019", "15-01-2019"];

</script>

<script>
function available(date) {
  var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
  return [$.datepicker.noWeekends(date)[0] && notAvailableDates.indexOf(dmy) == -1];
}

</script>

i think that's all the code that's related to the datepicker
 
The months and days won't have a 0 prefix, so your not available days check is failing - remove the 0 prefix in your days and months.
 
You must log in or register to reply here.
Back
Top Bottom