1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

jquery datepicker - why not working right?

Discussion in 'HTML, Graphics & Programming' started by Fairly sure the answer is no, Jun 5, 2018.

  1. Fairly sure the answer is no

    Sgarrista

    Joined: Feb 12, 2006

    Posts: 8,767

    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>
     
  2. AHarvey

    Sgarrista

    Joined: Mar 6, 2008

    Posts: 8,723

    Location: Stoke area

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

    Have you tried

    maxDate: "+10m +10d",

    with lower case letters?
     
  3. Spunkey

    Capodecina

    Joined: Oct 18, 2002

    Posts: 13,140

    Location: The land of milk & beans

    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: Jun 5, 2018
  4. Fairly sure the answer is no

    Sgarrista

    Joined: Feb 12, 2006

    Posts: 8,767

    Location: Surrey

    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
     
  5. Spunkey

    Capodecina

    Joined: Oct 18, 2002

    Posts: 13,140

    Location: The land of milk & beans

    Check the console to see if there's any errors.

    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

    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.

    Have you updated the site, as it looks like it's working there for me (Chrome on Windows)
     
  6. Fairly sure the answer is no

    Sgarrista

    Joined: Feb 12, 2006

    Posts: 8,767

    Location: Surrey

    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.