Materialize CSS 将 datepicker 变成 monthpicker答案

【问题标题】：Materialize CSS turn datepicker into monthpickerMaterialize CSS 将 datepicker 变成 monthpicker
【发布时间】：2017-07-19 09:21:42
【问题描述】：

我需要选择月份和年份作为过滤器。我在整个 web 应用程序中使用了物化 css。现在遇到一个问题，我要挑月份，所以html输入type=month。但是 Materialise 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">

【问题讨论】：

试试这个jsfiddle.net/e3w1fo7q
不行，还是得点一天才能得到日期

标签： html datepicker materialize

【解决方案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">

【讨论】：

CSS 没有被添加......也没有！重要的是，它保持不变，我得到箭头错误
你能分享错误吗？你要添加什么 css
.picker__nav--prev,.picker__nav--next { 显示：无；我尝试添加这个 css，但没有添加，箭头仍然可见，但是错误消失了。
实际上没有添加任何css，但布局实际上很好，我只想在下个月删除那些箭头，因为它们不起作用或者有没有办法让它们起作用？
您可以使用 css display:none 删除这些箭头，在您的 css 中添加样式。我找不到使它们起作用的方法，这里使用下拉选择月份时的 onset 函数返回值跨度>

【解决方案2】：

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

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

【讨论】：

这不是materializecss？