【问题标题】:Excluding Time Segment from Bootstrap Date time picker从 Bootstrap 日期时间选择器中排除时间段
【发布时间】:2016-05-11 22:06:49
【问题描述】:

我正在尝试实现 Bootstrap 日期时间选择器;下面是链接;

https://fiddle.jshell.net/0sowpm1v/2/

问题 1: 目前,即使用户没有选择时间组件,选择器也会将时间显示为 00:00。 我想要实现的是,如果用户没有选择任何时间,那么时间段将会下降。

如果用户选择日期为“2015-05-01”,则输出应为“2015-05-01”而不是“2015-05-01 00:00”。

问题 2:

如果这是不可能的,我们可以在选择器的“onClose”事件中触发任何函数调用吗?

注意:相关的日期时间选择器不支持“onClose”事件,我不知道它的等效方法。

下面是我的代码:

<div class="container">
<div class="row">
    <div class='col-sm-3'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control"  />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>

这是日期时间选择器的 JQuery 绑定;

            $('#datetimepicker1').datetimepicker({
                format : "YYYY-MM-DD HH:mm"
            });

【问题讨论】:

  • 我需要时间段,将格式设置为 'YYYY-MM-DD' 将删除时间选择。如果用户正在选择时间,那么我需要显示它。所以改变格式是行不通的。
  • 您的代码应该有问题,而不是在外部网站上。
  • 这是一个小提琴链接。我正在尝试实现简单的 Bootstrap 日期时间选择器,代码并不特定于我的问题。无论如何,我会编辑问题。
  • 是的,它是一个小提琴链接,并且?它突然不再是外部网站还是什么?
  • 感谢您的建议。我已经更新了这个问题。任何帮助将不胜感激。

标签: javascript jquery twitter-bootstrap-3 datetimepicker


【解决方案1】:

你可以使用这个代码sn-p

$('#datetimepicker1').datetimepicker({
                    format : "YYYY-MM-DD",
                    autoclose: true,
                });

【讨论】:

  • 我需要时间段,将格式设置为 'YYYY-MM-DD' 将删除时间选择。如果用户正在选择时间,那么我需要显示它。所以改变格式是行不通的。
【解决方案2】:

这只是一种解决方法。如果哪位有更好的答案,欢迎分享。

这是我实现的 JQuery 解决方法。

            $('#datetimepicker1').datetimepicker({
                format: "YYYY-MM-DD HH:mm",
                useStrict: true,
                keepInvalid: true
            });

            $("#datetimepicker1").on("dp.change", function(e) {
                if ($('#lblValue').text() == 1) {
                    $('#lblValue').text('2');
                    $('#txtDate').val('');
                } else if ($('#lblValue').text() == 2) {
                    $('#lblValue').text('3');
                }
            });

            $("#datetimepicker1").on("dp.hide", function(e) {
                if ($('#lblValue').text() == 2 && $('#txtDate').val() == '') {
                    $('#lblValue').text('4');
                } else {
                    $('#lblValue').text('2');
                }

                if ($("#txtDate").val() != "" && $("#txtDate").val().trim().substring(16, 10).trim() == "00:00") {
                    $("#txtDate").val($("#txtDate").val().trim().substring(10, 0));
                }
            });

【讨论】:

  • 虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改,仅链接答案可能会失效。 - From Review
  • 据我所知,小提琴链接通常不会改变。如果我错了,请纠正我!
  • 我只是想知道你是如何在没有代码的情况下添加fiddle 的。希望这就是您的答案没有格式化的原因。请参阅Why and how are some answers deleted? 第 5 点,因为这样会将您的答案归类为低质量帖子。最好使用演示链接添加代码将是一个合适的答案。
  • 我没有说我的小提琴没有任何代码。我只是问小提琴链接是否改变?我添加代码的任何方式。进一步的任何帮助将不胜感激。
猜你喜欢
  • 2018-08-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-02-22
  • 1970-01-01
相关资源
最近更新 更多