Bootstrap Datetimepicker 英国日期格式发布为美国格式

Posted 2023-03-21

【中文标题】Bootstrap Datetimepicker 英国日期格式发布为美国格式

【英文标题】：Bootstrap Datetimepicker UK date format posts as US format

【发布时间】：2021-11-18 02:32:53

【问题描述】：

我在使用 Razor 页面前端的 .NET 5 MVC 项目中使用 Bootstrap DateTime picker 并将其格式化为英国格式。

输入如下

<input type="text" asp-for="WeddingDate" class="form-control" onblur="WizardSummary('WeddingDate','SummaryWeddingDate')" required />
                                       

以及初始化它的javascript

$('.datetimepicker').datetimepicker(
        icons: 
            time: "fas fa-clock",
            date: "fa fa-calendar",
            up: "fa fa-chevron-up",
            down: "fa fa-chevron-down",
            previous: 'fa fa-chevron-left',
            next: 'fa fa-chevron-right',
            today: 'fa fa-screenshot',
            clear: 'fa fa-trash',
            close: 'fa fa-remove'
        ,
        format: 'DD/MM/YYYY HH:mm:ss'
    );

相当简单的东西。这一切都在前端工作得非常好，它会触发，格式化日期等等......完全没有问题。

但是，当我将日期 > 12 的日期的数据发布到控制器时（例如今天的日期 - 24/09/2021），它以0001/01/01 00:00:00 的形式出现，我认为这是因为模型期望标准日期时间，它将是美国格式，并将其转换为该值。我可以在 chrome 开发人员工具中看到它按预期以英国格式发布值。

以下模型的摘录

public class WeddingWizardViewModel
    
        public DateTime WeddingDate  get; set; 
        public string Name  get; set; 
        public string Description  get; set; 
    

我做错了什么？如何让我的后端识别我发布的格式有效？

更新这里是WizardSummary函数，纯粹是把输入框的内容复制到我在sumarry屏幕上显示的文本标签中。

function WizardSummary(input, output) 
    var inputvalue = document.getElementById(input).value;
    document.getElementById(output).innerhtml = inputvalue;

提交表单时的控制器方法*

[HttpPost]
        public async Task<IActionResult> Wizard(WeddingWizardViewModel vm)
        
            var user = _userManager.GetUserAsync(User).Result;
            
            vm.TopBar = new TopBarViewModel();
            vm.TopBar.PageTitle = "Wedding Wizard";

            vm.TopBar.Breadcrumbs = new List<Breadcrumb>();

            var level1 = new Breadcrumb
            
                Level = 1,
                Name = "Weddings",
                Controller = "Weddings",
                Action = "Index"
            ;
            vm.TopBar.Breadcrumbs.Add(level1);

            var level2 = new Breadcrumb
            
                Level = 2,
                Name = "Wizard",
                Controller = "Weddings",
                Action = "Wizard"
            ;
            vm.TopBar.Breadcrumbs.Add(level2);

            this.ViewData["TopBarViewModel"] = vm.TopBar;

            var templatesegments = _context.TemplateSegments.Include(i => i.Shots.OrderBy(i => i.Id)).Where(i => i.TemplateId == vm.TemplateId).ToList() ;

            List<Segment> segments = new List<Segment>();

            foreach(var templatesegment in templatesegments)
            
                Segment newseg = new Segment();
                newseg.CompanyId = user.CompanyId;
                newseg.Name = templatesegment.Name;
                newseg.Created = DateTime.UtcNow;
                newseg.Modified = DateTime.UtcNow;
                newseg.StartTime = new DateTime(vm.WeddingDate.Year, vm.WeddingDate.Month, vm.WeddingDate.Day, vm.WeddingDate.Hour, vm.WeddingDate.Minute, vm.WeddingDate.Second);
                newseg.ReminderInMinutes = 15;
                newseg.ClientVisible = templatesegment.ClientVisible;
                newseg.Shots = new List<Shot>();

                foreach (var templateshot in templatesegment.Shots)
                
                    
                    Shot newshot = new Shot();
                    newshot.CompanyId = user.CompanyId;
                    newshot.Created = DateTime.UtcNow;
                    newshot.Modified = DateTime.UtcNow;
                    newshot.Name = templateshot.Name;
                    newshot.ClientVisible = templateshot.ClientVisible;
                    newshot.Sequence = templateshot.Sequence;
                    newseg.Shots.Add(newshot);
                
                
                segments.Add(newseg);
            

            Wedding wedding = new Wedding();
            wedding.Client1EMail = vm.Client1EMail;
            wedding.Client1FirstName = vm.Client1FirstName;
            wedding.Client1LastName = vm.Client1LastName;
            wedding.Client1FullMobileNumber = vm.Client1FullMobileNumber;
            wedding.Client1Role = vm.Client1Role;
            wedding.Client2EMail = vm.Client2EMail;
            wedding.Client2FirstName = vm.Client2FirstName;
            wedding.Client2FullMobileNumber = vm.Client2FullMobileNumber;
            wedding.Client2LastName = vm.Client2LastName;
            wedding.Client2Role = vm.Client2Role;
            wedding.CompanyId = user.CompanyId;
            wedding.Description = vm.Description;
            wedding.Name = vm.Name;
            wedding.Segments = segments;
            wedding.WeddingDate = vm.WeddingDate;





            _context.Add(wedding);
            _context.SaveChanges();

            //Image Upload 
            if (vm.WeddingAvatar != null)
            
                var upload = await FileUpload.Upload(vm.WeddingAvatar, _env, user, "weddingavatars", wedding.Id.ToString());
                if (upload.Success == true)
                
                    wedding.WeddingAvatarFileName = upload.FileName;
                
                else
                
                    return BadRequest("Error uploading file");
                
            

            _context.Update(wedding);
            _context.SaveChanges();

            TempData["message"] = "Your wedding has been created and you can now start adding segments and shots to it";

            return RedirectToAction("Edit", new  id = wedding.Id );
        

【参考方案1】：

请尝试设置您的日期时间选择器的locale 属性；在下面的代码中听起来是UK locale 的示例：

$('.datetimepicker').datetimepicker(
        icons: 
            time: "fas fa-clock",
            date: "fa fa-calendar",
            up: "fa fa-chevron-up",
            down: "fa fa-chevron-down",
            previous: 'fa fa-chevron-left',
            next: 'fa fa-chevron-right',
            today: 'fa fa-screenshot',
            clear: 'fa fa-trash',
            close: 'fa fa-remove',
            locale: 'uk'
        ,
        format: 'DD/MM/YYYY HH:mm:ss'
    );

在后端，在控制器的 ActionResult 方法中，在第一行添加以下代码：

var cultureInfo = CultureInfo.GetCultureInfo("en-uk");
Thread.CurrentThread.CurrentCulture = cultureInfo;
Thread.CurrentThread.CurrentUICulture = cultureInfo;

【讨论】：

不，这没有帮助。问题是它似乎在模型级别被关闭。因此，在我的 ActionResult public async Task<IActionResult> Edit(WeddingViewModel vm) 中，属性 vm.WeddingDate 已更改为 1/1/0001，因此操作中的文化信息不会有所作为

如果您的日期设置为 0001 年 1 月 1 日，这意味着该日期未设置，因为该值是 DateTime 类型的默认值（如 default(DateTime)）。如果可能，请分享更多代码详细信息，因为由于某种原因，日期未设置。

知道我应该用什么代码更新吗？我不确定它是否值得发布任何 HTML，因为发布的值显示在屏幕截图（WeddingDate 属性）中，所以我可以看到数据正在离开客户端前往服务器端。控制器所期望的模型也包括在内。我也知道映射必须有效，就好像我将日期设置为 01/30/2021 一样，控制器会正确显示它，但将日期设置为 30/01/2021 会导致 01/01/0001。那么哪些代码有助于分享呢？

请分享 ActionResult 控制器和名为 WizardSummary 的客户端函数的详细信息（带有 onblur 事件），我将尝试在此处重现相同的场景

我已经添加了代码，非常感谢