实现 css 日期输入

Question

如何获取我从 materialize css datepicker 中选择的日期的值下面是代码

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

</div>

Answer 1

下载这个库http://materializecss.com/bin/materialize-v0.97.3.zip 或

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/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
          });

Answer 2

获取日期选择器的值到 javascript 变量。

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

Answer 3

JSFIDDLE

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

这将在通过 jQuery 的输入中提醒当前日期的值。

只需验证其在输入中是否正确显示值是否通过插件如 firebug for firefox 或 chrome developers tools for chrome 因为有时插件不显示输入中的值同时显示在标签或其他内容中。然后，您可以通过在该输入字段中的每次值更改时使用 .change() 来获取值。

请注意，如果插件中有本机方法，请使用它，而不要使用它。

Answer 4

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

Answer 5

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

在使用 javascript 创建日期选择器时创建日期选择器对象。

请检查此 link： http://amsul.ca/pickadate.js/api/#method-get-value

实现 css 日期输入

Materialize css date input

javascript

css

materialize