【问题标题】:Bootstrap Date picker Display only Specific month引导日期选择器仅显示特定月份
【发布时间】:2017-08-30 15:20:46
【问题描述】:

我只想从 bootstrap datepicker 获取财政年度(即:2017 年 7 月)和格式应该是这样的(2017-07-01/ yyyy-mm-dd)有没有办法完成这样的任务?

我搜索了很多,但我无法获得这样的结果,最重要的是在日历中我想限制用户不要选择其他月份,除了从第一个日期选择器开始的 7 月和从第二个日期选择器开始的六月。

【问题讨论】:

  • 请创建一个有效的 sn-p,这样可以提高我们帮助您的机会
  • ibb.co/buWNmF" width="100" height="100"> 这是我的图片,我展示了一个日历,我可以在其中选择任何月份,但我想限制月份和只想选择 6 月这一个月

标签: jquery html date bootstrap-datepicker


【解决方案1】:

修改dateFormat 属性。您还可以使用相对选择器删除选择器的日期部分。

$("#example").datepicker({
  changeYear: true,
  defaultDate: new Date(2017,5,03),
  dateFormat: 'MM yy',
  showButtonPanel: true,
  stepMonths: 0,
  onSelect: function(selectedDate) {
     console.log(selectedDate);
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="example" />

【讨论】:

  • 谢谢亲爱的,我试过了,但它不起作用,我只想启用 6 月的一个月,应该禁用整个月的 esle。
  • jsfiddle.net/RWY2X/31 这是一个例子,我可以在这个例子中选择所有月份,但我只想启用一个月。即:六月
  • 我会调查的。
【解决方案2】:

试试这个

viewMode:“months”仅显示月份和 minViewMode:“月”阻止数年

$('#id').datepicker({
        format: "mm-yyyy",
        viewMode: "months",
        minViewMode: "months"
    })

【讨论】:

  • 您的答案与其他答案相比如何?您还应该添加详细信息来解释您的解决方案为何有效。
  • viewMode: "months" 仅显示月份,而 minViewMode: "months" 防止显示年份。
【解决方案3】:
$input = $(".date");
$input.datepicker({
      format: "dd-mm-yyyy",
      defaultViewDate: {year:2000, month:0, day:1}
    });
 $input.datepicker("setDate", null);

假设有一个带有日期类的输入元素, 现在您正在设置 defaultViewDate 年 2000 月 1 月 1 日 之后,setDate null 将取消选择日期,现在您处于 1 月日历,没有任何选择的日期。

【讨论】:

    【解决方案4】:

    使用这些 cdn 文件:

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />
    <script>
        $(document).ready(function(){
          $( "#month,#month1" ).datepicker({
            inline: true,
            changeMonth: true,
            changeYear: true,
            minDate: -20,
            maxDate: "+5M +1D"
          });
        });
    </script>
    

    【讨论】:

      【解决方案5】:

      您也可以像这样使用月份的默认日期

      var today = new Date();
      var startDate = new Date(today.getFullYear(), 6, 1);
      var endDate = new Date(today.getFullYear(), 6, 31);
      
      $("#example1").datepicker({
       format: "MM yyyy",
          minViewMode: 1,
          autoclose: true,
         startDate: startDate,
         endDate: endDate
      });
      

      检查一下

      【讨论】:

      • 非常感谢,但它整个月都显示日期,但我只想显示月份,所有月份都应该被禁用,除了一个月(七月)这是一个示例链接jsfiddle.net/RWY2X/31跨度>
      • 检查更新的答案,如果它解决了问题,请接受它
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-05-10
      • 2015-12-29
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多