Question

我在一个页面中有两个bootstrap 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

您可以限制在.datepickersren .picker-switch和.prev之前添加.next的CSS选择器。这样，您的规则将仅适用于.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>

从Bootstrap Datetimepicker中隐藏年份

1 个答案: