bootstrap-datepicker中文文档

bootstrap-datepicker inputs 区间选择

同我们会遇到这样的场景需要选择区间日期,比如开始日期结束日期如入住日期和退房日期,bootstrap-datepicker提供了inputs属性来快速时间这个功能。

inputs属性

  $('#rzDate').datepicker({
      language: 'zh-CN', //语言
      autoclose: false, //选择后自动关闭
      clearBtn: true,//清除按钮
      format: "yyyy-mm-dd",//日期格式
       inputs: $('.range')
 })

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>bootstrap-datepicker inputs例子</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>
        .day1 {
            background-color: red !important;
            color: #fff !important;
        }
    </style>
</head>
<body style="padding:10px;">
    <div class="container ">
      <div id="rzDate">
       <input type="text" class="range" placeholder="入住日期">
       <input type="text" class="range" placeholder="退房日期">
     </div>
    </div>
    <script>
   $('#rzDate').datepicker({
      language: 'zh-CN', //语言
      autoclose: false, //选择后自动关闭
      clearBtn: true,//清除按钮
      format: "yyyy-mm-dd",//日期格式
      inputs: $('.range')
    });
    </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