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

Posted 2023-02-22

【中文标题】如何在物化日期选择器中设置日期

【英文标题】：How to set the date in materialize datepicker

【发布时间】：2015-07-31 05:13:43

【问题描述】：

我正在使用 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" />

在按钮的 Click 事件中，我正在设置日期：-

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

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

？

【参考方案1】：

Materialize datepicker 是修改后的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' )

【讨论】：

我在custom.js 文件中定义了日期选择器。当我尝试根据您在 custom.js 外部的回答设置日期时，它显示错误：- Uncaught ReferenceError: picker is not defined

我这样声明global variable :-window.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】：

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

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

标题

【讨论】：

虽然此代码可能回答了问题，但提供了有关如何和/或为什么解决问题的附加上下文会提高答案的长期价值。

【参考方案4】：

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

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

【参考方案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() 将在您打开日期选择器时选择日期。

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

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

Picker - Materialize

MDN - Date

【讨论】：

setDefaultDate: true 不会产生显示默认日期的输出。有什么解决方法吗？

我有两个日期字段。当我添加此脚本时，日历仅显示第一个字段，而不显示第二个字段。是否也有任何技巧可以显示第二个字段的日历？

想通了！！只需更改第二个字段的类并添加到脚本中。它就像一个魅力！

【参考方案6】：

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

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

【参考方案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>

【讨论】：

setDefaultDate 设置默认输入值，但我不认为这是问题

【参考方案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();

【讨论】：

如果在 Chrome 中使用它，还要添加 $('.datepicker').on('mousedown',function(event) event.preventDefault(); ) （已知问题：link）

【参考方案9】：

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

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

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

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

【参考方案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');

);