Отключить год для JQueryUI DatePicker - PullRequest
Новая
       7

Отключить год для JQueryUI DatePicker

0 голосов
/ 06 декабря 2018

Я пытаюсь отключить годы из моего "YearPicker?", Это DatePicker, где вы можете выбрать только годы.Мне нужно отключить все годы и включить только диапазон лет (с 2012 по настоящее время, например).

Я использую JQueryUI DatePicker, и он выглядит так:

enter image description here

CSS: 

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <style>
        .ui-datepicker-calendar {
            display: none;
        }        
    </style>

JS: 

<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>
<script>
    $( function() {
        $('#datepicker').datepicker({
            viewMode: 2,
            format: 'yyyy',
            maxDate: new Date(new Date().getFullYear(), 11, 31),
            minDate: new Date(2012, 0, 1)
        });
    })
</script>

HTML: 

<label>Year: <input class="form-control" type="text" id="datepicker"></label>

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018

Решено!Я импортировал Bootstrap DatePicker и JQueryUI DatePicker, я думал, что использую только второй, но приложение обнаруживает только первый, мой код теперь такой и работает: 

$('#datepicker').datepicker({
                    minViewMode: 2,
                    format: 'yyyy',
                    startDate: '2012',
                    endDate: 'y'
                });

Спасибо всемза помощь!

0 голосов
/ 07 декабря 2018

Вы можете сделать то, что делаете, но я думаю, что это немного больше работы, чем необходимо.Я хотел бы предложить, возможно, рассмотреть возможность использования автозаполнения вместо этого.Взгляните: 

$(function() {
  $("#datepicker").autocomplete({
    minLength: 0,
    source: function(req, resp) {
      var today = new Date();
      var min = today.getFullYear() - 6;
      // Adjust above as needed, currently 6 years before this year
      var results = [];
      for (min; min <= today.getFullYear(); min++) {
        results.push(min.toString());
      }
      resp(results)
    }
  }).focus(function(e) {
    $(e.target).autocomplete("search", "");
  });
})
<link rel="stylesheet" href="https://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>

<label>Year: <input class="form-control" type="text" id="datepicker" data-years="6"></label>

Можно переместить это в свою собственную функцию, если это необходимо. 

var function makeYearList(n){
  var today = new Date();
  var min = today.getFullYear() - n;
  var results = [];
  for (min; min <= today.getFullYear(); min++) {
    results.push(min.toString());
  }
  return results;
}

Вы также можете настроить тематику, чтобы вывести их по горизонтали и вертикали..

Надеюсь, это поможет.

...