Question

我有几个来自eyecon.ro的bootstrap datepicker实例，我想在下面打开一些日期选择器（默认），在日期输入字段的左边打开一些，其中向左移动仅在某些屏幕宽度使用CSS @media查询。我尝试在jQuery中使用addClass()，并尝试用div包装一个类。

将日期选择器向左移动的媒体查询是：

@media (min-width: 768px) and (max-width: 1680px) {
    div.datepicker{ margin-top:-140px!important;margin-left:-220px!important;}
}

但目前，这适用于所有实例，而我需要它具有选择性。有什么想法吗？

Answer 1

如果有可能使用类div包装，请尝试使用CSS +选择器：

<强> HTML：

<div class="datepicker-on-left">
  <div class="datepicker"><div/>
</div>

<强> CSS：

@media (min-width: 768px) and (max-width: 1680px) {
    div.datepicker-on-left + div.datepicker { 
      margin-top:-140px!important;
      margin-left:-220px!important;
    }
}

Answer 2

简单的解决方案是使用构造函数中的一行代码扩展bootstrap-datepicker.js脚本：

    if ('addClass' in options) { this.picker.addClass(options.addClass); }

然后开始：

<script>
$( "#startdate" ).datepicker({
    addClass: "dpleft"
});
</script>

将css更改为：

@media (min-width: 768px) and (max-width: 1680px) {
    div.datepicker.dpleft{ margin-top:-140px!important;margin-left:-220px!important;}
}

如何在特定屏幕宽度的左侧输入字段打开引导日期选择器

2 个答案: