在 JQuery datetimepicker 中设置日期和时间

发布于 2024-11-30 18:56:53 字数 1133 浏览 3 评论 0原文

我遇到一种情况，我尝试使用 Trent Richardson 的 datetimepicker JQuery 扩展让用户选择日期和一口气。

但在此之前，我想设置日期和时间，以便日期时间选择器的输入框显示将从服务器设置的默认日期和时间。然后，用户在输入框内单击以调用 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: ' ',

                    });

谢谢

原文

I have a situation where I'm trying to use Trent Richardson's datetimepicker JQuery extension to have users select dates and times in one go.

But before that, I want to set the date and time so that the datetimepicker's input box displays a default date and time which would be set from the server. A user would then click inside the input box to call datetimepicker, then the default date and time would appear on datetimepicker. The user can then override these if necessary.

So far, in code of mine I have:

<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>

Which will set the date correctly but not the time and hour and minute sliders. The time also displays as 00 03 rather than 16 03.

Can anyone tell me what I'm doing wrong or not doing here so that datetimepicker shows correct default settings?

Other settings are:

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

                    });

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

失眠症患者 2024-12-07 18:56:53

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

因此，如果您有一个 ID 为“dtp”的文本框，并且想要使用“5/31/2013 7:30 PM”初始化它，您将执行以下操作：

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

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

希望这有帮助。

I know this issue is old. But for those still looking for a solution here is how I did it. DatetimePicker plugin is an addon to jQueryUI DatePicker, so I think all options and methods of DatePicker still apply in addition to DatetimePicker ones.

So if you have a text box with id "dtp" and you want to initialize it with "5/31/2013 7:30 PM", you will do:

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

This should highlight the correct date in the calendar and set the sliders to the correct hour and minute as defined in the options.

Hope this helps.

回复收藏 0 原文

北凤男飞 2024-12-07 18:56:53

如果您在输入字段中预先填写了日期值，则日期选择器应该默认为该值。

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

回复收藏 0 原文

倒带 2024-12-07 18:56:53

如果您正在谈论 Trent Richardson 的 datetimepicker，请查看此线程
https://stackoverflow.com/a/12645192/551811

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

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

if you are talking about datetimepicker from Trent Richardson, have a look at this thread
https://stackoverflow.com/a/12645192/551811

In my experience, even when you have a date prefilled in the textbox, if you want to close the datepicker dialog without entering a date, it replaces the value in the textbox with today's. The solution is to set your textbox value in the onClose method. In this example, value will contain your original value:

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

回复收藏 0 原文

遗弃Ｍ 2024-12-07 18:56:53

我希望这将有助于设置 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>

I hope this will help to set the value for 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>

回复收藏 0 原文