从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>