I have been looking online to customize my date and time picker. I have tried numerous ways to get this to work and it will not work.
The date and time picker will work but in terms of using stepping, selecting a range of days, and finally a time range.
- I am looking to set the interval of time to be 20 minutes(9,20, 9.40
etc). - I am looking to make sure that you can only choose Monday to
Friday - I am looking to make sure you can only select between the
ranges of 9-5pm.
I did notice when I used the disable feature it did disable certain days but not saturday or sunday.
Can any help me get around this problem?
This is my code
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script>
$(function () {
});
</script>
}
You can use the necessary options when initializing the datetimepicker:
- For 20 minutes step, add the option
minuteStep: 20
- To disable weekends, add the option
daysOfWeekDisabled: [0,6]
were 0 is Sunday and 6 is Saturday. - The option to change the start and end times for a day doesn’t exist in the documentation at Bootstrap DateTimePicker, will update the answer if I find any way.
You can use options in the following way:
$("#date-time-element").datetimepicker({minuteStep: 20, ...});