Flatpickr when start date is selected, disable all dates before start date so end date can't select a date before

huangapple go评论59阅读模式
英文:

Flatpickr when start date is selected, disable all dates before start date so end date can't select a date before

问题

如果我使用开始日期选择器选择今天的日期,我希望在点击结束日期选择器时禁用所有在开始日期之前的日期,我只有Flatpickr的设置,我已经尝试使用disable函数,只是不确定该怎么做。

flatpickr('#startDate', {
  enableTime: false,
  allowInput: true,
  dateFormat: "m/d/y",
  disableMobile: "true",
  disable: [
    function(date) {
      // 周六
      return date.getDay() === 6;
    },
    function(date) {
      // 周日
      return date.getDay() === 0;
    },
    function(date) {
      // 禁用开始日期之后的日期
      if (selectedEndDate) {
        return date >= selectedEndDate;
      }
      return false;
    }
  ]
});

let selectedEndDate;

flatpickr('#endDate', {
  enableTime: false,
  allowInput: true,
  dateFormat: "m/d/y",
  disableMobile: "true",
  onChange: function(selectedDates, dateStr) {
    // 设置选定的结束日期
    selectedEndDate = selectedDates[0];
    // 刷新开始日期选择器以禁用过去的日期
    flatpickr('#startDate').set('disable', [
      function(date) {
        // 周六
        return date.getDay() === 6;
      },
      function(date) {
        // 周日
        return date.getDay() === 0;
      },
      function(date) {
        // 禁用开始日期之后的日期
        if (selectedEndDate) {
          return date >= selectedEndDate;
        }
        return false;
      }
    ]);
  }
});

请注意,上述代码添加了一个onChange事件处理程序,以便在选择结束日期时更新开始日期选择器以禁用开始日期之后的日期。

英文:

I have two date pickers. Start Date and End Date.

If i pick todays date for example using the start date picker, i would like all dates before that disabled so that when i click end date picker i cannot select any dates before the start date.

All i have is the Flatpickr setup and i have tried the disable function, im just not sure what to do.

flatpickr('#startDate', {
  enableTime: false,
  allowInput: true,
  dateFormat: "m/d/y",
  disableMobile: "true",
  disable: [
    function(date) {
      // saturdays
      return date.getDay() === 6;
    },
    function(date) {
      // sundays
      return date.getDay() === 0;
    }
  ]
});

flatpickr('#endDate', {
  enableTime: false,
  allowInput: true,
  dateFormat: "m/d/y",
  disableMobile: "true"
  // "plugins": [new rangePlugin({ input: "#endDate" })]
});

答案1

得分: 1

以下是翻译好的内容:

Option 1:
您可以以两种方式执行此操作:

使用Flatpickr的MinDate选项来指定允许选择的最小/最早日期

const start_date = flatpickr("#start_date", {
  dateFormat: 'Y-m-d',
  onChange: function(sel_date, date_str) {
    end_date.set("minDate", date_str);
  }
});

const end_date = flatpickr("#end_date", {
  dateFormat: 'Y-m-d'
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>

<label for="start_date">开始:</label>
<input type="text" id="start_date" name="start_date">

<label for="endDate">结束:</label>
<input type="text" id="end_date" name="end_date">

Option 2:
您还可以使用Flatpickr的范围功能,以便日期始终连续。

const range_flatpickr = flatpickr("#range_flatpickr", {
  dateFormat: 'Y-m-d',
  mode: "range"
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>

<label for="range_flatpickr">范围:</label>
<input type="text" id="range_flatpickr" name="range_flatpickr" style="width:200px">
英文:

You can do this in two ways:

Option 1:
Use Flatpickr's MinDate option to specify minimum/earliest date allowed for selection

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const start_date = flatpickr(&quot;#start_date&quot;, {
  dateFormat: &#39;Y-m-d&#39;,
  onChange: function(sel_date, date_str) {
    end_date.set(&quot;minDate&quot;, date_str);
  }
});

const end_date = flatpickr(&quot;#end_date&quot;, {
  dateFormat: &#39;Y-m-d&#39;
});

<!-- language: lang-html -->

&lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js&quot;&gt;&lt;/script&gt;

&lt;label for=&quot;start_date&quot;&gt;Start:&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;start_date&quot; name=&quot;start_date&quot;&gt;

&lt;label for=&quot;endDate&quot;&gt;End:&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;end_date&quot; name=&quot;end_date&quot;&gt;

<!-- end snippet -->

Option 2:

You can also use the Flatpickr range function, so the dates will always be consecutive.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const range_flatpickr = flatpickr(&quot;#range_flatpickr&quot;, {
  dateFormat: &#39;Y-m-d&#39;,
  mode: &quot;range&quot;
});

<!-- language: lang-html -->

&lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js&quot;&gt;&lt;/script&gt;

&lt;label for=&quot;range_flatpickr&quot;&gt;Range:&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;range_flatpickr&quot; name=&quot;range_flatpickr&quot; style=&quot;width:200px&quot;&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月11日 00:22:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76877619.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定