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

Question

I have watched a few tutorials on how to get the DateTimePicker working and I cannot get it to work.我看过一些关于如何让 DateTimePicker 工作的教程，但我无法让它工作。

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?我想知道如何自定义它以格式化时间，以便每小时只有 20-30 分钟的间隔，并将预订时间限制在上午 9 点至下午 5 点？

Also, I would like to be able to change the 01/01/0001 00:00 to be at least starting from this year onwards!另外，我希望能够将 01/01/0001 00:00 更改为至少从今年开始！

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.我想向观众指出，我已经尝试了很多安装软件包等的方法，但它从未出现在我的 www 根文件中。 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">
        &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>

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

Answer 1

I wrote a demo based on your question, you can refer to it.我根据你的问题写了一个demo，你可以参考。

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:另外，你提到的安装包没有出现在www目录下，你应该使用该库添加需要的依赖包，像这样：

Then search for the dependencies you need and then download it and it will be displayed in your www directory.然后搜索您需要的依赖项，然后下载它，它将显示在您的 www 目录中。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-07-26 07:02:16

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-07-26 07:02:16

解决方案1
1 已采纳 2021-07-26 07:02:16