CODEWITHSUNDEEP
javascripthtmlalpine.js
Lucas Oliveira
Lucas Oliveira

Reputation: 3

How to change x-bind:value before displaying - Alpine JS

<div x-data="{ date : false }">
      <input type="date" name="dateOne" id="dateOne" x-model="date">
      <input type="date" name="dateTwo" id="dateTwo" x-bind:value="date">
</div>

Now, how do I change the #dateTwo, so once the #dateOne changes I display #dateTwo with a day ahead, I already know to create a day and add one more in JavaScript. But my trouble lies in the logic of how to glue it with Alpine JS.

The scenario: there is an event that has a starting and a ending date, but I want to force the use to pick at least a day ahead. So my idea is this, as soon as the user chooses a day on the first input the x-bind on the second input will add and display a day ahead

Thanks in advance.

Upvotes: 0

Views: 7330

Answers (1)

Karim Tarek
Karim Tarek

Reputation: 907

The model/data is missing a couple of values, my approach is a bit different than yours, I didn't think we need x-model for the first date, it made more sense to be used in the second date. Below is a quick and dirty solution to your use case:

<div x-data="{ 
  dateStart: null,
  dateEnd: null,
  initEndDate: function(dateStartInputValue) {
    const selectedDate = new Date(dateStartInputValue); 
    const dateEndInitValue = selectedDate.setDate(selectedDate.getDate() + 1);
    this.dateEnd = new Date(dateEndInitValue).toISOString().split('T')[0];
  }
}">
  <label for="start">
    Start date:
    <input 
      name="dateStart" 
      type="date" 
      @change="dateStart = event.target.value; initEndDate(event.target.value)" 
    />
  </label>
  <label for="dateEnd" x-show="dateStart">
    – End date:
    <input 
      name="dateStart" 
      type="date" 
      x-model="dateEnd"
      @change="dateEnd = event.target.value;" 
    />
  </label>
</div>

Here is the code in a sandbox.

Good luck!

Upvotes: 2

Related Questions