As far as I can see we can only set a static date as the minimum date for the date picker. I’d like to set the minimum date dynamically.
I have records with a start and end date. I’d like to make sure the end date is always after than the start date.
Is this possible?
Interested in this as well. Min and Max.
Guys, there are Dynamic Attributes available. Use them to set dynamic min/max dates 
With most attributes, you can prepend the attribute name with dmx-bind: to make it a dynamic value. Looks like you have to do this in code for these… assuming you’ve looked under dynamic attributes already.
Good lord. That was easy. Now I am embarrassed I even asked the question. Time for 
I call myself doing this but like most things, I probably got it wrong, lol. I will give it another shot knowing that is where I need to add it.
Thanks.
Sometimes we can’t see the forest for the trees… 
Hi Teodor,
is it possible to change this is real time?
I have a form that allows the user to pick the submission month.
Based on this, I'd like to display two fields, start and end days.
The days displayed should be calendar days for the selected month above.
If they change the month, the start/enddate available should be refreshed.
Althoug I managed to get this reflected in the code, the widget itself doesn't seem to reload with the new start/enddate values.
Happy to share my code if needed.
Edit video added
TY
Please post your calendar code.
Please see video above, just updated.
<input id="addStartDate" name="startDate" type="text" class="form-control" value="" required="" data-msg-required="Campo obrigatório" placeholder="DD/MM/YYYY" is="dmx-date-picker" format="D/M/YYYY">
Edit the JS goal is to set the first day of the month in input field "startDate", based on the selected month, as well as define the calendar pick range.
function setStartDate() {
var month = document.getElementById('addMonth').value;
var year = document.getElementById('addYear').value;
var startDate = '1/'+month+'/'+year;
var lastDay = new Date(year, month, 0).getDate();
var startDateInput = document.getElementById('addStartDate');
var monthTwoDigits= (month<10?'0'+month:month);
var lastDayTwoDigits= (lastDay<10?'0'+lastDay:lastDay);
startDateInput.value = startDate;
startDateInput.removeAttribute('mindate');
startDateInput.removeAttribute('maxdate');
startDateInput.removeAttribute('startdate');
startDateInput.removeAttribute('enddate');
startDateInput.setAttribute('startdate', year+'-'+monthTwoDigits+'-'+'01');
startDateInput.setAttribute('enddate', year+'-'+monthTwoDigits+'-'+lastDayTwoDigits);
startDateInput.setAttribute('mindate', year+'-'+monthTwoDigits+'-'+'01');
startDateInput.setAttribute('maxdate', year+'-'+monthTwoDigits+'-'+lastDayTwoDigits);
//dmx.app.set('minStartDateVar.datetime', year+'-'+monthTwoDigits+'-'+'1');
//console.log("start date:"+startDate);
}
You don't need such complex js code. Also you can't just change attributes like this using custom js, as they are not detected by the component.
All you need is two variables - minDate and maxDate on your page:
<dmx-value id="minDate" dmx-bind:value="(addYear.value+'-'+addMonth.value).formatDate('yyyy-MM-01')"></dmx-value>
<dmx-value id="maxDate" dmx-bind:value="minDate.value.addMonths(1).addDays(-1).formatDate('yyyy-MM-dd')"></dmx-value>
where minDate returns the first date of the selected month and maxDate the last date of the selected month.
You can then simply bind their values in the calendar:
<input id="addStartDate" name="startDate" type="text" class="form-control" value="" required="" data-msg-required="Campo obrigatório" placeholder="DD/MM/YYYY" is="dmx-date-picker" format="D/M/YYYY" dmx-bind:mindate="minDate.value" dmx-bind:maxdate="maxDate.value">
Edited. Updated post to last status.
Thank you so much! I'd love to get rid of the JS code.
I had previously tried with binds, but to no avail.
Somehow it doesn't seem to do be updating the start/end date range, with the proposed option above.
I have made a few tweaks as the month input field is not populated by default
<dmx-value id="minDate" dmx-bind:value="(addYear.value && addMonth.value) ? (addYear.value+'-'+addMonth.value).formatDate('yyyy-MM-01'): currentDate.datetime.formatDate('yyyy-MM-01')"></dmx-value>
<dmx-value id="maxDate" dmx-bind:value="minDate.value.addMonths(1).addDays(-1).formatDate('yyyy-MM-dd')"></dmx-value>
I added the value in the bind, below
<input id="addStartDate" name="startDate" type="text" class="form-control" dmx-bind:value="minDate.value" required="" data-msg-required="Campo obrigatório" placeholder="DD/MM/YYYY" is="dmx-date-picker" format="D/M/YYYY" dmx-bind:mindate="minDate.value" dmx-bind:maxdate="maxDate.value">
<input id="addEndDate" name="endDate" type="text" class="form-control" required="" data-msg-required="Campo obrigatório" placeholder="DD/MM/YYYY" is="dmx-date-picker" format="D/M/YYYY" dmx-bind:mindate="minDate.value" dmx-bind:maxdate="maxDate.value" dmx-bind:value="maxDate.value">
The month select picks from a JS/Dataview source
<select id="addMonth" name="month" class="form-control" required="" data-msg-required="Campo obrigatório" dmx-bind:options="monthListDV.data" optiontext="pt" optionvalue="value" >
<option selected="" value=""></option>
</select>
JS/DV Source
{
"month": [
{
"pt": "Janeiro",
"en": "January",
"value": "1"
},
{
"pt": "Fevereiro",
"en": "February",
"value": "2"
},
{
"pt": "Março",
"en": "March",
"value": "3"
},
...
}
Nothing reported on the console..
Update: I wasn't able to set the initial vars (minDate/maxDate) to bind with the select fields.
I had to repeat the logic througouht the input fields and its parameters: min/maxdates
<input id="addStartDate" name="startDate" type="text" class="form-control" dmx-bind:value="(addYear.value+'-'+addMonth.value).formatDate('yyyy-MM-01')" required="" data-msg-required=" Campo obrigatório" placeholder="DD/MM/YYYY" is="dmx-date-picker" format="D/M/YYYY" dmx-bind:mindate="(addYear.value+'-'+addMonth.value).formatDate('yyyy-MM-01')" dmx-bind:maxdate="addEndDate.value" dmx-bind:readonly="addYear.value.isEmpty()||addMonth.value.isEmpty()" dmx-bind:startdate="(addYear.value+'-'+addMonth.value).formatDate('yyyy-MM-01')" dmx-bind:enddate="addEndDate.value" data-rule-date="" data-msg-date="Por favor introduza uma data válida">
<input id="addEndDate" name="endDate" type="text" class="form-control" required="" data-msg-required="Campo obrigatório" placeholder="DD/MM/YYYY" is="dmx-date-picker" format="D/M/YYYY" dmx-bind:mindate="addStartDate.value" dmx-bind:maxdate="(addYear.value+'-'+addMonth.value).formatDate('yyyy-MM-01').addMonths(1).addDays(-1).formatDate('yyyy-MM-dd')" dmx-bind:readonly="addYear.value.isEmpty()||addMonth.value.isEmpty()" dmx-bind:startdate="addStartDate.value" dmx-bind:enddate="(addYear.value+'-'+addMonth.value).formatDate('yyyy-MM-01').addMonths(1).addDays(-1).formatDate('yyyy-MM-dd')" dmx-bind:value="(addYear.value+'-'+addMonth.value).formatDate('yyyy-MM-01').addMonths(1).addDays(-1).formatDate('yyyy-MM-dd')" data-rule-date="" data-msg-date="Por favor introduza uma data válida">
I am sure there's a better way, but this one is working for now..