Question

我在kendo DateTime Picker上放置了web page。

根据最初的要求，它应该只显示日期，如果用户需要，他/她也可以选择时间。

以下是最初填充code的{{1}}：

kendo datetime picker

以上代码填写日期和时间。但我想填写当前的日期。

我尝试使用以下代码检查它是否只能填充日期。但它增加了上午12:00的日期。

 <input id="txtDate" type="text" maxlength="10" style="width: 250px;" value="" />

  <script type="text/javascript">
      $('#txtDate').kendoDateTimePicker({ value: new Date() });
</script>

有没有办法只填充$('#txtDate').kendoDateTimePicker({ value: new Date('04/30/2017') });中的date？

Answer 1

您所看到的是kendoDatePicker，它允许用户只选择日期。

$(document).ready(function() 
     $("#txtDate").kendoDatePicker();
});

编辑：或将格式属性添加到kendoDateTimePicker，这将影响用户显示值的方式。

$('#txtDate').kendoDateTimePicker({ 
    value: new Date(),
    format: 'MM/dd/yyyy'
});

Answer 2

如果你从不需要显示时间，一个可能的选项可能是将日期时间值存储为当前窗口小部件的属性，并在窗体的提交事件上手动取消值：

<script>
    $(document).ready(function () {

        $("#datetimepicker").kendoDateTimePicker({
            format: "yyyy/MM/dd",
            change: function(data){
                data.sender.element.attr("value", data.sender.value());
            }
        });

    });

    $("form").on("submit", function(){
        $("input").each(function(){
            var inputValue = $(this).attr("value");

            if(inputValue){
                $(this).val(inputValue);
            }
        });

    })

</script>

如果您想在用户选择时间后显示时间，您可以将订阅功能的窗口小部件的格式更改为打开事件：

<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
    format: "yyyy/MM/dd",
    value: new Date(),
    open: function(e){
        if(e.view == "time"){
        this.setOptions({format: "yyyy/MM/dd HH:mm"})
      }

      if(e.view == "date"){
        this.setOptions({format: "yyyy/MM/dd"})
      }
    }
});

Answer 3

您可以基于上面给出的答案，并检测何时选择了时间，然后重新应用javascript中的显示格式。

如何在KendoDateTime选择器中仅显示日期

3 个答案: