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>
 
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
 
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:
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?
 
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
 
You must log in or register to reply here.
Back
Top Bottom