具体化 CSS 将日期选择器转换为月份选择器

Question

我需要选择一个月份和年份作为过滤器。 我在整个Web应用程序上使用具体化css。现在我遇到了一个问题，我想选择一个月，所以html输入类型=月。但是Materialize CSS只提供日期。如何将我的日期选择器变成月份选择器？

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

我的html很简单，但没有给我月份，它也给了我一天。

<input type="month" class="datepicker">

Answer 1

试试这段代码

在这里，我设置了选择月份的日期

$('.datepicker').pickadate({
selectMonths: true,
format: 'mmmm',
selectYears: false,
buttonImageOnly: false,
disable: [true],
onOpen: function() {
$(".picker__nav--prev, .picker__nav--next").remove();
},
onSet: function( arg ){
var selectedMonth = parseInt(arg.highlight[1]);
var selectedYear = arg.highlight[0];
var selectedDate = arg.highlight[2];
this.close();
this.set('select', [selectedYear, selectedMonth, selectedDate,{ format: 'yyyy/mm/dd' }]);
}
});

.picker__frame {
margin: 0 auto;
max-width: 565px;
}
.picker__date-display {
text-align: center;
background-color: #26a69a;
color: #fff;
padding-bottom: 15px;
font-weight: 300;
float: left;
width: 50%;
height: 330PX;
}
.picker__calendar-container {
padding: 0 1rem;
float: left;
width: 50%;
}
.picker__footer {
text-align: right;
padding: 5px 10px;
clear: both;
width: 50%;
float: right;
}
.picker__month-display {
text-transform: uppercase;
font-size: 2rem;
margin-top: 55px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<input type="month" class="datepicker">

Answer 2

尝试执行此代码，它可能有助于...在此代码中选择日，月和年。

$("#datepicker"(.datepicker({changeMonth： true， maxDate： '0'，changeYear： true， yearRange： '1960：2017'， dateFormat： 'dd-mm-yy'，}(;