bootstrap datepicker只选择年份

Posted 2023-04-01

怎么设置bootstrap的 datepicker，使其只选择年份？？
目前我是这样设置的：
$('#currYear').datepicker(
startView: 'decade',
minView: 'decade',
format: 'yyyy',
autoclose: true
);
但是这样设置在选择了年份之后还得选择月份和日期才能显示选中的年份，我应该如何设置才能让它选择了年份之后就直接显示选中的年份而不用继续选择月份和日期？？

//选择年的 startView: 4, minView: 4, format: 'yyyy',
$('#datetimepicker').datetimepicker(
format: 'yyyymm',
weekStart: 1,
autoclose: true,

startView: 2,
maxViewMode: 1,
minViewMode:1,
forceParse: false,
language: 'zh-CN'
);

主要为：startView: 2, maxViewMode: 1,minViewMode:1,这三个参数，第一个表示起始选择范围，0为日，1为月，2为年，第二个参数表示最大选择范围，第三个表示最小选择范围。数字意义同第一个参数。
//只选择年
startView: 2, maxViewMode: 2,minViewMode:2,
//只选择月
startView: 2, maxViewMode: 1,minViewMode:1,
起始范围startView可以自定

另附手册地址：http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#startdate 参考技术A

将图一红框内的换成图二红框内的

参考技术B //统计 statistic.jsp
$("#search_year").datetimepicker(format: 'yyyy', startView : "decade", minView: 'decade',language : 'zh-CN',autoclose: true).on('changeDate',function(ev)
    var search_year=$("#search_year").val();
    $("#search_year").datetimepicker('hide');
);

startView : "decade", minView: 'decade'

startView

Number, String. 默认值：2, 'month'

日期时间选择器打开之后首先显示的视图。 可接受的值：

0 or 'hour' for the hour view

1 or 'day' for the day view

2 or 'month' for month view (the default)

3 or 'year' for the 12-month overview

4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.

minView

参考技术C

这个日期范围选择器组件引导创建一个下拉菜单，用户可以选择一个日期范围。如果没有选择调用时，它将呈现出两个日历从选择开始日期和结束日期。或者，你可以提供一系列的日期范围，用户可以从相反的选择从日历上的日期选择。如果连接到一个文本输入，选择的日期将插入文本框。否则，你可以接受的选择提供一个自定义回调函数。

构件也可以被用来作为通过设置singledatepicker选择单个日期选择器。

参考技术D 同样建NJ树，为什么MEGA算得那么快，phylip算nj之前要算dist，mega也算吗？
——没用过phlip，不知道具体情况，但是构建NJ树的基础都是先计算出两两距离，然后再根据距离大小画出树图，至于为啥MEGA要快，可能是程序编辑的不一样吧，就像我用PAUP计算MP和NJ树时，特别是序列很多的时候，比MEGA快得不是一倍两倍。

Bootstrap datePicker（仅限月份和年份）不会正确显示

【中文标题】Bootstrap datePicker（仅限月份和年份）不会正确显示

【英文标题】：Bootstrap datePicker(Months and years only) wont show properly

【发布时间】：2019-08-09 04:42:06

【问题描述】：

我找到了一个代码，它将提供一个日期选择器输入框，它只允许选择月份和年份，但输出确实显示了我选择的正确日期，但选择框仍然显示日期。

图1是我选择任何日期之前的条件 https://imgur.com/DmAud4y.png

图2是我选择任意日期后的状态 https://i.imgur.com/1iYYQiM.png

<div class='input-group date datepicker' id='table'>
    <input type='text' name="tgl" class="form-control" />
         <span class="input-group-addon">
                   <span class="glyphicon glyphicon-calendar"></span>
             </span>
</div>

这是javascript

$('#table').datepicker(
    format: 'MM/yyyy', 
    icons: 
        time: 'fa fa-time',
        date: 'fa fa-calendar',
        up: 'fa fa-chevron-up',
        down: 'fa fa-chevron-down',
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
    
);

我确定我确实导入了引导程序

【参考方案1】：

您可能希望将以下属性添加到您的 datepicker 初始化中：

startView: "months",
minViewMode: "months"

工作示例：

$('#table').datepicker(
  format: 'MM/yyyy',
  icons: 
    time: 'fa fa-time',
    date: 'fa fa-calendar',
    up: 'fa fa-chevron-up',
    down: 'fa fa-chevron-down',
    previous: 'fa fa-chevron-left',
    next: 'fa fa-chevron-right',
    today: 'fa fa-screenshot',
    clear: 'fa fa-trash',
    close: 'fa fa-remove'
  ,
  startView: "months",
  minViewMode: "months"
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<div class='input-group date datepicker' id='table'>
  <input type='text' name="tgl" class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

【讨论】：

工作！！谢谢你^^

@CarinaNatalia 很高兴它有帮助:)