Customize date and time with ASP.NET Core MVC built in calendar?
Question
I have watched a few tutorials on how to get the DateTimePicker working and I cannot get it to work.
However, I did notice my application has a basic built-in calendar. Please see below:
I want to know how I can customize this to format the time so it is only 20-30 minute intervals of each hour and limited the booking time from 9 am - 5 pm?
Also, I would like to be able to change the 01/01/0001 00:00 to be at least starting from this year onwards!
Here is my shared layout page which I have removed previous code in the scripts section that I was trying to get to work
I would like to point out to the viewer I have tried this many ways installing packages etc and it never showed up on my www root file. This template came with these styles etc already linked
Layout Page
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap 5 CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous">
<!------ Come back to. Change layout using the cdn instead of installing the layout-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons@1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons@1.4.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
</head>
<body>
<partial name="_NavBar" /> @*Created a partial to make the _layout page more nicer for
presentation purposes*@
<div class="container">
<!-- AMC Any alert defined in controller is rendered here -->
<partial name="_Alert" />
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© @DateTime.Now.Year - SolutionName- <a asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<!-- Bootstrap 5 JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- JQuery Needed for .NET Validation -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<!------- Allowing me to use Fonts -->
<script src="https://kit.fontawesome.com/7bdf81a9a5.js" crossorigin="anonymous"></script>
<!-------- Allowing me to use datatable.net tables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
View page for creating appointment:
<h4>Create Appointment</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="CreateAppointmentBooking">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input type="hidden" asp-for="PatientId" class="form-control" />
<label asp-for="StartDateTimeBooking" class="control-label"><i class="bi bi-book" id="datepicker"></i> Book Appointment</label>
<input asp-for="StartDateTimeBooking" class="form-control" id="datepicker" />
<span asp-validation-for="StartDateTimeBooking" class="text-danger"></span>
</div>
<div class="form-group mt-3">
<label asp-for="NameOfDoctor" class="control-label"><i class="bi bi-person"></i>Name Of Doctor</label>
<select asp-for="NameOfDoctor" asp-items="Html.GetEnumSelectList<PatientHut.Data.Models.Doctor>()" class="form-control">
<option>Select Doctor</option>
</select>
<span asp-validation-for="NameOfDoctor" class="text-danger"></span>
</div>
<div class="form-group mt-3">
<label asp-for="PreferenceOfAttendence" class="control-label"><i class="bi bi-info-square"></i> Appointment Preference</label>
<select asp-for="PreferenceOfAttendence" asp-items="Html.GetEnumSelectList<PatientHut.Data.Models.PreferenceOfAttendance>()" class="form-control">
<option>Select choice of appointment</option>
</select>
<span asp-validation-for="PreferenceOfAttendence" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DetailOfBooking" class="control-label"><i class="bi bi-card-text"></i> Reason For Booking</label>
<textarea rows="5" asp-for="DetailOfBooking" class="form-control"></textarea> <!------ Text box created here-->
<span asp-validation-for="DetailOfBooking" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
<a class="btn btn-secondary" asp-action="Details" asp-route-id=@Model.PatientId>Cancel</a>
</div>
</form>
</div>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
$(document).ready(function ()
{
$("#datetimepicker").datetimepicker(
{
showTodayButton: true,
showClose: true,
showClear: true,
toolbarPlacement: 'top',
stepping: 30
});
});
</script>
}
1 answers
solution1
1 ACCPTED 2021-07-26 07:02:16
I wrote a demo based on your question, you can refer to it.
Model:
public class Test
{
[BindProperty]
public DateTime? RegisterDate { get; set; }
}
View:
@model WebApplication53.Models.Test
@{
}
<div class="form-group">
<label asp-for="RegisterDate" class="control-label"></label>
<div class='input-group date' id='datepicker'>
<input asp-for="RegisterDate" type="text" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<span asp-validation-for="RegisterDate" class="text-danger"></span>
</div>
@section Scripts
{
<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 () {
$('#datepicker').datetimepicker();
});
</script>
}
Result:
In addition, the installation package you mentioned does not appear in the www directory, you should use the library to add the required dependency packages, like this:
Then search for the dependencies you need and then download it and it will be displayed in your www directory.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
ASP.Net Core MVC DisplayFormat not removing the time element of a date
Customize the Error Message for an invalid date in ASP.net MVC
How to create a Calendar date/picker in ASP.net Core?
Calendar in ASP.Net Core
Calendar in Time sheet application using asp.net mvc 3
ASP.NET Core 6.0 MVC - Sort a string with range of date
Format date in a View in ASP.NET Core MVC
Format date within View in ASP.NET Core MVC
Supporting Multiple Date Formats in ASP.Net MVC/Core
View directory compilation time difference between asp.net mvc and asp.net core mvc
Related Tags