Question

我正在使用下面的以下源代码，这给了我THIS输出

<html>
<head>
    <title>Mobile Page</title>
    <!-- stylesheets -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link href="css/bootstrap-datepicker.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" integrity="sha384-DmABxgPhJN5jlTwituIyzIUk6oqyzf3+XuP7q3VfcWA2unxgim7OSSZKKf0KSsnh" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    <div id="paginator"></div>
<script src="js/jquery.js"></script>  
    <script src="js/moment.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    <script src="js/bootstrap-datepaginator.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#paginator').datepaginator();
        });
    </script>      
</body>
</html>

但是我想这样显示IMAGE，请先帮助我，请先帮助我。

Answer 1

paginator插件似乎已经过时，并且似乎没有显示/隐藏其他日子的选项。

但是，您可以添加自己的CSS来隐藏不想显示的元素，如下所示：

#paginator .dp-item{
   display: none;
}

#paginator .dp-selected{
  display: inline-block;
}

还有一件事，根据JQuery，Paginator插件，Bootstrap和Moment的版本，您可能会收到有关使用不推荐使用的功能的插件的警告（如我所做的那样）-这是我能想到的最好的组合今天限时。

请参见下面的演示

$(function() {
  // options for paginator
  var options = {
    textSelected: 'MMMM DD, YYYY'
  }

  $('#paginator').datepaginator(options);
});

#paginator .dp-item {
  display: none;
}

#paginator .dp-selected {
  display: inline-block;
}

<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepaginator/1.1.0/bootstrap-datepaginator.js"></script>

<!-- stylesheets -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" integrity="sha384-DmABxgPhJN5jlTwituIyzIUk6oqyzf3+XuP7q3VfcWA2unxgim7OSSZKKf0KSsnh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepaginator/1.1.0/bootstrap-datepaginator.css" rel="stylesheet" />

<div class="row">
  <div id="paginator" class="col-sm-12"></div>
</div>

如何在引导日期分页器中仅显示一项

1 个答案: