Проблема с выделением дат в datepicker - PullRequest
Новая
       95

Проблема с выделением дат в datepicker

0 голосов
/ 29 мая 2020

Я пытаюсь выделить даты с помощью известного кода, но мне нужна небольшая помощь, поскольку даты не выделены. 

var highlightdate = ["2020-06-19", "2020-06-20", "2020-06-26", "2020-06-25", "2020-06-30"];
var date = new Date();
jQuery(document).ready(function() { 
    $( "#datepicker").datepicker({ 
        dateFormat: 'yy-mm-dd',
        beforeShowDay: function(date) {
            var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
            for (i = 0; i < highlightdate.length; i++) {
                if($.inArray(y + '-' + (m+1) + '-' + d,highlightdate) != -1) {
          
                    return [true, 'highlighdate', ''];
                }
            }
            return [true];

        }
    });
});
   .highlightdate {
       background-color: #ff0;
   }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">

      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
<div id="datepicker"></div>

Ответы [ 2 ]

1 голос
/ 30 мая 2020

Вы также можете использовать $.datepicker.formatDate( format, date, options ) в Документах: https://api.jqueryui.com/datepicker/

Пример кода. 

jQuery(function($) {
  var dates = ["2020-06-19", "2020-06-20", "2020-06-26", "2020-06-25", "2020-06-30"];
  $("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function(dt) {
      var dText = $.datepicker.formatDate("yy-mm-dd", dt);
      var result = [true, "", ""];
      if (dates.indexOf(dText) >= 0) {
        result = [true, 'ui-state-highlight', ''];
      }
      return result;
    }
  });
});
.ui-state-highlight>a.ui-state-default {
  background: #ffe45c;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/ui-lightness/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 id="datepicker"></div>
1 голос
/ 29 мая 2020

Вы можете сделать это следующим образом: добавьте 0 в случае, если значение для месяца меньше 10, потому что вы получаете 6 июня как значение для m, а не 06. Также исправьте опечатку «highlighdate» в return [true, 'highlighdate', '']; на «выделить дату». 

var highlightdate = ["2020-06-19", "2020-06-20", "2020-06-26", "2020-06-25", "2020-06-30"];
var date = new Date();
jQuery(document).ready(function() {
  $("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function(date) {
      var m = date.getMonth(),
        d = date.getDate(),
        y = date.getFullYear();
      if (m < 10) {
        m = "0" + (m + 1);
      }
      else {
         m = m + 1
      }
      for (i = 0; i < highlightdate.length; i++) {
        if ($.inArray(y + '-' + m + '-' + d, highlightdate) != -1) {
          return [true, 'highlightdate', ''];
        }
      }
      return [true];

    }
  });
});
.highlightdate {
       background-color: #ff0;
   }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel = "stylesheet">
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="datepicker"></div>
...