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,

According to your description, my understanding is that you want to add custom property something like datefield in the html form web part.

I have something need check, do you want to add a datetime field to the HTML form web part ?

If yes, then you can add a Jquery code to display the datecalendar when the htmlform web part get focus.

Correct me if I misunderstand something.

Here is a code snippet for your reference:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
    $(function() {
      $( "input[name*='WPQ2T1']" ).datepicker();
    });
</script>

Thanks

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 [e-mail].

---

Jerry Guo
TechNet Community Support

Answer 2

Hi Jerry.

Thank you for the quick response and sorry for my bad description.
On a SP-Page, I have to show a counter, which counts the days between today and the date of the latest event.
First I wanted to place the date of the latest event in a custom property of a webpart to calculate the days gone. 

A new and better approach is to use a calendar. In this calendar (call it "Eventcalendar") I will enter the affected events. In the ("All items") List View of the calendar, I sorted the events in descending order so that the latest calendar-entry shows up as the first row of the list. 

Example:
Title  Location             Start Time 
Event XYZ Germany           24.02.2015 06:00 
Event 123 Canada              18.01.2015 10:45 
Event ABC  France   03.01.2015 08:30 

I can enter all the events in the Calendar. The latest will allways show up as the first row in the above list. 

Now I want to place something like a webpart on top of the SP-Page to sow the calculated days between today and the latest event-date. 

Example:
DAYCOUNTER
Days gone: 3 days


Assume that today() is friday the 27th. of februar. (27.02.2015 - 24.02.2015) = 3 days

Is there a way to refer to the [Start Time]-Column of the list with help of a HTML Form web part? If yes, how to calculate the days?

thanks

Answer 3

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 [e-mail].

---

Jerry Guo
TechNet Community Support

Answer 4

Thank you Jerry. 

I will try this way the next days and give a feedback on this. 

Thanks again

Answer 5

Hi,

after adding the script to the site assets (i changed "calendar" to "Unfallkalender"), i added a content editor web part and copied the linkt to the script in to the CEWP. The calendar has three entries. Nothing shows up. What have i done wrong?