使用 ASP.NET 内置日历的核心 MVC 自定义日期和时间？

Question

我看过一些关于如何让 DateTimePicker 工作的教程，但我无法让它工作。

但是，我注意到我的应用程序有一个基本的内置日历。请看下面：

我想知道如何自定义它来格式化时间，以便每小时只有 20-30 分钟的间隔，并限制从上午 9 点到下午 5 点的预订时间？

此外，我希望能够将 01/01/0001 00:00 更改为至少从今年开始！

这是我的共享布局页面，我已经删除了我试图开始工作的脚本部分中的先前代码

我想向观众指出，我已经尝试了很多安装包等的方法，但它从未出现在我的 www 根文件中。此模板带有这些样式等已经链接

布局页面

<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">
        &copy; @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>

查看创建约会页面：

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

Answer 1

我根据你的问题写了一个demo，你可以参考一下

型号：

  public class Test
    {
        [BindProperty]
        public DateTime? RegisterDate { get; set; }
       
    }

查看：

@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>
}

结果：

另外，你说的安装包并没有出现在www目录下，你应该使用库添加需要的依赖包，像这样：

然后搜索你需要的依赖然后下载它就会显示在你的www目录下

使用 ASP.NET 内置日历的核心 MVC 自定义日期和时间？

Customize date and time with ASP.NET Core MVC built in calendar?

c#

asp.net-core-mvc

datetimepicker