jquery datepicker - why not working right?

unwashed potato! · 5 Jun 2018 at 00:21

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>

AHarvey · 5 Jun 2018 at 08:53

Are you using a local install of JQuery or the CDN?

Have you tried

maxDate: "+10m +10d",

with lower case letters?

GravyMonster · 5 Jun 2018 at 09:01

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];
}

unwashed potato! · 5 Jun 2018 at 19:35

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

GravyMonster · 5 Jun 2018 at 20:12

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.

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.

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?

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

Have you updated the site, as it looks like it's working there for me (Chrome on Windows)

unwashed potato! · 5 Jun 2018 at 23:51

I have updated it yes, but the weekends are now able to be selected which I don't want but will have for now until I get it fixed.

unwashed potato! · 17 Sep 2018 at 13:31

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.

touch · 19 Sep 2018 at 14:44

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.

unwashed potato! · 19 Sep 2018 at 18:54

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.

unwashed potato! · 20 Sep 2018 at 13:50

is the best i'm going to get while the datepicker auto highlights todays date.

what you think?

now allows me to select certain dates as unavailable as well as weekends, and is inline

https://www.mayercleaning.co.uk/online-quote/?service=oven

thanks for the help

unwashed potato! · 18 Oct 2018 at 21:20

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?

touch · 19 Oct 2018 at 11:52

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...)

unwashed potato! · 19 Oct 2018 at 11:57

thanks. worked a treat

unwashed potato! · 1 Jan 2019 at 14:41

some reason it not longer works now we are in 2019. anyone able to see why that could be?

https://www.mayerovencleaning.co.uk/online-quote/?service=oven

sb89 · 1 Jan 2019 at 22:38

What exactly doesn't work? Seems to be working for me.

unwashed potato! · 2 Jan 2019 at 00:24

sorry the restriction of dates no longer works. i want to have the date not selectable until the 14th as we're fully booked, but all dates are still shown to be picked

AHarvey · 2 Jan 2019 at 14:23

Post all the new code up for it so we can see. The original code has hardcoded dates in it for instance so it's no good for a question 6 months later

unwashed potato! · 2 Jan 2019 at 17:58

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

planty · 2 Jan 2019 at 19:09

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.