0

I have SharePoint list for vacation applications and javascript code which is calculating working days and next working day for employees.

Script is working fine, only problem is that SharePoint showing calculation result in column, but when I click save the field is empty. Looks like its view only.

Here is my code:

<script type="text/javascript" language="javascript">

document.addEventListener("DOMContentLoaded", 
  function(event) {
  var from = document.getElementById('Element ID');
  var to = document.getElementById('Element ID');
  var days_count = document.getElementById('Element 
  ID');
  var next_working_day = 
  document.getElementById('Element ID');
  var start_date, end_date, vacation_days = 0;

function setNextWorkingDay() {
    initEndtDate();
    if(end_date.getDay() == 5) {
        end_date.setDate(end_date.getDate()+3);
        next_working_day.value = end_date.getDate() + '.' + (end_date.getMonth() + 1) + '.' + end_date.getFullYear();
        return false;
    }

    if(end_date.getDay() == 6) {
        end_date.setDate(end_date.getDate()+2);
        next_working_day.value = end_date.getDate() + '.' + (end_date.getMonth() + 1) + '.' + end_date.getFullYear();
        return false;
    }
    end_date.setDate(end_date.getDate()+1);
    console.log('next ',end_date);
    next_working_day.value = end_date.getDate() + '.' + (end_date.getMonth() + 1) + '.' + end_date.getFullYear();

}

function dateDiff( date1, date2 ) {

  var one_day=1000*60*60*24;

  var date1_ms = date1.getTime();
  var date2_ms = date2.getTime();

  var difference_ms = date2_ms - date1_ms;

  return Math.round(difference_ms/one_day); 
}
function calculate_vacation_days() {

    if(typeof start_date === "undefined" || typeof end_date === "undefined") {
        return false;
    }

    if(dateDiff(start_date, end_date) < 0) {
        console.log('wrong dates');
        return false;
    }

    console.log(start_date, end_date);

    while (start_date_x = iterable_start_date) {


        if (start_date_x.toLocaleDateString() === end_date.toLocaleDateString()) {
            if (start_date_x.getDay() !== 0 && start_date_x.getDay() !== 6) {
                vacation_days++
            } 
            break;
        }

        if (start_date_x.getDay() !== 0 && start_date_x.getDay() !== 6) {
            vacation_days++
        } 

        iterable_start_date.setDate(iterable_start_date.getDate() + 1);
    }

    days_count.value = vacation_days;
    console.log(vacation_days)
    setNextWorkingDay();
}

function initStartDate() {
     var start_date_array = from.value.split('.');
    if(typeof start_date_array[0] === "undefined" || typeof start_date_array[1] === "undefined" || typeof start_date_array[2] === "undefined" ) {
        return false;
    }

    start_date = new Date(start_date_array[2], parseInt(start_date_array[1]) - 1, parseInt(start_date_array[0]));
    iterable_start_date = new Date(start_date_array[2], parseInt(start_date_array[1]) - 1, parseInt(start_date_array[0]));
    iterable_end_date = new Date(start_date_array[2], parseInt(start_date_array[1]) - 1, parseInt(start_date_array[0]));
    temp_start_date = new Date(start_date_array[2], parseInt(start_date_array[1]) - 1, parseInt(start_date_array[0]));
}

function initEndtDate(){
    var end_date_array = to.value.split('.');
    if(typeof end_date_array[0] === "undefined" || typeof end_date_array[1] === "undefined" || typeof end_date_array[2] === "undefined" ) {
        return false;
    }
    end_date = new Date(end_date_array[2], parseInt(end_date_array[1] - 1), parseInt(end_date_array[0]));
}

from.addEventListener('blur', function(e) {
    e.stopPropagation();
    console.log("from event fired");
    vacation_days = 0

    days_count.value = '';

    initStartDate()

    initEndtDate();

    calculate_vacation_days();

});

to.addEventListener('blur', function(e) {
    e.stopPropagation();
    console.log("to event fired");
    vacation_days = 0;

    days_count.value = ''

    initStartDate();

    initEndtDate();

    calculate_vacation_days();
});

days_count.addEventListener('change', function(e) {
    e.stopPropagation();
    console.log("days_count event fired");
    var days_to_increment = days_count.value;

    initStartDate();

    // start from 1 as first day is already in "iterable_end_date"
    for (var i = 1; i < days_to_increment; i++) {
        console.log(i);
        console.log(iterable_end_date.getDay());

        if (iterable_end_date.getDay() == 6) {
            console.log('sat');
            iterable_end_date.setDate(iterable_end_date.getDate() + 1);
        }

        if (iterable_end_date.getDay() == 0) {
            console.log('sun');
            iterable_end_date.setDate(iterable_end_date.getDate() + 1);
        }

        console.log(iterable_end_date.getDay());

        iterable_end_date.setDate(iterable_end_date.getDate() + 1);

        temp_start_date.setDate(temp_start_date.getDate() + 1);

         if (iterable_end_date.getDay() == 6) {
            console.log('sat');
            iterable_end_date.setDate(iterable_end_date.getDate() + 1);
        }

        if (iterable_end_date.getDay() == 0) {
            console.log('sun');
            iterable_end_date.setDate(iterable_end_date.getDate() + 1);
        }

        console.log(iterable_end_date,temp_start_date);
    }

    to.value = iterable_end_date.getDate() + '.' + (iterable_end_date.getMonth() + 1) + '.' + iterable_end_date.getFullYear();

    setNextWorkingDay();
});

});
</script>

As you can see in below screenshot, working day count and next working day is calculated, but form still showing that required field is empty.

Screenshot

  • Where are you using this code? On new form of list or somewhere else? – Ganesh Sanap Nov 2 '18 at 13:25
  • Also, what is the data type of the column you are populating? – Chris Odegard Nov 2 '18 at 13:26
  • Code is running on form ewb parts-default new form – user79580 Nov 2 '18 at 14:07
  • One column is number second date and time – user79580 Nov 2 '18 at 14:07
  • What are the elements you are updating? Are they INPUT controls or something else? – Chris Odegard Nov 2 '18 at 23:52
0

I would suggest not to use an Event listener to initiate code execution; this can collide with SharePoint's own onLoad events. Try something like: _spBodyOnLoadFunctionNames.push("setNextWorkingDay")

For more info, see: https://stackoverflow.com/questions/16936250/sharepoint-2013-add-javascript-after-whole-page-load

  • I tried this method, but the problem is same, date is being calculated but the view not submitting. – user79580 Nov 2 '18 at 14:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.