如何设置Datepicker引导程序

时间:2017-03-22 03:52:25

标签: javascript jquery twitter-bootstrap datepicker

我想为项目创建一个入门日期。在这里,我使用bootstrap中的datepicker。

这里是我的代码:

<input class="form-control tanggal" id="date" autocomplete="off" name="date_start" placeholder="YYYY-MM-DD" type="text" readonly="" required="">

<input class="form-control tanggal" autocomplete="off" id="date_end" name="date_end" placeholder="YYYY-MM-DD" type="text" readonly="" required="required">

这是我的javascript:

<script>
  $(document).ready(function(){
    var date_input=$('input[name="date_start"]'); //our date input has the name "date"
    var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
    var currentdate = new Date();
    currentdate.setDate(currentdate.getDate() + 1);
    var tomorrow = currentdate.toJSON().slice(0,10);
    date_input.datepicker({
      format: 'yyyy-mm-dd',
      container: container,
      todayHighlight: true,
      autoclose: true,
      startDate: tomorrow
    })
  })
  $(document).ready(function(){
    var date_input=$('input[name="date_end"]'); //our date input has the name "date"
    var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
    var currentdate = new Date();
    currentdate.setDate(currentdate.getDate() + 1);
    var tomorrow = currentdate.toJSON().slice(0,10);
    date_input.datepicker({
      format: 'yyyy-mm-dd',
      container: container,
      todayHighlight: true,
      autoclose: true,
      startDate: tomorrow
    })
  })
</script>

我的问题是如何设置我的 date_end 是从 date_start 之后的+1 day开始,并且无法选择小于 date_start ?有人给我解决方案吗?

我应该添加什么代码?让它像我想要的那样工作?

1 个答案:

答案 0 :(得分:1)

@Adam Projo

我检查了你的小提琴,并实现了以下代码,它的工作原理。请为 date_start 提供id="start_date",为 date_end 提供id="end_date"。请看看

$(document).ready(function(){
        $("#start_date").datepicker({
        todayBtn:  1,
        autoclose: true,
        }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        minDate.setDate(minDate.getDate()+1);
        $('#end_date').datepicker('setStartDate', minDate);
        });
    })