时间戳

首页 > 解决方案 > flatpickr：按下图标时外部元素不起作用

javascript - flatpickr：按下图标时外部元素不起作用

问题描述

我想使用外部元素选项（包装）。我想如果我使用这个选项，我可以通过简单地按下日历图标来打开一个日期选择器，但事实并非如此。如何做到这一点，这个日期选择器会在点击日期选择器图标和输入字段时打开？

更新 1 号

经过反复试验，我意识到我缺少用类 flatpickr 包装 div。案件可以结案。（请参阅更新以获取解决方案 [第二个日期选择器]）

更新 3 号

它仍然没有修复。现在它打开一个下拉菜单，但是在选择字段上是空的

更新 4 号

在第三次更新现在它似乎正在工作。最后。需要添加数据属性（data-toggle 和 div 类 flatpickr）

flatpickr($(".input-group.date"), {
  enableTime: false,
  time_24hr: true,
  altInput: true,
  allowInput: true,
  dateFormat: "Y-m-d",
  altFormat: "Y-m-d",
  wrap: true,
  minDate: "2020-01",
  maxDate: "2022-01"
});

//working after adding div with flatpickr class
//opens mnu on pressing icon

$(".flatpickr").flatpickr($(".input-group.date"), {
  enableTime: false,
  time_24hr: true,
  altInput: true,
  allowInput: true,
  dateFormat: "Y-m-d",
  altFormat: "Y-m-d",
  wrap: true,
  minDate: "2020-01",
  maxDate: "2022-01"
});

//working after adding div with flatpickr class
//opens mnu on pressing icon

$(".input-group.date3").flatpickr({
  enableTime: false,
  time_24hr: true,
  altInput: true,
  allowInput: true,
  dateFormat: "Y-m-d",
  altFormat: "Y-m-d",
  wrap: true,
  minDate: "2020-01",
  maxDate: "2022-01"
});
<!DOCTYPE html>
<html>
   <head>
      <title>test</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
      <link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css" rel="stylesheet" />
   </head>
   <body>
      <div class="col-sm-3">
         <div class="form-group">
            <label class="control-label">
            from
            </label>
            <div class="input-group date">
               <input type="text" class="form-control" autocomplete="off" data-input/>
               <span class="
                  ">
               <i class="fa fa-calendar"></i>
               </span>
            </div>
         </div>
      </div>
      
      <!--second atempt-->
      <div class="col-sm-3">
         <div class="form-group">
            <label class="control-label">
            from (working correctly)
            </label>
            <div class="flatpickr">
               <div class="input-group date">
                  <input type="text" class="form-control" autocomplete="off" data-input/>
                  <span class="
                     ">
                  <i class="fa fa-calendar"></i>
                  </span>
               </div>
            </div>
         </div>
      </div>
      <!--third attempt-->
      <div class="col-sm-12">
         <div class="form-group">
            <label class="control-label">
            from (third time is a charm)
            </label>
            <div class="flatpickr">
               <div class="input-group date3">
                  <input type="text" class="form-control" autocomplete="off" data-input/>
                  <span class="random-class" data-toggle>
                  <i class="fa fa-calendar"></i>
                  </span>
               </div>
            </div>
         </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js"></script>
   </body>
</html>

标签： javascriptflatpickr

解决方案

推荐阅读