How to simply add custom property to a HTML Form Web Part?

Question

Hello.
Is it possible to add a custom property (like a date-field) to a HTML Form Web Part with help of JavaScript? I do not want to use Visual Studio / Nappa etc. Is this possible in an easy way?
Thanks for your help.

Answer 1

Hi,
Based on your description, my understanding is that you want to count the date between today and the latest event date.
You can create a calendar in a page firstly, then add a content editor web part rather than the html form web part, as html form web part can't place the Jquery element.
Then you can firstly read the date field value of the calendar list using JavaScript Client Object Model and then calculate the difference between two date values using Jquery. You can add the code directly in the content editor web part.
Here are some detailed code demos for your reference:
Get SharePoint calendar list field value using JavaScript Client Object Model:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
SP.SOD.executeFunc("sp.js", "SP.ClientContext", retrieveListItemsCal);
function retrieveListItemsCal() {
var clientContextCal = new SP.ClientContext.get_current();
var oListCal = clientContextCal.get_web().get_lists().getByTitle('Calendar');
var camlQueryCal = new SP.CamlQuery.createAllItemsQuery();
AllItemsCal = oListCal.getItems(camlQueryCal);
clientContextCal.load(AllItemsCal);
clientContextCal.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceededCal), Function.createDelegate(this, this.onQueryFailedCal));
function onQuerySucceededCal(sender, args) {
var listItemInfo = '';
var listItemEnumeratorCal = AllItemsCal.getEnumerator();
var htmlCal = '';
while(listItemEnumeratorCal.moveNext()) {
var oListItemCal = listItemEnumeratorCal.get_current();
htmlcal= oListItemCal.get_item("Start Time").format("MMMM d, yyyy"));
break;
function onQueryFailedCal(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
</script>
Calculate the difference between two dates:
http://stackoverflow.com/questions/2609513/jquery-calculate-day-difference-in-2-date-textboxes
Thanks
Best Regards
Forum Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help. If you have feedback for TechNet Subscriber Support, contact
[email protected].
Jerry Guo
TechNet Community Support