以不同语言显示引导日期选择器日期，然后在 asp.net razor 视图中以英文提交日期

Posted 2023-05-08

【中文标题】以不同语言显示引导日期选择器日期，然后在 asp.net razor 视图中以英文提交日期

【英文标题】：display bootstrap datepicker date in different language then submit date in English in asp.net razor view

【发布时间】：2020-11-20 04:07:14

【问题描述】：

我在我的 asp.net 核心应用程序中使用 bootstrap-datepicker。日期选择器包含语言选项，以便日期选择器以所选语言显示月/日等。 但是，当我来提交表格时，我想提交所选日期的英文表示。 提交时 Jquery 验证失败。

日期选择器选项

 <script src="~/js/bootstrap-datepicker.min.js"></script>
 <script src="~/js/bootstrap-datepicker.es.min.js"></script>
    

     $(".datepicker").datepicker(
                    format: "dd M yyyy",
                    language:  "es",
                    weekStart: 1,
                    maxViewMode: 2,
                    todayHighlight: true,
                    startDate: startDate,
                    daysOfWeekDisabled: [],
                    showOnfocus: true,
                    autoClose: true,
                    orientation: "bottom"
                );

asp.net taghelper

<input type="text" asp-for="JoiningDate" asp-format="0:dd MMM yyyy" class="datepicker"/>

由于文本字段在这种情况下以西班牙语接收翻译的日期，因此提交时验证失败。 理想情况下，我想以英文格式提交日期，但以所选语言查看选择器。 我尝试在提交功能中将日期选择器语言选项改回英文，但没有奏效。

【问题讨论】：

JoiningDate 字段的类型是什么？ jquery validate 失败是什么意思？请提供完整的代码和信息，否则我们无法帮助您重现和解决问题。

@YongqingYu JoiningDate 是来自 c# 模型类的 c# 日期变量。验证失败意味着所需的日期字段无法识别日期格式，因为它以不同的语言呈现在文本字段上。

【参考方案1】：

如果您希望在点击提交后将日期传递给操作时能够识别，那么我建议您使用 ajax 手动传递它。

可以在jquery中获取选中的日期，转换成可以传递的格式。

详情请参考以下案例：

public class MyModelDate

    public DateTime JoiningDate  get; set; 

查看：

@model MyModelDate
@
    ViewData["Title"] = "DateTest";
    Layout = "~/Views/Shared/_Layout.cshtml";


<h1>DateTest</h1>

<form asp-action="DateTest" method="post">
    Date: <input type="text" asp-for="JoiningDate" asp-format="0:dd MMM yyyy" class="datepicker" />
    <span asp-validation-for="JoiningDate" class="text-danger"></span>
    <input id="Submit1" type="submit" value="submit" />
</form>

@section Scripts
    <link href="~/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" />
    <script src="~/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="~/bootstrap-datepicker/js/locales/bootstrap-datepicker.es.js"></script>
    <script>
        $(".datepicker").datepicker(
             format: "dd M yyyy",
             language:  "es",
             weekStart: 1,
             maxViewMode: 2,
             todayHighlight: true,
             startDate: startDate,
             daysOfWeekDisabled: [],
             showOnfocus: true,
             autoClose: true,
             orientation: "bottom"
        );
        $("form").submit(function () 
            event.preventDefault();
            //get datepicker selected date and convert to ISO string format
            var date = $('.datepicker').data('datepicker').date.toISOString();
            var MyModelDate = 
                JoiningDate: date
            ;
            $.ajax(
                type: 'post',
                url: "/Home/DateTest",
                data: MyModelDate

            )
        );

    </script>

这是测试结果：