Question

我正在使用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事件中，我正在设置日期： -

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

当我打开日期选择器时，它会显示今天的日期。

如何在materialise datepicker中设置日期？

Answer 1

Materialise datepicker是一个经过修改的pickadate.js选择器。

住在API docs，这是设置选择器的方法：

获取选择器：

＆＃13;

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

＆＃13;

设置日期：

＆＃13;

// Using arrays formatted as [YEAR, MONTH, DATE].
picker.set('select', [2015, 3, 20])

// Using JavaScript Date objects.
picker.set('select', new Date(2015, 3, 30))

// Using positive integers as UNIX timestamps.
picker.set('select', 1429970887654)

// Using a string along with the parsing format (defaults to `format` option).
picker.set('select', '2016-04-20', { format: 'yyyy-mm-dd' })

＆＃13;

Answer 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' });

Answer 3

您可以使用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将设置一个默认日期，该日期将显示在datepicker的输入字段中，而无需打开选择器。

instance.setDate()将在打开日期选择器时选择日期。

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

参数monthIndex从0开始。这意味着January = 0和December = 11

Picker - Materialize

MDN - Date

Answer 4

在新版本的Materialize中，带有pickadate（）的Alle答案不再起作用。该方法现在命名为datepicker（）。这是我的代码段：

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

Answer 5

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

这应该适合您的需求。您可能需要或可能不需要触发更改，取决于您的情况，就像我需要它来验证触发一样。还包括格式日期，以防万一有人需要它。

Answer 6

您可以将要默认设置的选项传递给init。例如，以下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>

Answer 7

如果您使用angular或类似的东西来管理Web应用程序，并且根据materialize文档，您将无法实例化Datepicker对象，请使用jQuery您可以引用对象的以下方法：

$('.datepicker').datepicker('setDate', new Date());

在第一个参数（在这种情况下为setDate）中，您可以指定要使用的方法名称。在第二个参数中，在这种情况下为new Date()，您将把值传递给函数（如果有）。

在该示例中，该行会将类别为.datepicker的所有日期选择器的日期更新为今天。

Answer 8

根据文档materializecss.com 检查日期格式选项。

// date picker
$(document).ready(function(){

  $('.datepicker').datepicker( {"format":'dd-mm-yyyy'} ).datepicker("setDate", new Date());

});

如果您不需要日历中突出显示的当前日期，可以删除代码并将其更改为以下代码，

// date picker
$(document).ready(function(){

  $('.datepicker').datepicker( {"format":'dd-mm-yyyy'});

});

Answer 9

＆＃13;

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

＆＃13;

标题

Answer 10

当心您实现的CSS和js版本：如果您在<head>中拥有

<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

然后坚持使用相同的JS版本这样您就可以使用$('.datepicker').pickadate('picker').set('select','your parsed date',{format:'your format'}).trigger('change')

如果版本为1.0.0，则必须使用 $('.datepicker').datepicker();

如何在物化日期选择器中设置日期

10 个答案:

标题