如何在实现日期选择器中设置日期

Question

我正在使用 materializecss.com 日期选择器。当我尝试使用 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" />

在 Button 的 Click 事件上，我正在设置日期 :-

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

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

如何在materialize datepicker中设置日期？

Answer 1

Materialize 日期选择器是经过修改的 pickadate.js 选择器。

根据他们的 API docs，这是设置选择器的方法：

获取选择器：

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

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

设置日期：

// 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' })

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

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

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

标题

Answer 4

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

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

Answer 5

您可以使用 V1.0.0-rc.2 中提供的日期选择器方法。

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 src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />

<input type="text" class="datepicker">

defaultDate 将设置一个默认日期，该日期将显示在日期选择器的输入字段中，甚至无需打开选择器。

instance.setDate() 将 select 您打开日期选择器时的日期。

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

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

Picker - Materialize

MDN - Date

Answer 6

pickadate() 的所有答案在较新版本的 Materialise 中不再有效。该方法现在命名为 datepicker()。这是我的代码片段：

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

Answer 7

您可以在初始化时传入您想要默认的选项。例如，下面的 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 8

注意你的 css 和 js 版本的 materialize：如果在 <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();

Answer 9

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

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

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

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

Answer 10

根据文档 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'});

});

如何在实现日期选择器中设置日期

How to set the date in materialize datepicker

javascript

jquery

datepicker

material-design

标题