ASP.NET/ASP.NET MVC 中使用 JQuery 日期选择器和日期时间选择器的最简单方法

• 下载 JqueryDateTimePicker.zip

[更新消息]

起初，我只写了关于 jQuery 日期选择器的文章。但后来我意识到，有时我们还需要时间选择器，因此我修改了文章，并在日期选择器选项中添加了时间选择器选项。

引言

有时，我们需要让用户输入各种日期，例如出生日期、入职日期、接收日期、离职日期等。但是，为输入日期值渲染一个简单的文本框是一种糟糕的做法，因为日期格式存在问题。假设我这样做，那么一些用户将以 MM/dd/yyyy 格式输入日期，一些用户将以 dd-MMM-yyyy 格式输入，还有一些用户将以 yyyy/MM/dd 格式输入，等等。结果，整个事情将是一团糟。因此，最好为用户渲染一个日期选择器/日历来选择日期，这样可以为所有用户维护一个通用的日期格式。

开始吧

假设我们有一个 Employee 表单，我们将在此输入 employee 的信息。在 Employee 表单中，有一个名为“Joining Date”的字段，用于输入 Employee 的 Joining Date。在这里，我们将使用 jQuery 日期选择器来输入 Joining Date 值。

步骤 1：我们的 model 类将如下所示

public class Employee
    {
        public int Id { get; set; }

        [Display(Name = "Employee Name")]
        public string EmployeeName { get; set; }

        [Display(Name = "Joining Date")]
        public DateTime JoiningDate { get; set; }
    }

步骤 2：首先，我们需要使用NuGet 包管理器在我们的项目中安装 JQueryUI 包，如下所示

步骤 3：现在将以下 CSS 和 JavaScript 文件链接添加到视图中。在这种情况下，它们是 Create.cshtml 和 Edit.cshtml。

<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>

步骤 4：现在向渲染 JoiningDate 值输入字段的 editor HTML（不是 Model 类！）添加一个类（html 类属性）或 id 名称。在这种情况下，我在这里添加了一个类属性，它看起来如下

@Html.EditorFor(model => model.JoiningDate, 
new { htmlAttributes = new { @class = "form-control date-picker" } })

步骤 5：现在调用 JQuery datepicker() 函数，该函数将在用户单击 Joining Date 输入字段时调用。它应该看起来如下

<script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".date-picker").datepicker({
                dateFormat: 'dd-M-yy' 
            });

        });

    </script>

这将以“19-Apr-2017”格式接受输入。如果您希望它为“19/04/2017”，则使用“dd/mm/yy”而不是“dd-M-yy”。有关在 jquery 日期选择器中格式化输入日期的更多详细信息：https://jqueryui-api.jqueryjs.cn/datepicker/#option-dateFormat

现在运行项目以创建新的 Employee 记录。每当您单击 Joining Date 输入字段来输入 Joining Date 值时，它都会显示一个 JQuery 日期选择器/日历来选择日期，如下所示

创建了员工名为 Mark 的记录后，其显示如下

如果您想编辑/更新 Mark 记录的 Joining Date，它会如下显示

虽然它工作正常，但日期格式存在一个小问题。日期显示了不必要的时间值。不应该显示。为了删除不必要的时间值并正确格式化日期，我们必须使用 Data Annotation，如下所示

    [Display(Name = "Joining Date")]
    [DisplayFormat(DataFormatString = "{0:dd-MMM-yyyy}", ApplyFormatInEditMode = true)]
    public DateTime JoiningDate { get; set; }

现在运行项目，查看日期格式已更改，并且在显示和编辑字段中都显示为不带不必要时间值的日期，如下所示

此外，为了突出显示编辑字段中 Joining Date 的现有值，请在 @Html.EditorFor() 帮助器方法中重写，如下所示

@Html.EditorFor(model => model.JoiningDate, new { htmlAttributes = new { Value = Model.JoiningDate.ToString("dd-MMM-yyyy"), @class = "form-control date-picker"} })

现在它显示如下，并将现有的 Joining Date 以蓝色突出显示

到目前为止，这非常好。但请记住，虽然我们提供了一个日历供用户选择日期，但用户仍然可以通过不从日历中选择来在日期输入字段中输入值，这不应该被允许。用户应该只允许从日历中选择日期值，以保持日期格式的完整性。

为了防止用户在 Joining Date 输入字段中输入或粘贴任何内容，请在 @Html.EditorFor() 帮助器方法中添加一些 HTML 属性，代码将如下所示

