Question

我有一种情况，我正在尝试使用Trent Richardson的datetimepicker JQuery extension让用户一次性选择日期和时间。

但在此之前，我想设置日期和时间，以便datetimepicker的输入框显示将从服务器设置的默认日期和时间。然后，用户将在输入框内单击以调用datetimepicker，然后默认日期和时间将显示在datetimepicker上。然后，用户可以根据需要覆盖这些。

到目前为止，在我的代码中我有：

<script type="text/javascript">
        $(function(){
            $('.example-container > pre').each(function(i){
                 eval($(this).text());
            });

            $('#example1').datetimepicker('setDate', (new Date(2010, 11, 20, 16, 03)));

        });
</script>

这将正确设置日期，但不会设置时间和小时和分钟滑块。时间也显示为00 03而不是16 03.

任何人都可以告诉我我做错了什么或不做这样做，以便datetimepicker显示正确的默认设置？

其他设置包括：

$('#example1').datetimepicker({                                                    
                        dateFormat: 'dd mm yy',
                        timeFormat: 'hh mm',
                        showMinute: false,
                        showSecond: false,
                        separator: ' ',

                    });

由于

Answer 1

我知道这个问题已经过时了。但对于那些仍在寻找解决方案的人来说，我是如何做到的。 DatetimePicker插件是jQueryUI DatePicker的插件，所以我认为除了DatetimePicker之外，DatePicker的所有选项和方法仍然适用。

因此，如果你有一个id为“dtp”的文本框，并且你想用“5/31/2013 7:30 PM”初始化它，你会这样做：

$("#dtp").datetimepicker({
defaultDate: "5/31/2013", // this is from jQueryUI datepicker
hour: 19,
minute: 30
});

这应突出显示日历中的正确日期，并将滑块设置为选项中定义的正确小时和分钟。

希望这会有所帮助。

Answer 2

如果使用日期值预先填充输入字段，则datepicker 应默认为该值。

从可用性的角度来看，我会使用这种方法而不是更具程序性的解决方案。

Answer 3

如果您正在谈论来自Trent Richardson的datetimepicker，请看一下这个帖子 https://stackoverflow.com/a/12645192/551811

根据我的经验，即使您在文本框中预先填写了日期，如果您想在不输入日期的情况下关闭日期选择器对话框，它会将文本框中的值替换为今天的值。解决方案是在onClose方法中设置文本框值。在此示例中，value将包含原始值：

   $('input.datetime').datetimepicker({
            onClose: function (value) {
                            $('input.datetime').val(value);
                        }
         });

Answer 4

问题与您正在使用的日期和时间格式的自定义有关。如果恢复原始设置，则datetimepicker的显示应该是正确的。

Answer 5

我希望这有助于设置 datetimepicker 的值。

$("#dateOfEnrollment").find("input").val('22-12-2020');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group date" id="dateOfEnrollment" data-target-input="nearest">
  <input type="text" class="form-control datetimepicker-input" data-target="#dateOfEnrollment" placeholder="Date Of Enrollment..">
  <div class="input-group-append" data-target="#dateOfEnrollment" data-toggle="datetimepicker">
    <div class="input-group-text"> <i class="fa fa-calendar"> </i>
    </div>
  </div>
</div>

在JQuery datetimepicker中设置日期和时间

5 个答案: