從Bootstrap隱藏年份Datetimepicker

Question

我在單個頁面中有兩個引導程序datetimepickers。一種是選擇年份和另一種選擇月份。我通過屬性viewMode和format管理了這兩個。請參閱下面我的兩個的DateTimePicker代碼：

$('.datepickersren').datetimepicker({    
    format: "MMMM", 
    viewMode: "months", 
}) 

$('.datepickers').datetimepicker({    
    format: "YYYY", 
    viewMode: "years", 
}) 

我想隱藏在今年選擇器，如果viewMode: "months"。

我試過下面的CSS代碼，它正在工作，這是我的確切要求。

<style type="text/css"> 
.picker-switch{ 
    display: none !important; 
} 
.prev{ 
    display: none !important; 
} 
.next{ 
    display: none !important; 
} 
</style> 

但年選擇器也躲在年選擇器也viewMode: "years"。這不應該發生。

我可以只有月份選取器的上述CSS樣式嗎？我的意思是如果viewMode是"months"（viewMode: "months"）。

Answer 1

您可以在.picker-switch.prev和.next之前限制您的CSS選擇器的添加.datepickersren。這樣，您的規則將僅適用於.datepickersren課程的撿拾員。

這裏工作示例：

$('.datepickersren').datetimepicker({    
 
    format: "MMMM", 
 
    viewMode: "months", 
 
}); 
 

 
$('.datepickers').datetimepicker({    
 
    format: "YYYY", 
 
    viewMode: "years", 
 
});

.datepickersren .picker-switch{ 
 
    display: none !important; 
 
} 
 
.datepickersren .prev{ 
 
    display: none !important; 
 
} 
 
.datepickersren .next{ 
 
    display: none !important; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.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.18.1/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/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 datepickersren"> 
 
     <input type='text' class="form-control"/> 
 
     <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-calendar"></span> 
 
     </span> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <div class="input-group date datepickers"> 
 
     <input type='text' class="form-control"/> 
 
     <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-calendar"></span> 
 
     </span> 
 
    </div> 
 
</div>