@Html.EditorFor(model => model.JoiningDate, new { htmlAttributes = new { Value = Model.JoiningDate.ToString("dd-MMM-yyyy"), @class = "form-control date-picker", onkeydown = "return false", onpaste = "return false" } })

现在用户将无法在 Joining Date 的输入字段中键入或粘贴任何内容，而是必须从日期选择器/日历中选择 Date 值。

虽然一切正常，但我们的 JQuery 日期选择器/日历存在一个小的灵活性问题。假设用户需要选择 10 年或 15 年前的日期，那么他/她必须通过单击日期选择器/日历标题上的后退按钮逐月后退。现在想想，如果她/他要选择 10 年前的日期，那么她/他必须单击后退按钮 12*10 = 120 次。

因此，日期选择器/日历标题应该有一个月份下拉菜单和一个年份下拉菜单，用户可以从中选择日期选择器/日历中显示的任何年份和月份。为此，我们必须在 datepicker() 函数中添加一些自定义选项，如下所示

<script src="~/Scripts/jquery-3.1.1.min.js"></script>

<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".date-picker").datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "-100:+0", // You can set the year range as per as your need
                dateFormat: 'dd-M-yy'
            });
        });
    </script>

现在运行项目，在创建新的 Employee 记录或更新任何现有记录时，单击 Joining Date 属性的输入字段。您现在可以看到，您可以轻松地从过去 100 年中选择任何日期，如下所示

Google Chrome 和 jquery.validate.js 问题！！

有时 Google Chrome 会出现异常！它会抛出验证错误消息“字段日期必须是日期”，即使输入值是正确格式的日期。根据一些 StackOverFlow 的问答，这是 jquery.validate.js 的一个 bug。要修复此问题，需要编写一些 JavaScript 代码，如下所示

<script src="~/Scripts/jquery-3.1.1.min.js"></script>

<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $(function () {
                $(".date-picker").datetimepicker({
                    changeMonth: true,
                    changeYear: true,
                    yearRange: "-100:+0",
                    dateFormat: 'dd-M-yy'
                });

            });

            jQuery.validator.methods.date = function (value, element) {
                var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
                if (isChrome) {
                    var d = new Date();
                    return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
                } else {
                    return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
                }
            };

        });

    </script>

这就是 JQuery 日期选择器的全部内容！！

现在添加 Jquery 时间选择器以及 JQuery 日期选择器

将 Jquery 时间选择器与现有的日期选择器一起添加非常有趣！实现起来非常简单。

步骤 1：在项目中，使用NuGet 包管理器安装Jquery 时间选择器插件包，如下所示

步骤 2：现在将以下 CSS 和 JavaScript 文件链接添加到视图中。在这种情况下，视图是Create.cshtml 和Edit.cshtml。

<link href="~/Content/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-ui-timepicker-addon.min.js"></script>

步骤 3：将 datepicker() 函数名更改为 datetimepicker() 并添加一些选项，如下所示

<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script src="~/Scripts/jquery-ui-timepicker-addon.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(function () {
                $(".date-picker").datetimepicker({
                    changeMonth: true,
                    changeYear: true,
                    yearRange: "-100:+0",
                    dateFormat: 'dd-M-yy',
                    controlType: 'select',
                    timeFormat: 'hh:mm TT'
                });

            });

            jQuery.validator.methods.date = function (value, element) {
                var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
                if (isChrome) {
                    var d = new Date();
                    return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
                } else {
                    return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
                }
            };

        });

    </script>

完成！现在运行项目以创建新的 Employee 记录。每当您单击 Joining Date 输入字段来输入 Joining Date 和 Time 值时，它都会显示一个 JQueryDateTimePicker 来选择日期和时间，如下所示

步骤 4：现在，为了显示时间以及日期，请修改 Employee Model 类中的 [DisplayFormat()] 数据注解，如下所示

[DisplayFormat(DataFormatString = "{0:dd-MMM-yyyy hh:mm tt}", ApplyFormatInEditMode = true)]
public DateTime JoiningDate { get; set; }

创建员工名为 Mayanti 的记录后，其显示如下

如果您想编辑/更新 Mayanti 记录的 Joining Date，它会如下显示

这就是 JQuery 日期选择器和 JQuery 日期时间选择器的全部内容！！

结论

您还可以根据自己的需求进一步自定义 JQuery 日期选择器和 JQuery 日期时间选择器，以获得 JQuery UI 和 JQuery 日期时间选择器官方网站的帮助。

如果您有任何建议或疑问，请不要忘记评论。此外，如果您从中受益，我们请求您分享。谢谢！！

建议：下载源代码将有助于更轻松地理解本文。