发表新帖
发表新帖

How to set the date in materialize datepicker

后端 未结
关注
10 1225
长发绾君心
长发绾君心 2020-12-05 09:36

I am using materializecss.com Datepicker. When i try to set date with jquery, the date doesn\'t get set. Here is my Code :-

// Materialize Date Picker
    wi
相关标签:
10条回答
  • 花落未央
    2020-12-05 10:17

    watch out for your css and js version of materialize: if in the <head> you have 

    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

    then stick to it having same JS version so that you can use $('.datepicker').pickadate('picker').set('select','your parsed date',{format:'your format'}).trigger('change')

    If version is 1.0.0 then you will have to use $('.datepicker').datepicker();

    0 讨论(0)
  • 清歌不尽
    2020-12-05 10:21

    just add the format you want your date looks like in the attributes of your element.

    $('.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' });
    0 讨论(0)
  • 春和景丽
    2020-12-05 10:21 

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

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

    Heading

    0 讨论(0)
  • 不要未来只要你来
    2020-12-05 10:22

    You can pass in the options that you want to default to on init. For example the below js code would work with markup:

    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 讨论(0)
  • -上瘾入骨i
    2020-12-05 10:25

    Materialize datepicker is a modified pickadate.js picker.

    Accodging to their API docs, this is how to set the picker:

    1. Get the picker:

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

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

    1. Set the 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' })

    0 讨论(0)
  • 谎友^
    2020-12-05 10:32

    You can use methods of datepicker which are present in 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 will set a default Date that will be shown in input-field of datepicker without even opening the picker.

    instance.setDate() will select the date in datepicker when you'll open it.

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

    The argument monthIndex is 0-based. This means that January = 0 and December = 11

    Picker - Materialize

    MDN - Date

    0 讨论(0)
 看不清?
提交回复
热议问题