I would like to use the entered value of startime as the minimum date in endtime's minDate field. Is this possible and if so how?
Solved! Go to Solution.
Views
Replies
Total Likes
Hi @bethen5 ,
To use the prior field value as the `minDate` in a datepicker, you can use JavaScript to dynamically set the `minDate` property based on the value of the prior field. Here's an example of how you can achieve this:
HTML:
```html
<label for="starttime">Start Time:</label>
<input type="text" id="starttime" name="starttime">
<label for="endtime">End Time:</label>
<input type="text" id="endtime" name="endtime">
```
Javascript:
```javascript
// Get the input elements
var starttimeInput = document.getElementById('starttime');
var endtimeInput = document.getElementById('endtime');
// Add event listener to the starttime input
starttimeInput.addEventListener('change', function() {
// Get the value of the starttime input
var starttimeValue = starttimeInput.value;
// Set the minDate of the endtime input to the starttime value
endtimeInput.min = starttimeValue;
});
```
In this example, we listen for the `change` event on the starttime input field. When the value of the starttime input changes, we retrieve the value and set it as the `minDate` property of the endtime input field. This ensures that the endtime input field will only allow dates that are equal to or greater than the selected starttime.
Make sure to adjust the code according to your specific HTML structure and datepicker library that you are using.
@bethen5 You may want to refer to this discussion - https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/always-start-aem-coral-ui-...
Hi @bethen5 ,
To use the prior field value as the `minDate` in a datepicker, you can use JavaScript to dynamically set the `minDate` property based on the value of the prior field. Here's an example of how you can achieve this:
HTML:
```html
<label for="starttime">Start Time:</label>
<input type="text" id="starttime" name="starttime">
<label for="endtime">End Time:</label>
<input type="text" id="endtime" name="endtime">
```
Javascript:
```javascript
// Get the input elements
var starttimeInput = document.getElementById('starttime');
var endtimeInput = document.getElementById('endtime');
// Add event listener to the starttime input
starttimeInput.addEventListener('change', function() {
// Get the value of the starttime input
var starttimeValue = starttimeInput.value;
// Set the minDate of the endtime input to the starttime value
endtimeInput.min = starttimeValue;
});
```
In this example, we listen for the `change` event on the starttime input field. When the value of the starttime input changes, we retrieve the value and set it as the `minDate` property of the endtime input field. This ensures that the endtime input field will only allow dates that are equal to or greater than the selected starttime.
Make sure to adjust the code according to your specific HTML structure and datepicker library that you are using.
@bethen5 Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies