如何使用bootstrap-datetime選擇器來使用今天和明天的按鈕？

enter image description here 如何使用bootstrap-datetime選擇器來使用今天和明天的按鈕？

我用bootstrap-datetimepicker做了這個。但我今天需要&明天按鈕&佈局應該如下。我怎樣才能做到這一點？

enter image description here

HTML代碼：

<div class='col-md-6'> 
    <label class=" text-info">Depart</label> 
    <div class="form-group"> 
     <div class='input-group date' id='datetimepicker1' data-date-format="DD-MM-YYYY"> 
      <input type='text' class="form-control" placeholder="DD-MM-YYYY" /> 
      <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</div> 
<div class='col-md-6'> 
    <label class=" text-info">Return</label> 
    <div class="form-group"> 
     <div class='input-group date' id='datetimepicker2' data-date-format="DD-MM-YYYY"> 
      <input type='text' class="form-control" placeholder="DD-MM-YYYY" /> 
      <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</div>

的Javascript

$(function() { 
    //Depart & Return Date Time Picker 
    $('#datetimepicker1').datetimepicker({ 
     pickTime: false, 
     todayBtn: true 
    }); 
    $('#datetimepicker2').datetimepicker({ 
     pickTime: false 
    }); 

});

來源

2014-03-24 Biplob Hossain

你需要做以下：

爲顯示的「今日」和「明天」選擇點擊事件以更新您的「月/日/日」。
打開DatePicker的onselect事件，即選擇某個日期時，使用此日期來更新顯示的「月/日/日」。

這樣你應該可以完成這件事。

來源

2014-03-24 11:27:39 Yasser

能否請你告訴我細節？ –

這裏的HTML，讓你正在尋找的佈局，只使用自舉類：

<div class='col-md-6'> 
    <label class="text-info">Depart</label> 
    <div class="btn-group pull-right"> 
     <button type="button" class="btn btn-default btn-xs">Today</button> 
     <button type="button" class="btn btn-default btn-xs">Tomorrow</button> 
    </div> 
    <div class="form-group"> 
     <div class='input-group date' id='datetimepicker1' data-date-format="DD-MM-YYYY"> 
      <input type='text' class="form-control" placeholder="DD-MM-YYYY" /> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</div> 
<div class='col-md-6'> 
    <label class="text-info">Return</label> 
    <div class="btn-group pull-right"> 
     <button type="button" class="btn btn-default btn-xs">Today</button> 
     <button type="button" class="btn btn-default btn-xs">Tomorrow</button> 
    </div> 
    <div class="form-group"> 
     <div class='input-group date' id='datetimepicker2' data-date-format="DD-MM-YYYY"> 
      <input type='text' class="form-control" placeholder="DD-MM-YYYY" /> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</div>

來源

2014-03-24 11:42:52

感謝您的回覆。其實我需要JavaScript更新日期字段點擊今天或明天。日期顯示爲我的第二張圖片，而不是文本框。 –

在這種情況下，您可以使用瀏覽器中的F12工具查看您嘗試重現的控件中的樣式。 –

回答

相關問題