Most pages provide a storage format for the demo, so you can use the free add-on from Atlassian Confluence Source Editor to import this configuration into your Confluence and see it in action
To import examples from the storage format on Confluence Cloud please see this page
Please note, all the examples here are provided without any obligation and may or may not be incomplete or may have bugs, and we provide NO SUPPORT for these examples and demos.
Created dates
Storage format for the solution (make sure you change the "pageId" parameter from 11862909 to your pageId (of the page with the form))
<ac:structured-macro ac:macro-id="f39dd63d-b332-4197-9f01-ad83d8dfbb46" ac:name="html" ac:schema-version="1">
<ac:plain-text-body><![CDATA[<form class="aui" id="datesForm">
<div class="field-group">
<label for="dd-startDate">Start Date
<span class="aui-icon icon-required">(required)</span></label>
<input class="text medium-field" type="text"
id="dd-startDate" name="dd-startDate">
<div class="description">Please select your Start Date</div>
</div>
<div class="field-group">
<label for="dd-endDate">End Date
<span class="aui-icon icon-required">(required)</span></label>
<input class="text medium-field" type="text"
id="dd-endDate" name="dd-endDate">
<div class="description">Please select your End Date</div>
</div>
<div class="buttons-container">
<div class="buttons">
<input class="button submit" type="button" value="Create" id="dd-save-button">
</div>
</div>
</form>
<script>
AJS.$(document).ready(function() {
AJS.$('#dd-startDate').datePicker({'overrideBrowserDefault': true});
AJS.$('#dd-endDate').datePicker({'overrideBrowserDefault': true});
AJS.$('#dd-save-button').click(function(){
AJS.$('.reportedDate').remove();
var datesBetween = getDates(convertToDate(AJS.$('#dd-startDate').val()), convertToDate(AJS.$('#dd-endDate').val()));
for (i=0;i<datesBetween.length;i++){
var cd = datesBetween[i];
AJS.$.ajax({
url: 'https://wiki.vertuna.com/ajax/confiforms/rest/save.action?pageId=11862909&f=myform1&mydate=' + cd.getTime(),
type: "GET",
success: function (data) {
showMessage(cd);
}
});
}
});
});
Date.prototype.addDays = function(days) {
var dat = new Date(this.valueOf())
dat.setDate(dat.getDate() + days);
return dat;
}
function getDates(startDate, stopDate) {
var dateArray = new Array();
var currentDate = startDate;
currentDate = new Date(currentDate)
while (currentDate <= stopDate) {
dateArray.push( new Date (currentDate) )
currentDate = currentDate.addDays(1);
}
return dateArray;
}
function convertToDate(dateAsString) {
return new Date(dateAsString); // yy-mm-dd (which is ISO 8601)
}
function showMessage(dateToReport) {
AJS.$('#datesForm').append('<div class="reportedDate aui-message aui-message-info closeable shadowed success"><p>Created record for: ' + dateToReport + '</p></div>');
}
</script>]]></ac:plain-text-body>
</ac:structured-macro>
<ac:structured-macro ac:macro-id="f9697c13-23cf-41ee-9109-d5e69bc6cbc1" ac:name="confiform" ac:schema-version="1">
<ac:parameter ac:name="formName">myform1</ac:parameter>
<ac:rich-text-body>
<p>
<ac:structured-macro ac:macro-id="964d8753-caa0-427c-b192-76bdf14ce554" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">mydate</ac:parameter>
<ac:parameter ac:name="fieldLabel">mydate</ac:parameter>
<ac:parameter ac:name="type">date</ac:parameter>
</ac:structured-macro>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p> </p>
<p>Created dates</p>
<ac:structured-macro ac:macro-id="73a4277d-9627-414e-be24-c2e46f3162a0" ac:name="confiform-table" ac:schema-version="1">
<ac:parameter ac:name="formName">myform</ac:parameter>
<ac:rich-text-body>
<p>
<ac:structured-macro ac:macro-id="285352b0-ad24-45d9-9a7d-4e62cbe51e2c" ac:name="confiform-field" ac:schema-version="1">
<ac:parameter ac:name="fieldName">mydate</ac:parameter>
</ac:structured-macro>
</p>
</ac:rich-text-body>
</ac:structured-macro>