如何从 DatePicker ui jquery 中删除时间

Posted 2023-05-07

【中文标题】如何从 DatePicker ui jquery 中删除时间

【英文标题】：How to remove time from DatePicker ui jquery

【发布时间】：2014-12-12 11:28:43

【问题描述】：

我正在使用带有 asp.net mvc 的 jquery ui datepicker，当网页打开时，它会在 datepicker 的文本框中显示日期和时间 (2014/10/16 00:00:00)，但是如果我在日期选择器的文本框中选择一个日期，它只会显示日期。我不想看时间，怎么了？

谢谢！

模型中的属性是这样设置的

[DataType(DataType.Date)]
[Required(ErrorMessageResourceType = typeof(Ressources.Resources), ErrorMessageResourceName="ErrorStartDateRequired")]
[Display(Name = "DateStarted", ResourceType = typeof(Ressources.Resources))]
public DateTime DateStarted  get; set; 

我的日期选择器在我的网页中是这样设置的：

@section scripts
<script language="javascript" type="text/javascript">
    $(document).ready(function () 
    var anchor = document.getElementById('@Model.Anchor');
    anchor.scrollIntoView(true);

    var d = new Date(@Model.Project.DateStarted.Year, @Model.Project.DateStarted.Month, @Model.Project.DateStarted.Day);
    $("#datePickerStartDate").datepicker(
        dateFormat: "yy/mm/dd",
        showOtherMonths: true,
        selectOtherMonths: true,
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        gotoCurrent: true,
        defaultDate: d
    );
);

这就是控件在网页中的显示方式（cshtml）

<div class="form-group">
    @Html.LabelFor(model => model.Project.DateStarted, new  @class = "control-label col-md-2" )
    <div class="col-md-10">
        @Html.TextBoxFor(model => model.Project.DateStarted, new  id = "datePickerStartDate" )
        @Html.ValidationMessageFor(model => model.Project.DateStarted)
    </div>
</div>

【问题讨论】：

我不熟悉 asp.net 语法，但这似乎是关于您在日期选择器中设置的初始值的问题......例如上面的语法 @Html.TextBoxFor(model => model.Project.DateStarted, new id = "datePickerStartDate",value="pawal" ) ，它无论 datePIcker 的设置如何，都会将值显示为 pawal

【参考方案1】：

我终于找到了答案。我在视图侧添加了“0:d”。

<div class="form-group">
    @Html.LabelFor(model => model.Project.DateFinished, new  @class = "control-label col-md-2" )
    <div class="col-md-10">
        @Html.TextBoxFor(model => model.Project.DateFinished, "0:d", new  id = "datePickerEndDate" )
        @Html.ValidationMessageFor(model => model.Project.DateFinished)
    </div>
</div>

谢谢

【参考方案2】：

 $("#datePickerStartDate").datepicker(
        dateFormat: 'mm/dd/yy',
        changeMonth: true,
        changeYear: true,
        defaultDate: GetCurrentDate(),
        onSelect: function () 
            $(this).blur().change();
        
    );

【参考方案3】：

这就是我使用它的方式。

@Html.TextBoxFor(a => a.DOB, new  @class = "form-control", placeholder = "Date of Birth", id = "datetimepicker", TextMode = "date", value = "1/11/1989", onkeyup = "return validateChar(this)", maxlength = "20", style = "width:175px;height:25px;" )

<script>
    $(document).ready(function () 
        $('#datetimepicker').datetimepicker(
            lang: 'en',
            timepicker: false,
            closeOnDateSelect: true,
            dateFormat: "yy/mm/dd"  
        );
    );
</script>

【参考方案4】：

将您的脚本更改为这种方式以避免使用当前日期的时间避免分配 var d

<script>
        $("#datePickerStartDate").datepicker(
            
                dateFormat: "yy/mm/dd",
                showOtherMonths: true,
                selectOtherMonths: true,
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                gotoCurrent: true,
            ).datepicker("setDate", new Date());
 </script>