Today, I want to share with you a solution to a problem I encountered recently: how to rerender a Svelte component on demand and, in particular, how to rerender it when I want to run a function prop again.
The specific scenario involved using a Datepicker Svelte component with two instances of it. My goal was to set a starting date and an ending date. When the starting date was clicked, the datepicker displayed, and the same happened when the ending date was clicked.
However, I faced a challenge - based on the starting date selected, there were some constraints for the ending date. For example, it was not allowed to set an end date that was prior to the starting date.
The Datepicker component provided a function prop called selectableCallback, which was run when the component was first rendered. This function determined whether a date was selectable or not, by returning false for disabled dates.
<script>
let endDateSelectableCallback = date => {
//TODO: decide if date is ok
}
</script>
<Datepicker
select