web-dev-qa-db-fra.com

Comment définir la date dans matérialiser datepicker

J'utilise materializecss.com Datepicker. Lorsque j'essaie de définir la date avec jQuery, la date n'est pas définie. Voici mon 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" />

Sur l'événement Click d'un bouton, je règle la date: -

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

Quand j'ouvre le sélecteur de date, il me montre la date d'aujourd'hui.

Comment définir la date dans matérialiser datepicker?

javascriptjquerydatepickermaterial-design
26
Anup

Materialise datepicker est un sélecteur modifié pickadate.js .

Pour accéder à leurs documents API , voici comment définir le sélecteur:

  1. Obtenez le sélecteur:

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

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

  1. Définir la date:

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

ajoutez simplement le format que vous voulez pour votre date dans les attributs de votre élément.

$('.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

Vous pouvez utiliser les méthodes de datepicker présentes dans 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 définira une date par défaut qui sera affichée dans le champ d'entrée de datepicker sans même ouvrir le sélecteur.

 enter image description here

instance.setDate() sélectionnera la date dans datepicker quand vous l'ouvrirez.

 enter image description here

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

L'argument monthIndex est basé sur 0. Cela signifie que January = 0 et December = 11

Picker - Matérialiser

MDN - Date

4
Germa Vinsmoke

Vous pouvez transmettre les options que vous souhaitez utiliser par défaut pour init. Par exemple, le code js ci-dessous fonctionnerait avec le balisage:

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

Toutes les réponses avec pickadate () ne fonctionnent plus dans les nouvelles versions de Materialize. La méthode s'appelle maintenant datepicker (). Voici mon extrait de code:

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");

Cela devrait correspondre à vos besoins en une ligne. Le changement de déclenchement dont vous pouvez avoir besoin ou pas, dépend de votre situation, comme moi, j'en ai besoin pour que la validation se déclenche. Indiquez également le format de la date au cas où certaines personnes en auraient besoin.

0
Syahmi Yusoff

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

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

Titre

0
sowmya