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: 9,034

    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,988

    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,461

    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: 9,034

    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,461

    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: 9,034

    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.
     
  7. Fairly sure the answer is no

    Sgarrista

    Joined: Feb 12, 2006

    Posts: 9,034

    Location: Surrey

    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: Sep 17, 2018
  8. touch

    Capodecina

    Joined: Oct 28, 2006

    Posts: 10,597

    Location: Sufferlandria

    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.
     
  9. Fairly sure the answer is no

    Sgarrista

    Joined: Feb 12, 2006

    Posts: 9,034

    Location: Surrey

    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: Sep 20, 2018
  10. Fairly sure the answer is no

    Sgarrista

    Joined: Feb 12, 2006

    Posts: 9,034

    Location: Surrey

  11. Fairly sure the answer is no

    Sgarrista

    Joined: Feb 12, 2006

    Posts: 9,034

    Location: Surrey

    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?
     
  12. touch

    Capodecina

    Joined: Oct 28, 2006

    Posts: 10,597

    Location: Sufferlandria

    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...)
     
  13. Fairly sure the answer is no

    Sgarrista

    Joined: Feb 12, 2006

    Posts: 9,034

    Location: Surrey

    thanks. worked a treat