bootstrap-datepicker中文文档

bootstrap-datepicker 通过show方法主动弹出日期选择框

bootstrap-datepicker 通过show方法主动弹出日期选择框,应用场景我理解的是这样的,有些用户为了快速的填写表单并不会去使用鼠标,而是通过键盘操作,当然输入日期input框获得焦点时,可以通过show方法主动弹出日期选择框让用户快速选择。

show方法

 //配置
 var ops = {
            todayHighlight:true, //设置当天日期高亮 
            language: 'zh-CN', //语言
            autoclose: false, //选择后自动关闭
            clearBtn: true,//清除按钮
            format: "yyyy-mm-dd",//日期格式 
   };
  //初始化
  $("#itxst").datepicker(ops);
  //弹出选择框
  $('#itxst').datepicker('show');

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>bootstrap-datepicker show方法例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/jquery-3.5.1/jquery.min.js"></script>
    <script src="https://www.itxst.com/package/bootstrap-4.5.0/js/bootstrap.min.js"></script>
    <link href="https://www.itxst.com/package/bootstrap-4.5.0/css/bootstrap.css" rel="stylesheet">
    <script src="https://www.itxst.com/package/bootstrap-datepicker-1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://www.itxst.com/package/bootstrap-datepicker-1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <link href="https://www.itxst.com/package/bootstrap-datepicker-1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
  <style>
    .btn{
      margin-top: 6px;
    }
  </style>
   </head>
<body style="padding:10px;">
    <div class="container ">
      
        <input type="text" id="itxst" placeholder="选择日期" class="form-control">
      
      <button type="button" class="btn btn-primary" onclick="showCtrl()">点击这里看效果</button>
     
    </div>
    <script>
    //初始化
    var ops = {
            todayHighlight:true, //设置当天日期高亮 
            language: 'zh-CN', //语言
            autoclose: false, //选择后自动关闭
            clearBtn: true,//清除按钮
            format: "yyyy-mm-dd",//日期格式 
        };
     $("#itxst").datepicker(ops);
     //弹出选择框
     function showCtrl()
     {
      $('#itxst').datepicker('show'); 
     }
    </script>
</body>
</html>

在线试一试

Catalog
快速入门 属性 属性列表 beforeShowDay beforeShowMonth beforeShowYear calendarWeeks datesDisabled daysOfWeekDisabled defaultViewDate startDate & endDate format inputs language maxViewMode minViewMode multidate todayHighlight I18N语言 方法 setDaysOfWeekDisabled destroy show hide update setDate setUTCDate getDate getUTCDate clearDates setStartDate setEndDate setDatesDisabled setDaysOfWeekHighlighted 事件 show hide clearDate changeDate changeMonth changeYear changeDecade changeCentury