JQuery日历和MVC日期时间提交

时间:2022-08-24 21:42:51

We all know about the problems we face when it comes to different UI culture to display dates. But when posting, we also have that problem to since when posting, the ASP.NET MVC doesn't really "automatically" bind the format given into any way it sees fit.

我们都知道在不同的UI文化中我们遇到的问题,以显示日期。但是在发布时,我们也遇到了这个问题,因为在发布时,ASP.NET MVC并没有真正“自动”绑定给定的格式,无论它认为合适。

My question is, how can I post back the date in the format of yyyy/MM/dd so it can bind correctly to the model property?

我的问题是,如何以yyyy / MM / dd格式回发日期,以便它能正确绑定到模型属性?

I want to display the date format in the UI format of what the culture is (i.e UK/US etc...) and let the user select the date from the jquery calendar as normal. But only when posting, do I want to make the "correction"

我想以文化的UI格式显示日期格式(即英国/美国等...),并让用户正常地从jquery日历中选择日期。但只有在发布时,我是否要进行“更正”

what is the best way of doing this?

这样做的最佳方式是什么?

1 个解决方案

#1


1  

I've came across the same issue, and get it solved by adding an alternate field for the date, which I send to the Controller.

我遇到了同样的问题,并通过为日期添加备用字段来解决问题,我将其发送给Controller。

Helper:

帮手:

public static CultureInfo UserCultureInfo()
{
    // Retrieves the user culture info based on the browser request
    var userLanguages = HttpContext.Current.Request.UserLanguages;

    CultureInfo ci;

    if (userLanguages.Length > 0)
    {
        try
        {
            ci = new CultureInfo(userLanguages[0]);
        }
        catch (CultureNotFoundException)
        {
            ci = CultureInfo.InvariantCulture;
        }
    }
    else
    {
        ci = CultureInfo.InvariantCulture;
     }

     return ci;
}

HTML (Razor View):

HTML(Razor View):

@{
    System.Globalization.CultureInfo curInfo = Helpers.UserCultureInfo();
}

<!-- You need to change the file to be loaded based on the Culture information returned above -->
@Html.Script("DatePicker/i18n/jquery.ui.datepicker-en-GB")

<!-- The hidden field should be the one posted back to the Controller -->
<input type="hidden" name="myDate" id="myDate" value="" />

<!-- This one is just to display the DatePicker -->
<input type="text" id="myDatePickerField" name="myDatePickerField" />

JS:

JS:

$("#myDatePickerField").datepicker({
    altField: "#myDate",
    altFormat: "yy-mm-dd", // The date sent will be in the YYYY-MM-DD format (refer to the HTML code to understand this bit)
    dateFormat: "dd/mm/yy" // As I'm in the UK, I set the default format to DD/MM/YYYY
});

This is just a start, an idea on how you can achieve the result expected. Of course you'll need to implement changes to complete it and fit it to your web site. How you can detect the user locale information and apply it to your solution is a bit more broaden and complex. There are lots of tips and tutorials across the web.

这只是一个开始,一个关于如何实现预期结果的想法。当然,您需要实施更改以完成它并使其适合您的网站。如何检测用户区域设置信息并将其应用于您的解决方案更加宽泛和复杂。网上有很多提示和教程。

#1


1  

I've came across the same issue, and get it solved by adding an alternate field for the date, which I send to the Controller.

我遇到了同样的问题,并通过为日期添加备用字段来解决问题,我将其发送给Controller。

Helper:

帮手:

public static CultureInfo UserCultureInfo()
{
    // Retrieves the user culture info based on the browser request
    var userLanguages = HttpContext.Current.Request.UserLanguages;

    CultureInfo ci;

    if (userLanguages.Length > 0)
    {
        try
        {
            ci = new CultureInfo(userLanguages[0]);
        }
        catch (CultureNotFoundException)
        {
            ci = CultureInfo.InvariantCulture;
        }
    }
    else
    {
        ci = CultureInfo.InvariantCulture;
     }

     return ci;
}

HTML (Razor View):

HTML(Razor View):

@{
    System.Globalization.CultureInfo curInfo = Helpers.UserCultureInfo();
}

<!-- You need to change the file to be loaded based on the Culture information returned above -->
@Html.Script("DatePicker/i18n/jquery.ui.datepicker-en-GB")

<!-- The hidden field should be the one posted back to the Controller -->
<input type="hidden" name="myDate" id="myDate" value="" />

<!-- This one is just to display the DatePicker -->
<input type="text" id="myDatePickerField" name="myDatePickerField" />

JS:

JS:

$("#myDatePickerField").datepicker({
    altField: "#myDate",
    altFormat: "yy-mm-dd", // The date sent will be in the YYYY-MM-DD format (refer to the HTML code to understand this bit)
    dateFormat: "dd/mm/yy" // As I'm in the UK, I set the default format to DD/MM/YYYY
});

This is just a start, an idea on how you can achieve the result expected. Of course you'll need to implement changes to complete it and fit it to your web site. How you can detect the user locale information and apply it to your solution is a bit more broaden and complex. There are lots of tips and tutorials across the web.

这只是一个开始,一个关于如何实现预期结果的想法。当然,您需要实施更改以完成它并使其适合您的网站。如何检测用户区域设置信息并将其应用于您的解决方案更加宽泛和复杂。网上有很多提示和教程。