如何在日歷中顯示整個月？

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