cosyxu wrote:I have tried and it pass to the value to the <input> but it still show "required error".
Don't make it "required" and add code to the form.setOnSubmit() event handler to check whether it is empty.
cosyxu wrote:Could I also ask how to implement the linked pickers? Please see attached code:
Code: Select all $('#startDate').datetimepicker();
$('#endDate').datetimepicker({
useCurrent: false
});
$("#startDate").on("dp.change", function (e) {
$('#endDate').data("DateTimePicker").minDate(e.date);
});
$("#endDate").on("dp.change", function (e) {
$('#startDate').data("DateTimePicker").maxDate(e.date);
});
Any ideas?
I can't figure out how to change the properties of existing datetime fields. The workaround is to hide two existing date fields and then place to new date fields in a Panel to replace them. Here is the Panel's HTML code:
Code: Select all <div class='col-md-5'>
<div class="form-group">
<b>Start Date: </b>
<div class='input-group date' id='startDate2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<b>End Date: </b>
<div class='input-group date' id='endDate2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Then, call datetimepicker() on those two new fields in the JS code:
Code: Select all$('#startDate').hide();
$('#endDate').hide();
$('#datesPanel').css('overflow', 'visible');
$("div.pmdynaform-container").css("overflow", "visible");
$("form.pmdynaform-form").css("overflow", "visible");
$('#startDate2').datetimepicker({
format: "YYYY-MM-DD"
});
$('#endDate2').datetimepicker({
useCurrent: false,
format: "YYYY-MM-DD"
});
$("#startDate2").on("dp.change", function (e) {
var newDate = moment(e.date).format("YYYY-MM-DD HH:mm:ss");
$("#endDate2").data("DateTimePicker").minDate(newDate);
$("#startDate").setValue(newDate);
});
$("#endDate2").on("dp.change", function (e) {
var newDate = moment(e.date).format("YYYY-MM-DD HH:mm:ss");
$('#startDate2').data("DateTimePicker").maxDate(newDate);
$("#endDate").setValue(newDate);
});
LinkedDateTimeFields.png (91.32 KiB) Viewed 11285 times
See the attached process that shows how to implement it:
(27.25 KiB) Downloaded 373 times