Как установить дату в материализовать datepicker

Я использую materializecss.com Datepicker. Когда я пытаюсь установить дату с jquery, дата не устанавливается. Вот мой код: -

// Materialize Date Picker
    window.picker = $('.datepicker').pickadate({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: 100, // Creates a dropdown of 15 years to control year
        format: 'dd/mm/yyyy'    
    });

<input type="text" id="Date" class="datepicker" />

В событии Click кнопки Button я устанавливаю дату: -

$("#Date").val('23/01/2015');

Когда я открываю datepicker, он показывает мне сегодняшнюю дату.

Как установить дату в материализованной datepicker?

Ответ 1

Materialize datepicker - это модифицированный pickadate.js сборщик.

Подписываясь на свои API-документы, это как установить сборщик:

Получить сборщик:

var $input = $('.datepicker').pickadate()

// Use the picker object directly.
var picker = $input.pickadate('picker')

Ответ 2

просто добавьте формат, который вы хотите, чтобы ваша дата выглядела в атрибутах вашего элемента.

$('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15, // Creates a dropdown of 15 years to control year
    format: 'dd-mm-yyyy' });

Ответ 3

Вы можете использовать методы datepicker, которые присутствуют в V1.0.0-rc.2.

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var options = {
            defaultDate: new Date(2018, 1, 3),
            setDefaultDate: true
        };
        var elems = document.querySelector('.datepicker');
        var instance = M.Datepicker.init(elems, options);
        // instance.open();
        instance.setDate(new Date(2018, 2, 8));
    });
</script>

defaultDate установит дату по умолчанию, которая будет отображаться в поле ввода средства defaultDate даты, даже не открывая средство выбора.

instance.setDate() выберет дату в DatePicker, когда вы ее откроете.

Note- new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

Аргумент monthIndex на 0. Это означает, что January = 0 и December = 11

Picker - материализация

MDN - Дата

Ответ 4

Все ответы с помощью pickadate() больше не работают в новых версиях Materialize. Метод теперь называется datepicker(). Вот мой фрагмент кода:

var element = document.querySelector('.datepicker');
M.Datepicker.getInstance(element).setDate(new Date(2018,8,7), true);

Ответ 5

Вы можете передать параметры, которые вы хотите использовать по умолчанию при инициализации. Например, приведенный ниже код js будет работать с разметкой:

const elems2 = document.querySelectorAll('.datepicker');
  for (element of elems2) {
    const date = element.dataset.defaultDate
    if (date !== undefined) {
      M.Datepicker.init(element, {defaultDate: new Date(date), yearRange: 15})
    }
    else {
       M.Datepicker.init(element, {})
    }
  }

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
           
           
           
         <input class="validate datepicker valid" required="required" data-default-date="2009-07-11 10:14:47 -0700" name='picker' type="text">
         <label for="picker" class="active">Date Picker 10 years ago</label>

Ответ 6

var $input = $('.datepicker').pickadate()

// Use the picker object directly.
var picker = $input.pickadate('picker')

Ответ 7

$('#elementID').pickadate('picker').set('select', '21/05/2017', { format: 'dd/mm/yyyy' }).trigger("change");

Это должно соответствовать вашим потребностям в одной строке. Изменение триггера, которое вам может понадобиться или, может быть, нет, зависит от вашей ситуации, например, мне нужна его для проверки. Также укажите дату форматирования на случай, если кому-то это понадобится.

Ответ 8

следите за вашей css и js версией материализации: если в <head> у вас есть

<link rel="stylesheet"  href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'; return false;">

затем придерживайтесь того же варианта JS так что вы можете использовать $('.datepicker').pickadate('picker').set('select','your parsed date',{format:'your format'}).trigger('change')

Если версия 1.0.0, то вам придется использовать $('.datepicker').datepicker();