时间戳

首页 > 解决方案 > MVC - 使用文本框获取日期

asp.net-mvc - MVC - 使用文本框获取日期

问题描述

我想在 mvc 中使用文本框或编辑器获取两个日期字符串。格式应该是

"MM/yyyy-MM/yyyy".

我需要强制用户输入上述格式的输入而不发布模型。

@Html.TextBox("tbxDateRange", "", "{0:dd/MM/yyyy}", new { @class = "form-control dropdown", placeholder = "MM/yyyy - MM/yyyy" })

上面的代码不工作事件只得到一个格式化的日期字符串。

标签： asp.net-mvcrazor

解决方案

格式按预期工作。您正在告诉 tbxDateRange 的值（第三个参数 ( "{0:dd/MM/yyyy}") 中的零格式化为日/月/年。因此它将接受文本框中的输入并以该格式显示。

它只是一种显示格式。它不会强制执行这种格式。为此，您将需要做自己的客户端 javascript（因为您在没有发布模型的情况下提到过）。您可以查看使用屏蔽的输入元素。ASP.NET MVC 没有开箱即用的屏蔽输入。

您可以使用屏蔽输入控件，例如maskedinput，它是一个 jQuery 插件。

此外，您可能希望将其分解为两个控件。一个用于开始，一个用于结束。您可以考虑使用 html5 输入类型的日期，您将自动获得日历。虽然，如果一个月中的某一天对您的用户/用户界面来说太混乱了，那么您可以查看使用 jquery UI 的日期选择器，您可以将其配置为仅显示月份和年份。

一旦你在你的应用程序中包含了 jQuery UI，你会做一些类似jQuery UI DatePicker 的事情来只显示月份年份。

在该示例中，获胜答​​案以仅显示控件的月份和年份项目的方式格式化控件。

<script type="text/javascript">
    $(function() {
        $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
        }
        });
    });
</script>
<style>
.ui-datepicker-calendar {
    display: none;
}
</style>

推荐阅读