wake-up-neo.com

So stellen Sie das Datum in materialize datepicker ein

Ich verwende materializecss.com Datepicker. Wenn ich versuche, ein Datum mit Jquery festzulegen, wird das Datum nicht festgelegt. Hier ist mein Code: -

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

Beim Klickereignis eines Buttons stelle ich das Datum ein: -

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

Wenn ich das Datepicker öffne, wird mir das heutige Datum angezeigt.

Wie stelle ich das Datum in materialize datepicker ein?

javascriptjquerydatepickermaterial-design
26
Anup

Materialize datepicker ist ein modifizierter pickadate.js picker.

Entsprechend ihrer API-Dokumente setzen Sie den Picker wie folgt:

  1. Holen Sie sich den Picker:

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

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

  1. Datum einstellen:

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

fügen Sie einfach das Format hinzu, das Ihr Datum so aussehen soll, wie in den Attributen Ihres Elements.

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

Sie können Datumspicker-Methoden verwenden, die in V1.0.0-rc.2 vorhanden sind.

<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 setzt ein Standarddatum, das im Eingabefeld des Datepickers angezeigt wird, ohne dass der Picker geöffnet werden muss.

 enter image description here

instance.setDate() wählt das Datum in datepicker aus, wenn Sie es öffnen.

 enter image description here

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

Das Argument monthIndex ist 0-basiert. Dies bedeutet, dass January = 0 und December = 11

Picker - Materialise

MDN - Datum

4
Germa Vinsmoke

Sie können die Optionen, die Sie standardmäßig verwenden möchten, bei init übergeben. Zum Beispiel würde der folgende js-Code mit Markup funktionieren:

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>
0
Agustin

Alle Antworten mit pickadate () funktionieren in neueren Versionen von Materialise nicht mehr. Die Methode heißt jetzt datepicker (). Hier ist mein Code-Snippet:

var element = document.querySelector('.datepicker');
M.Datepicker.getInstance(element).setDate(new Date(2018,8,7), true);
0
hendrikbeck
$('#elementID').pickadate('picker').set('select', '21/05/2017', { format: 'dd/mm/yyyy' }).trigger("change");

Dies sollte Ihren Bedürfnissen in einer Zeile entsprechen. Auslöseränderung, die Sie möglicherweise brauchen oder nicht, hängt von Ihrer Situation ab. Wie ich brauche ich sie, damit die Bestätigung ausgelöst werden kann. Geben Sie auch Datumsangaben an, falls einige Personen dies benötigen.

0
Syahmi Yusoff

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

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

Überschrift

0
sowmya