How do I get the value of a date that I have selected from materialize css datepicker Below is the code

<!--The Date Born-->
<div class="col s12 m6">
     <label for="Icon_date">Date Born</label>
     <input type="date" class="datepicker" id="datepicker">

</div>

How do I get the value of a date that I have selected from materialize css datepicker Below is the code

<!--The Date Born-->
<div class="col s12 m6">
     <label for="Icon_date">Date Born</label>
     <input type="date" class="datepicker" id="datepicker">

</div>

• javascript
• css
• materialize

5 Answers 5

JSFIDDLE

alert($('.datepicker').val());

This will alert the value of current date in the input via jQuery.

Just verify that if its correct showing value inside input or not via plugin like firebug for firefox or chrome developers tools for chrome because some times plugin don't show up the value in the input while show up in label or something else. Then you can get value by using .change() on each time value changes in that input field.

Note that if there is method natively in plugin use that and do not use this at all.

To get the value of the datepicker to a javascript variable.

var date = $('#datepicker').val();

var datePickerObject = $('#datepicker').pickadate().pickadate('picker')    
console.log(datePickerObject.get())

Create datepicker object when you create datepicker with javascript.

please check this link: http://amsul.ca/pickadate.js/api/#method-get-value

download this library http://materializecss./bin/materialize-v0.97.3.zip or

    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>



  $('.datepicker').pickadate({
            selectMonths: true, // Creates a dropdown to control month
            selectYears: 15 // Creates a dropdown of 15 years to control year
          });

<script>
    $(function () {
    $('#date').datepicker({
        changeYear: true,
        changeMonth:true,
        yearRange: '1980:2013', 
        dateFormat: 'dd-MM-yy',
        beforeShowDay: function (date) {
            var day = date.getDay();
            var year = $("#ui-datepicker-div .ui-datepicker-year:selected").val();
            return [(day != 0), ''];
        }
    });
});

 </script>