为什么选择今天以外的日期时不能将timepicker降级? [英] Why timepicker can not be downgraded when choosing a date other than today?

问题描述

我的html代码如下:

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
            </div>
        </div>

        <div class='col-sm-6'>
            <div class="form-group">
                <input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
            </div>
        </div>
    </div>
</div>
<button id="btnSubmit">
    Submit
</button>

我的JavaScript代码如下:

$(function () {    
    $('#datepicker').datetimepicker();

    $('#timepicker').datetimepicker({
        minDate: moment().startOf('minute').add(300, 'm'),
    });
});
$("#btnSubmit").click(function() {
    value = document.getElementById('datetimepicker').value;
    console.log(value)
});

像这样的演示: https://jsfiddle.net/8jpmkcr5/89/

如果我单击时间选择器，然后单击减量小时图标，则它不起作用.我知道它的发生是因为此代码:minDate: moment().startOf('minute').add(300, 'm').我希望代码仅在这一天工作.除了今天，该代码无法正常工作

我该怎么办?

解决方案

您的#datepicker和#timepicker是无关，它们是完全独立的， 您可以 关联 .您可以使用 minDate 来动态设置#timepicker的minDate.功能.

您可以为 dp.change 事件添加一个列表器并启用或如果选定的日期是当日，则禁用#timepicker的minDate(使用momentjs minDate 选项也添加到如果您要按照评论中的说明禁用过去的日期.

这里是一个工作示例:

 $(function () {    
  $('#datepicker').datetimepicker({
    minDate: moment().startOf('day')
  }).on('dp.change', function(e){
    if( e.date && e.date.isSame(moment(), 'd') ){
      var min = moment().startOf('minute').add(300, 'm');
      $('#timepicker').data("DateTimePicker").minDate(min);
    } else {
      $('#timepicker').data("DateTimePicker").minDate(false);
    }
  });
  
  $('#timepicker').datetimepicker({
    minDate: moment().startOf('minute').add(300, 'm'),
  });
});


$("#btnSubmit").click(function() {
   value = document.getElementById('datepicker').value;
   console.log(value)
   valueTime = document.getElementById('timepicker').value;
   console.log(valueTime)
}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                    <input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
            </div>
        </div>
        
        <div class='col-sm-6'>
            <div class="form-group">
                <input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
            </div>
        </div>
    </div>
</div>

<button id="btnSubmit">
    Submit
</button> 

请注意，如前所述，#datepicker和#timepicker是不相关的，因此，使用#timepicker您只需选择一个默认为当前日期的时间(使用).

My html code like this :

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
            </div>
        </div>

        <div class='col-sm-6'>
            <div class="form-group">
                <input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
            </div>
        </div>
    </div>
</div>
<button id="btnSubmit">
    Submit
</button>

My JavaScript code like this:

$(function () {    
    $('#datepicker').datetimepicker();

    $('#timepicker').datetimepicker({
        minDate: moment().startOf('minute').add(300, 'm'),
    });
});
$("#btnSubmit").click(function() {
    value = document.getElementById('datetimepicker').value;
    console.log(value)
});

Demo like this: https://jsfiddle.net/8jpmkcr5/89/

If I click the timepicker and click the decrement hour icon, it does not work. I know it happens because this code : minDate: moment().startOf('minute').add(300, 'm'). I want the code to work only on this day. Other than today the code does not work

How can I do it?

解决方案

Your #datepicker and #timepicker are unrelated, they are fully independent, is up to you to relate them. You can dinamically set minDate of #timepicker using minDate function.

You can add a listner for dp.change event and enable or disable the minDate for the #timepicker chceking if the selected day is current day (using momentjs isSame).

You have to add minDate option also to #datepicker if you want to disable past dates, as you stated in the comments.

Here a working sample:

$(function () {    
  $('#datepicker').datetimepicker({
    minDate: moment().startOf('day')
  }).on('dp.change', function(e){
    if( e.date && e.date.isSame(moment(), 'd') ){
      var min = moment().startOf('minute').add(300, 'm');
      $('#timepicker').data("DateTimePicker").minDate(min);
    } else {
      $('#timepicker').data("DateTimePicker").minDate(false);
    }
  });
  
  $('#timepicker').datetimepicker({
    minDate: moment().startOf('minute').add(300, 'm'),
  });
});


$("#btnSubmit").click(function() {
   value = document.getElementById('datepicker').value;
   console.log(value)
   valueTime = document.getElementById('timepicker').value;
   console.log(valueTime)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                    <input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
            </div>
        </div>
        
        <div class='col-sm-6'>
            <div class="form-group">
                <input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
            </div>
        </div>
    </div>
</div>

<button id="btnSubmit">
    Submit
</button>

Please note that, as stated before, #datepicker and #timepicker are unrelated, so with the #timepicker you are simply selecting a time, that defaults to current day (no automatic relationship with the selected day using #datepicker).

这篇关于为什么选择今天以外的日期时不能将timepicker降级?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！