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

Question

I'm using amsul datetimepicker: https://amsul.ca/pickadate.js/date/

Is there any way to show the current month in the calendar view? As you can see in the preview it has previous and next month dates as well. I just want to restrict it to 30 or 31 days of the current mont.

It will be a big help!

Thanks.

 $('.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

Unfortunately the amsul datepicker doesn't offer a built-in function to do this. You can fake it using some custom css however. Essentially overwrite the styles for picker__nav--prev & picker__nav--next and make them invisible.

To hide the days of the previous month/the next month in the current month's view you have to overwrite the style for 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">