單擊按鈕時切換DateTimePicker視圖

我在我的項目中使用DateTimePicker 3 Bootstrap作爲我的日曆。如果點擊某些按鈕，我需要將我的datetimepicker視圖從「月份到日期」或「日期到月份」切換。我嘗試使用jQuery，但它根本不工作。請檢查我是否在代碼中犯了錯誤。單擊按鈕時切換DateTimePicker視圖

我當前的標記和腳本代碼：

<script> 
$(document).ready(function(){ 
    $("#Month").click(function() { 
     $('#datetimepicker3').datetimepicker({ 
      format: 'M-YYYY', 
      maxDate: 'now' 
     }); 
    }); 
    $("#Date").click(function() { 
     $('#datetimepicker3').datetimepicker({ 
      format: 'DD-MM-YYYY', 
      maxDate: 'now' 
     }); 
    }); 
}); 
</script> 

<div class="form-group"> 
    <div class='input-group date' id='datetimepicker3'> 
     <input type='text' class="form-control" name="date" /> 
     <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-time"></span> 
     </span> 
    </div> 
</div>

我想要的結果：

來源

2016-07-27 Suhandy Chow

要更改視圖模式下，你可以簡單地使用viewMode選項。

您可以使用默認配置（天或月）初始化您的日期選擇器，然後使用viewMode和format函數更改選項。

您可以使用下面的代碼爲例：

// Init datetimepicker with default config 
 
// (if you want date config change format: 'DD-MM-YYYY' and viewMode: 'days') 
 
var picker = $('#datetimepicker3').datetimepicker({ 
 
    format: 'M-YYYY', 
 
    maxDate: 'now', 
 
    viewMode: 'months' 
 
}); 
 

 
$("#Month").click(function() { 
 
    picker.data("DateTimePicker").format('M-YYYY'); 
 
    picker.data("DateTimePicker").viewMode('months'); 
 

 
}); 
 
$("#Date").click(function() { 
 
    picker.data("DateTimePicker").format('DD-MM-YYYY'); 
 
    picker.data("DateTimePicker").viewMode('days'); 
 

 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="form-group"> 
 
    <div class="input-group date" id="datetimepicker3"> 
 
    <input type="text" class="form-control" /> 
 
    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <button id="Month" class="btn btn-default">Month</button> 
 
    <button id="Date" class="btn btn-default">Date</button> 
 
</div>

來源

2016-07-27 07:39:43 VincenzoC

你的答案是可以正常使用！現在，當一個人點擊按鈕時，我如何獲得按鈕來改變顏色？ –

您可以使用jQuery更改按鈕顏色（例如，通過「addClass」或「css」方法）。無論如何，這個請求在與你原來的問題沒有嚴格關聯，所以我建議在網上搜索一個例子（例如見[答]（http://stackoverflow.com/a/16240943/4131048） – VincenzoC

單擊按鈕時切換DateTimePicker視圖

回答

相關問題