MVC-通过文本框获取日期

时间:2018-07-16 14:17:37

标签: asp.net-mvc razor

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

"MM/yyyy-MM/yyyy".

我需要强迫用户在不发布模型的情况下输入上述格式的输入。

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

上面的代码不起作用事件仅获取格式化的日期字符串。

1 个答案:

答案 0 :(得分:1)

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

它只是一种显示格式。它不会强制使用此格式。为此,您将需要编写自己的客户端javascript(因为您提到时未发布模型)。您可以看看使用带遮罩的输入元素。 ASP.NET MVC没有现成的屏蔽输入。

您可以使用maskedinput之类的屏蔽输入控件,它是jQuery的插件。

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

在应用中包含jQuery UI后,您将执行类似jQuery UI DatePicker to show month year only的操作。

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

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