Question

我的预订系统有一个日期选择器，但不适用于1个示例。我有2个日期供员工填写。如果我保存入住日期（mm / dd / yy） 01/01/2020 而退房日期为 01 / 05/2020 。然后，如果我想编辑预订数据。我无法将“退房日期”更改为 01/03/2020 ，因为1到5现在是禁用日期。

我的问题是，是否有人知道如何处理。也许我需要为另一个系统编写代码以仅处理禁用日期。但是我想知道是否有人使用仅日期选择器来做到这一点。我喜欢那个。

我将flatPickr用作Jquery的datepicker。我使用PHP从数据库中获取禁用日期，并将其作为数组加载到datepicker的禁用日期功能中。

让我知道您的想法，如果您有提示和暗示，您也可以回答我。

感谢您的时间

HTML代码

infinite number of times

日期选择器代码查询。数据库和代码中的日期取两个日期之间的全天，并放置在const fetchCards = () => { return Axios(apiOptions('GET')).then( response => response.data, error => { console.log(`[Error]: ${error}`); } ); }; const addCard = props => { return Axios(apiOptions('POST', props)) .then(result => result.data) .catch(error => console.log(error)); }; const PlacesList = props => { const [cards, setCards] = useState([]); useEffect(() => { fetchCards().then(res => setCards(res)) }, []); // Problem with this part if (props.newCard.titleValue !== undefined) { console.log(props.newCard.titleValue); addCard(props.newCard).then(res => setCards(cards.concat(res))); } const createCards = () => { return cards .map((card, id) => { if (id > cards.length - 10) { return ( <PlaceCard title={card.name} url={card.link} /> ); } return false; }) .reverse(); }; return <div className="places-list root__section">{createCards()}</div>; }; export default PlacesList;函数中，变量为<div class="form-group row"> <label for="date" class="col-4 col-form-label">Check in</label> <div class="col-8"> <input id='from1' type='text' name='dateFrom1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off" /> </div> </div> <div class="form-group row"> <label for="date" class="col-4 col-form-label">Check out</label> <div class="col-8"> <input id='to1' type='text' name='dateTo1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off" /> </div> </div>

disable[]

代码，该代码从数据库中获取日期，并且还获取两者之间的所有日期。

$strBlockA

Answer 1

这就是我要做的。由于我不了解您完整的数据库设置，因此我将尽力解释。

您的查询是从系统中选择所有保留日期。

$sql = "SELECT dateFrom,dateTo from campinginformation WHERE dateFrom IS NOT NULL AND dateTo IS NOT NULL AND dateFrom != '' AND dateTo != '' AND chooseCamping = 'Caravan of camper (kleine plaats)'";

我假设每行也都有一个ID？

您应从此查询中排除当前预订的ID（正在编辑的ID），这样可以释放可用的日期。

是这样的：

$thisReservation = 0; //get the reservation ID of the one being edited

$sql = "SELECT dateFrom,dateTo from campinginformation WHERE dateFrom IS NOT NULL AND dateTo IS NOT NULL AND dateFrom != '' AND dateTo != '' AND chooseCamping = 'Caravan of camper (kleine plaats)' AND ReservationID !== $thisReservation";

希望这会有所帮助。

Answer 2

对于第一个问题，您可以简单地在查询中添加另一个where条件，以便从搜索中排除当前的预订，就像这样：

 ... and reservationID != {$currentReservationID}

然后，您将只查看其他预订，这是您编辑一个预订时所需要的。

对于后一个问题，您目前是否有两个日期字段，一个入住日期和一个退房日期？如果是这样，解决此问题的最简单方法是使用range calendar功能来拥有一个日期范围选择器，而不是两个日期选择器，这似乎不允许在范围内禁用日期。

如果执行此操作，则唯一需要更改的是更改效果，而不是：

$startDate = $_POST['startDate'];
$endDate = $_POST['endDate'];

您将使用：

$dateRange = $_POST['dateRange'];
$dateRange = explode(" to ", $dateRange);
$startDate = $dateRange[0];
$endDate = $dateRange[1];

但是，如果由于某种原因这对您都不起作用，我认为下一个最佳选择是在插入其保留日期以验证日期是否可用之前，先执行简单的SQL查询。

在插入他们的查询之前，您可以执行以下操作：

select reservationID from campinginformation
where
  dateFrom between "{$startingDate}" and "{$endingDate}"
  or dateTo between "{$startingDate}" and "{$endingDate}"

如果返回任何结果，请不要插入其保留内容，并提供失败消息。

Answer 3

我不懂PHP，但是希望这个答案能给您一些提示/确切的答案。您的查询会为您提供日期，该日期将根据注册ID事先保存用于签入和签出。一旦知道入住和退房日期，您就可以通过以下代码来实现所需的功能。希望能帮助到你.. 通过使用以下代码，可以禁用先前选择的入住和退房日期。
例如如果您选择01/02/2020至01/05/2020，则这些时间段将被保留。但您可以选择01/01/2020至01/06/2020。

$('#from1').flatpickr({
  
allowInput: true,
  dateFormat: "m/d/yy",
disable: [
    {
        from: "01/05/2020",
        to: "01/08/2020"
    }
], //your fetched checkin date
});

endPicker = flatpickr("#to1", {
  allowInput: true,
  dateFormat: "m/d/yy",
disable: [
    {
        from: "01/05/2020",
        to: "01/08/2020"
    }
], //your fetched checkin date

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flatpickr@4.6.3/dist/flatpickr.js"></script>
<link href="https://unpkg.com/flatpickr@4.6.3/dist/flatpickr.min.css" rel="stylesheet" />
<div class="form-group row">
  <label for="date" class="col-4 col-form-label">Check in</label>
  <div class="col-8">
    <input id='from1' type='text' name='dateFrom1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off" />
  </div>
</div>
<div class="form-group row">
  <label for="date" class="col-4 col-form-label">Check out</label>
  <div class="col-8">
    <input id='to1' type='text' name='dateTo1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off" />
  </div>
</div>

下面的内容仅允许选择之前选择的日期。例如，如果您选择从01/02/2020到01/05/2020，则只能在两个日期之间进行选择

$('#from1').flatpickr({
  onChange: function(selectedDates, dateStr, instance) {
    endPicker.set('minDate', new Date("01/05/2020"));
  },
  minDate: new Date("01/05/2020"), //your fetched checkin date
  allowInput: true,
  dateFormat: "m/d/yy",
  maxDate: new Date("01/08/2020"), //your fetched checkout date

});

endPicker = flatpickr("#to1", {
  allowInput: true,
  dateFormat: "m/d/yy",
  minDate: new Date("01/05/2020"), //your fetched checkin date (may be same /may not) also assume checkin date is 01/04/2020
  maxDate: new Date("01/08/2020"), //your fetched checkout date

});


flatpickr("#to2", {
  allowInput: true,
  mode: 'range',
  dateFormat: "m/d/yy",
  disable: [{
    from: "01/05/2020",
    to: "01/08/2020"
  }],
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flatpickr@4.6.3/dist/flatpickr.js"></script>
<link href="https://unpkg.com/flatpickr@4.6.3/dist/flatpickr.min.css" rel="stylesheet" />
<div class="form-group row">
  <label for="date" class="col-4 col-form-label">Check in</label>
  <div class="col-8">
    <input id='from1' type='text' name='dateFrom1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off" />
  </div>
</div>
<div class="form-group row">
  <label for="date" class="col-4 col-form-label">Check out</label>
  <div class="col-8">
    <input id='to1' type='text' name='dateTo1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off" />
  </div>
  <div class="form-group row">
    <label for="date" class="col-4 col-form-label">Range mode check in Check in and Check out</label>
    <div class="col-8">
      <input id='to2' type='text' name='dateTo1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off" />
    </div>
  </div>

当您在Flatpicker中使用范围模式时，将不允许您选择超出阻止日期的日期。正如我在上一个代码中添加的那样，您可以比较范围日期选择器

我的Datepicker系统出现问题（禁用日期）

3 个答案: