Estoy usando materializecss.com selector de fecha. Cuando intento configurar la fecha con jquery, a la fecha no se establecen. Aquí está mi Código :-

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

El evento Click de un Botón , estoy ajuste de la fecha :-

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

Cuando abro el datepicker que me muestra la fecha de hoy.

Cómo establecer la fecha en que se materializan en datepicker?

InformationsquelleAutor Anup | 2015-05-19

7 Comentarios

  1. 41

    Materializar datepicker es una modificación de pickadate.js selector.

    Accodging a sus API docs, esta es la forma para establecer el selector:

    1. Obtener el selector:

    JS:

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

    1. Establecer la fecha:

    JS:

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

    • He definido el datepicker en custom.js archivo. Cuando intento configurar la fecha como por su respuesta desde fuera custom.js que me muestra el error :- Uncaught ReferenceError: picker is not defined
    • Yo he declarado global variable como esta :-window.picker = $input.pickadate('picker'); .. Ahora su trabajo..gracias.
  2. 13

    acaba de agregar el formato que usted desea que su fecha se ve como en los atributos de elemento.

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

    Puede utilizar los métodos de datepicker que están presentes en 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 va a fijar una Fecha predeterminada que se muestra en la entrada de campo de datepicker sin necesidad de abrir el selector.

    Cómo establecer la fecha en que se materializan en datepicker

    instance.setDate() se selecciona la fecha en datepicker cuando voy a abrirlo.

    Cómo establecer la fecha en que se materializan en datepicker

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

    El argumento monthIndex está basado en 0. Esto significa que January = 0 y December = 11

    Selector De Materializarse

    MDN – Fecha

    • setDefaultDate: cierto, no es el resultado en una salida con la fecha predeterminada en la pantalla. Soluciones para que?
    • Tengo dos campos de fecha. Cuando he añadido este script el calendario está mostrando sólo el primer campo, no para el segundo campo. Cualquier hacks para mostrar el calendario para el segundo campo también?
    • Resuelto!! acabo de cambiar la clase para el segundo campo y se añade a la secuencia de comandos. Funciona como un encanto!
  4. 3

    Alle respuestas con pickadate() no funciona en las versiones más recientes de Materializarse. El método se llama ahora datepicker(). Aquí está mi fragmento de código:

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

    Este debe adaptarse a sus necesidades en una sola línea. Desencadenar el cambio que necesita, o tal vez no, depende de su situación, como yo lo necesito para la validación de gatillo. También se incluyen con el formato de la fecha, sólo en el caso de algunas personas que lo necesitan.

  6. 0

    Puede pasar en las opciones que desee de forma predeterminada en init.
    Por ejemplo, el siguiente código js trabajaría con marcado:

    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, {})
        }
      }

    HTML:

    <!-- 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 establece el valor de entrada predeterminado, pero no creo que esta fue la pregunta
  7. -1

    JS:

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

    Título

    • Si bien este código los responder a la pregunta, proporcionar contexto adicional sobre como y/o porque se resuelve el problema podría mejorar la respuesta del valor a largo plazo.

Dejar respuesta

Please enter your comment!
Please enter your name here