CODEWITHSUNDEEP
javascriptjquery
BillNathan
BillNathan

Reputation: 609

How to show whole month in calendar?

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

Upvotes: 0

Views: 70

Answers (1)

obscure
obscure

Reputation: 12891

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

Upvotes: 2

Related Questions