Question

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

是否可以在日历视图中显示当前月份？如您在预览中所见，它也具有上个月和下个月的日期。我只想将其限制为当前日期的30或31天。

这将是很大的帮助！

谢谢。

$('.datepicker').pickadate()

.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;
}

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

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

1 个答案: