如何在日历中显示整个月份？

Question

我正在使用amsul DateTimePicker：https://amsul.ca/pickadate.js/date/

$('.datepicker').pickadate()

css prettyprint-override">.picker__day--outfocus {
 visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>
  <input type="text" class="datepicker">

Answer 1

不幸的是，amsul datepicker没有提供一个内置函数来实现这一点。但是，您可以使用一些自定义css来伪造它。实际上，覆盖picker__nav--prev和picker__nav--next的样式，并使它们不可见。

要在当前月份的视图中隐藏前一个月/下一个月的日子，必须覆盖Picker__day--Outfocus的样式。

$('.datepicker').pickadate();

.picker__nav--prev {
  visibility: hidden;
}

.picker__nav--next {
  visibility: hidden;
}
.picker__day--outfocus {
  visibility: hidden;
}

html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>
<input type="text" class="datepicker">