How to add three different Jquery Ui Datepickers to single page

Question

I have three different Jquery Ui datepickers I need to put on a single page. The first date picker is a normal "pick-a-day" datepicker, the second will allow users to pick a weekly date range, and the last one will let the user pick a date by month/year.

I can get all three datepickers to work individually but I cannot get them all to work on the same page. As of right all three pickers will only let me pick dates by week when they are all on the same page.

I have tried if/else statements, show hide statements, and about a thousand other things I could think of and nothing seems to work. Any help would be appreciated!

Here is the code for my date pickers:

 //datepicker for day
   $('#daypicker').datepicker();

 //datepicker for week

            $(function () {
                var startDate,
                    endDate,
                    selectCurrentWeek = function () {
                        window.setTimeout(function () {
                            $('#weekpicker').datepicker('widget').find('.ui-datepicker-current-day a').addClass('ui-state-active')
                        }, 1);
                    };
                $('#weekpicker').datepicker({
                    "showOtherMonths": true,
                    "selectOtherMonths": true,
                    "onSelect": function (dateText, inst) {
                        var date = $(this).datepicker('getDate'),
                            dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
                        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
                        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
                        $('#weekpicker').val($.datepicker.formatDate(dateFormat, startDate, inst.settings) + ' - ' + $.datepicker.formatDate(dateFormat, endDate, inst.settings));
                        selectCurrentWeek();
                    },
                    "beforeShow": function () {
                        selectCurrentWeek();
                    },
                    "beforeShowDay": function (date) {
                        var cssClass = '';
                        if (date >= startDate && date <= endDate) {
                            cssClass = 'ui-datepicker-current-day';
                        }
                        return [true, cssClass];
                    },
                    "onChangeMonthYear": function (year, month, inst) {
                        selectCurrentWeek();
                    }
                }).datepicker('widget').addClass('ui-weekpicker');
                $('.ui-weekpicker').on('mousemove', 'tr', function () {
                    $(this).find('td a').addClass('ui-state-hover');
                });
                $('.ui-weekpicker').on('mouseleave', 'tr', function () {
                    $(this).find('td a').removeClass('ui-state-hover');
                });
            });


 //datepicker for month/year

            $( "#monthpicker" ).datepicker({
                dateFormat: "mm/yy",
                changeMonth: true,
                changeYear: true
                });

And here is the html:

 <div class="day">
    <label for="daypicker">Month</label>
    <input  class="datepicker" type="text" id="daypicker">
  </div>

 <div class="week">
    <label for="weekpicker">Month</label>
    <input  class="datepicker" type="text" id="weekpicker">
  </div>

  <div class="month">
    <label for="monthpicker">Month</label>
    <input  class="datepicker" type="text" id="monthpicker">
  </div>

please elaborate on what is not working: are you receiving an error? is there some undesired behavior occurring? — GregH, Dec 21 '18 at 15:30
There are no errors, but when all three are on the same page the week picker takes precedence over all the pickers and only choose by week is possible in all three calendars — Jthunter24, Dec 21 '18 at 15:32
can you try putting all of your datepicker js inside `$(function () {..}` instead of only the one for weeks? — GregH, Dec 21 '18 at 15:37
also might want to check this out: https://stackoverflow.com/questions/16169654/conflict-with-two-jquery-datepickers-on-same-page — GregH, Dec 21 '18 at 15:40
I tried putting all my datepicker js inside the ` $(function () {..} ` but it still doesn't work. There are no error messages but only the week picker shows on all the calendars. I had seen the article you linked to previously but it hasn't seemed to help in this scenario. — Jthunter24, Dec 21 '18 at 19:07

Twisty · Accepted Answer · 2018-12-21T21:22:13.440

I ran the following code:

$(function() {

  var startDate = new Date(),
    endDate = new Date(),
    selectCurrentWeek = function() {
      window.setTimeout(function() {
        $('#weekpicker').datepicker('widget').find('.ui-datepicker-current-day a').addClass('ui-state-active')
      }, 1);
    };

  //datepicker for day
  $('#daypicker').datepicker();

  //datepicker for week  
  $('#weekpicker').datepicker({
    "showOtherMonths": true,
    "selectOtherMonths": true,
    "onSelect": function(dateText, inst) {
      var date = $(this).datepicker('getDate'),
        dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
      startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
      endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
      $('#weekpicker').val($.datepicker.formatDate(dateFormat, startDate, inst.settings) + ' - ' + $.datepicker.formatDate(dateFormat, endDate, inst.settings));
      selectCurrentWeek();
    },
    "beforeShow": function() {
      selectCurrentWeek();
    },
    "beforeShowDay": function(date) {
      var cssClass = '';
      if (date >= startDate && date <= endDate) {
        cssClass = 'ui-datepicker-current-day';
      }
      return [true, cssClass];
    },
    "onChangeMonthYear": function(year, month, inst) {
      selectCurrentWeek();
    }
  }).datepicker('widget').addClass('ui-weekpicker');

  $('.ui-weekpicker').on('mousemove', 'tr', function() {
    $(this).find('td a').addClass('ui-state-hover');
  });

  $('.ui-weekpicker').on('mouseleave', 'tr', function() {
    $(this).find('td a').removeClass('ui-state-hover');
  });

  //datepicker for month/year
  $("#monthpicker").datepicker({
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true
  });
});

.wrapper label {
  display: inline-block;
  width: 60px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="day wrapper">
  <label for="daypicker">Day</label>
  <input class="datepicker" type="text" id="daypicker">
</div>

<div class="week wrapper">
  <label for="weekpicker">Week</label>
  <input class="datepicker" type="text" id="weekpicker">
</div>

<div class="month wrapper">
  <label for="monthpicker">Month</label>
  <input class="datepicker" type="text" id="monthpicker">
</div>

This appears to work as expected.

How to add three different Jquery Ui Datepickers to single page

1 Answers1