web-dev-qa-db-ja.com

Materialise 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" />

ButtonのClickイベントで、日付を設定しています：-

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

日付ピッカーを開くと、今日の日付が表示されます。

マテリアライズデートピッカーで日付を設定する方法は？

javascriptjquerydatepickermaterial-design
28
Anup

Materialize datepickerは、変更された pickadate.js ピッカーです。

API docs に準拠して、これがピッカーの設定方法です。

  1. ピッカーを入手する：
var $input = $('.datepicker').pickadate()

// Use the picker object directly.
var picker = $input.pickadate('picker')
  1. 日付を設定します。
// 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' })
41
art-solopov

要素の属性に日付のような形式を追加するだけです。

$('.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' });
13
Gabriel

V1.0.0-rc.2にあるdatepickerのメソッドを使用できます。

<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の入力フィールドに表示されるデフォルトの日付を設定します。

enter image description here

instance.setDate()を開くと、datepickerで日付が選択されます。

enter image description here

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

引数monthIndexは0ベースです。つまり、January = 0およびDecember = 11

ピッカー-マテリアライズ

MDN-日付

6
Germa Vinsmoke

Pickadate（）を使用したすべての回答は、マテリアライズの新しいバージョンでは機能しなくなりました。メソッドの名前はdatepicker（）になりました。コードスニペットを次に示します。

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

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>
1
Agustin
$('#elementID').pickadate('picker').set('select', '21/05/2017', { format: 'dd/mm/yyyy' }).trigger("change");

これは、1行でニーズに合うはずです。トリガーの変更は、必要な場合とそうでない場合がありますが、状況によって異なります。検証のトリガーとしてトリガーする必要があるように。一部の人々がそれを必要とする場合に備えて、フォーマットの日付も含めてください。

0
Syahmi Yusoff
var $input = $('.datepicker').pickadate()

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

見出し

0
sowmya