Date picker with an alert

Wappler General
1

I have a form with a date-picker.
I should make sure that if the user clicks on a day longer than the current 60 days, a warning text or message appears (not blocking, must be able to continue). How can I achieve this?

Here is the current calendar code

<input type="text" class="form-control" id="inp_data2frm" name="data2frm" aria-describedby="inp_data_help" is="dmx-date-picker" format="DD/MM/YYYY" showweeknumbers="true" weeklabel="Sett." data-msg-required="Mandatory" readonly="true" dmx-bind:invaliddates="dataoff.data.query" invaliddates-start="data_inizio" invaliddates-end="data_fine" placeholder="&gt; click here to show calendar">

Thank you

2

60 days from when? It's a date picker, not a date range picker.

3

60 days from today. When I click on the date of choice, if greater than 60 days, I would need there to be a warning of some kind.

4

Why not just disable dates past 60 days entirely by default in the settings?

Here is what I have done ..

dmx-bind:mindate="currantDate.datetime.addDays(20)"

Just use a dynamic attribute.

Screenshot 2025-05-28 at 2.52.46 PM

In your case it would be max date, not min date like in my example.

1 Like
5

Yes, this was the first idea that I proposed to the client, but he doesn’t like it. :frowning:

6

Hi Mark,

You can add an inline flow with a condition to show a notification like this. Bind it to the datetime var in your project and adjust the days as needed.

<input id="date1" name="date1" is="dmx-date-picker" dmx-bind:value="datedaylocal.datetime" dmx-on:updated="run({condition:{outputType:'boolean',if:`value&gt;datedaylocal.datetime.addDays(59)`,then:{steps:{run:{outputType:'text',action:`notifies1.warning(\'The selected value is 60 or more than 60 days in the future: \'+value)`}}}}})" timepicker="" minutes-increment="60">
1 Like
7

Another solution would be to show a notification below the calendar:

<dmx-datetime id="var1" interval="hours"></dmx-datetime>

<input type="text" class="form-control" id="inp_data2frm" name="data2frm" aria-describedby="inp_data_help" is="dmx-date-picker" format="DD/MM/YYYY" showweeknumbers="true" weeklabel="Sett." data-msg-required="Mandatory" readonly="true" dmx-bind:invaliddates="dataoff.data.query" invaliddates-start="data_inizio" invaliddates-end="data_fine" placeholder="&gt; click here to show calendar">

<div class="alert mt-2" id="alert1" is="dmx-bs5-alert" role="alert" type="warning" dmx-bind:show="var1.datetime.daysUntil(inp_data2frm.value)>=60">
    <p>Selected date is more than 60 days from today.</p>
</div>
1 Like
8

Here is the working result... to help those who need something like this...

<input type="text" class="form-control" id="inp_data2frm" name="data2frm" aria-describedby="inp_data_help" is="dmx-date-picker" format="DD/MM/YYYY" showweeknumbers="true" weeklabel="Sett." data-msg-required="" readonly="true" dmx-bind:invaliddates="dataoff.data.query" invaliddates-start="data_inizio" invaliddates-end="data_fine" placeholder="&gt; Click here to open calendar">

 <input id=" codfrm2" name="codfrm2" type="hidden" class="form-control" dmx-bind:value="0" readonly>
<dmx-value id="oggi" dmx-bind:value="var1.value.formatDate('yyyy-MM-dd')"></dmx-value>
<dmx-value id="data_selezionata" dmx-bind:value="inp_data2frm.value ? inp_data2frm.value.formatDate('yyyy-MM-dd') : ''"></dmx-value>
<dmx-value id="giorni_differenza" dmx-bind:value="data_selezionata.value && oggi.value ? Math.round((Date.parse(data_selezionata.value) - Date.parse(oggi.value)) / 86400000) : ''"></dmx-value>
<!-- ALERT -->
<div class="alert alert-warning mt-3" dmx-show="oggi.value.daysUntil(inp_data2frm.value) > 60">
 <i class="fas fa-exclamation-triangle"></i>
Date is more than <strong>60 days</strong>
</div>
1 Like