Question

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

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

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

$（＆＃34; #datepicker＆＃34;）。datepicker（{changeMonth：true，maxDate：＆＃39; 0＆＃39;，changeYear：true，yearRange：＆＃39; 1960：2017＆＃39; ，dateFormat：＆＃39; dd-mm-yy＆＃39;，}）;

实现CSS将datepicker转换为monthpicker

2 个答案: