jQuery UI DateTimepicker，选择日期后日期格式更改

Posted 2023-05-08

【中文标题】jQuery UI DateTimepicker，选择日期后日期格式更改

【英文标题】：jQueryUI DateTime picker , date format changes after selecting date

【发布时间】：2018-03-29 18:28:56

【问题描述】：

我的视图模型绑定到我的 ASP.NET MVC 表单，

 public class JobViewModels
    
        public DateTime StartTime  get; set;  = DateTime.Today.AddDays(-1);
        public DateTime EndTime  get; set;  = DateTime.Today;
    

查看：

new AjaxOptions

    HttpMethod = "post",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "updatOverViewSection"
))
                

                        <tr>
                            <td class="form-group">
                                @html.LabelFor(m => m.StartTime)
                                @Html.EditorFor(m => m.StartTime, new  @class = "form-control" )
                            </td>
                            <td class="form-group">
                                @Html.LabelFor(m => m.EndTime)
                                @Html.EditorFor(m => m.EndTime, new  @class = "form-control" )
                            </td>
                            <td>
                                <label></label>
                                <button type="submit" class="btn btn-primary">Search</button>
                            </td>
                        </tr>

                    </table>
                
            </div>

在功能方面它工作正常。但是当我查看视图时，当页面呈现时，它看起来像以下，

但是当我从选择器中选择一个日期时间时，它的格式就会改变为跟随。现在我能想到的唯一方法是，在模型中有一个字符串 datetime 属性并调用 startDateTime.ToString("DD-MM-YYYY hh:MM:ss") ，但这似乎不是最有效的方法，我可能错了。

【问题讨论】：

你在使用this addon吗？

您是否希望它最初显示为dd-MMM-yyyy hh:mm:ss？

@StephenMuecke，不，我没有使用插件，是的，最初我想显示为 dd-MMM-yyyy hh:mm:ss

你在使用什么插件 - jQuery-UI 没有 datetimepicker（只是一个 datepicker）？

我的坏@StephenMuecke，我正在使用 jquery-ui-timepicker-addon.min.js ，它在我的布局中，

【参考方案1】：

您可以使用this overload of @Html.TextBoxFor()，其中第二个参数是格式字符串，例如

@Html.TextBoxFor(m => m.StartTime, "0:dd-MMM-yyyy hh:mm:ss tt", new  @class = "form-control" )

或者，您可以将DisplayFormatAttribute 应用于您的属性，这将受到EditorFor() 方法的尊重

[DisplayFormat(DataFormatString = "0:dd-MMM-yyyy hh:mm:ss tt", ApplyFormatInEditMode = true)]
public DateTime StartTime  get; set; 

附带说明，您使用@Html.EditorFor(m => m.StartTime, new @class = "form-control" ) 不会向表单控件添加类属性。应该是

@Html.EditorFor(m => m.StartTime, new  htmlAttributes = new  @class = "form-control"  )

但仅在 MVC-5.1 或更高版本中支持使用 EditorFor() 添加 html 属性

【讨论】：

谢谢，DisplayFormat 完美运行，但 HTMLFor 只是创建一个可编辑的文本框，而不是日期 pciker。 htnlattributes 是一个很好的提示 :)

抱歉，我不明白您的评论 - 在您的情况下，TextBoxFor() 和 EditorFor() 都会产生相同的输出，即 <input type="text" name="StartDate" id="StartDate" ..... />。为了生成 datetimepicker，您需要附加插件（您显然已经在使用例如 $('#StartDate').timepicker( .... 使用 EditorFor() 或 TextBoxFor() 没有区别

将用屏幕截图编辑问题，并可以提供生成的 html 源代码。也会从我这边检查..