Question

Datepicker showing only every other Sunday

Forms Version 10 How To

Updated May 29, 2020

asked on May 20, 2020 • Show version history

I have been able to get the Datepicker to only show the Sundays on a calendar. This is from this answers post: https://answers.laserfiche.com/questions/127082/Forms-102-Calendar-Restricted-Date-JavaScript-Needed

We would like to expand on this and see if we could get the Datepicker to show every other Sunday starting from a particular date. This will enable us to pick the starting of a pay period on the form.

The current java script that I am using from the aforementioned post:

$(document).ready(function(){
var startDate = new Date('05-03-2020');

function isCorrectDate(n, target) {
var t = n.getDay();
return (t==target);
}
function checkField(input, inst) {
if ($(input).closest('li').hasClass('startSun')) {
$(input).datepicker("option", {minDate: startDate, beforeShowDay: function(n) {return [isCorrectDate(n, 0),""]}});
}
if ($(input).closest('li').hasClass('endingSat')) {
$(input).datepicker("option", {beforeShowDay: function(n) {return [isCorrectDate(n, 6),""]}});
}
}
$.datepicker.setDefaults( {beforeShow: checkField} );
window.Parsley.addValidator('ending', {
validateString: function(value, target) {
return isCorrectDate(new Date(value), parseInt(target));
},
messages: {
en: 'Not valid date.'
}
});
$('.startSun input').attr('data-parsley-ending','0');
$('.endingSat input').attr('data-parsley-ending','6');
});

I have found another java script from another site that does what we want, but I have been unable to convert it to work within Forms. The code that I found is here:

// Enable Pay Periods only
$("#payPeriodPicker").datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: payPeriodsOnly
});

//Logic to enable every sunday, how to do every other sunday?
function payPeriodsOnly(date) {
var day = date.getDay();
var oneDay = 24 * 60 * 60 * 1000; //milliseconds in one day
var startingDate = new Date(2020, 5, 3);
var diffDays = (Math.abs(startingDate.getTime() - date.getTime()) / oneDay);

return [((day == 0) && (Math.ceil(diffDays) % 14 == 0)), '']; //sunday and every other weeks

}

Does anyone have any help in getting either script to work to every other Sunday?

0 0

Answer

SELECTED ANSWER

replied on May 27, 2020 • Show version history

Hi Steven,

1. I don't have the November issue locally; did you have other custom scripts that changed the date? Can you try with a new form?

2. "Why does the newDate have to have the "month" a number before what you want?" That's how function is defined.

3. I updated the script to change start date dynamically, but I didn't quite catch your logic: if the base line is 5/3/2020, since today is 5/28/2020, the start date is expected to be 5/17/2020 which is the first "other Sun" BEFORE today, then why is it expected to be 5/24/2020 after two weeks? I think it should be 5/31/2020.

And here is the updated script:

$(document).ready(function(){
  //The date should be every other Sunday since 5/3/2020
  var startDate = new Date(2020,4,3);
  
  function payPeriodsOnly(date) {
    var day = date.getDay();
    var oneDay = 24 * 60 * 60 * 1000; //milliseconds in one day
    var diffDays = (Math.abs(startDate.getTime() - date.getTime()) / oneDay);
    
    return ((day == 0) && (Math.round(diffDays) % 14 == 0)); //sunday and every other weeks
  }
  
  function getStartDate() {
    var dayOfWeek = 0;
    var resultDate = new Date();
    resultDate.setHours(0,0,0,0);
    //If today is 5/28/2020, the start date is 5/17/2020
    //If today is 6/1/2020, the start date is 5/31/2020
    resultDate.setDate(resultDate.getDate() - 14);
    resultDate.setDate(resultDate.getDate() + (7 + dayOfWeek - resultDate.getDay()) % 7);
    if (!payPeriodsOnly(resultDate)) {
      resultDate.setDate(resultDate.getDate() + 7);
    }
    return resultDate;
  }
  
  function checkField(input, inst) {
    if ($(input).closest('li').hasClass('startSun')) {
      $(input).datepicker("option", {minDate: getStartDate(), beforeShowDay: function(n) {return [payPeriodsOnly(n), ''];}});
    }
  }
  
  $.datepicker.setDefaults( {beforeShow: checkField} );
  window.Parsley.addValidator('othersun', {
    validateString: function(value, target) {
      return payPeriodsOnly(new Date(value));
    },
    messages: {
      en: 'Not valid date.'
    }
  });
  $('.startSun input').attr('data-parsley-othersun', true);
});

1 0

View 2 previous replies

replied on May 28, 2020

Hello Rui,

I know you are helping Steven, but I need the same JavaScript for a form I am working on. Like Steven, I am having an issue with the dates not showing after November 2020. I did what you suggested and made a test form putting only the date field with the class startSun on the form and using your exact JavaScript. The days after November 1, 2020 are disabled. They don't become enabled again until March 21, 2021. Then once it gets to November 2021 they become disabled again. I am running Forms 10.3.1.553. Do you think it has something to do with version types?

Thanks for your help,

Vanessa Huynh

0 0

replied on May 28, 2020

Hi Vanessa,

I figured out the issue, on line 10 in Rui's code above, change Math.ceil to Math.round and the Sundays will now show up in November and beyond, depending on how far into the future you set your calendar.

Steve

0 0

replied on May 28, 2020

Rui,

There are no other custom scripts affecting the date on this form. I did change Math.ceil to Math.round and now the dates are now showing in November and beyond. I found that code online: https://www.reddit.com/r/javascript/comments/1xn3zd/stumped_enable_every_other_sunday_starting_with_a/ and in this post, someone had commented that they were having the same issue with the dates in November and they had added the Math.ceil into the code. Looks like this did now work as well in Forms.

I goofed when I typed the response and did not add correctly. You are correct, it should be every two weeks 05/17/2020 and then 05/31/2020. Thanks for seeing through my goof and updating the code.

Thanks again Rui!!

0 0

replied on May 28, 2020

Hi Steven,

Glad to see the issue resolved as I was still not able to reproduce the November issue, tried both Forms 10.3.1/10.4.4 latest. According to the reddit link you provided, if the number could be 35.99999999999, math.ceil(35.99999999999) and math.round(35.99999999999) should both equals to 36.

Besides, I did find a issue that when browser is in a locale other than en-US, the script did not work correctly, and it was because of the "new Date('05-03-2020')" in the beginning of the script could not be parsed correctly in other locales.

I updated the above script to use new Date(2020,4,3), and updated from ceil to round.

1 0

replied on May 29, 2020

Thank you so much for your help Steven and Rui! The JavaScript works perfect now.

0 0

Replies

replied on May 26, 2020

Hi Steven,

Here is the script with some notes:


$(document).ready(function(){
  var startDate = new Date('05-03-2020');
  
  function payPeriodsOnly(date) {
    var day = date.getDay();
    var oneDay = 24 * 60 * 60 * 1000; //milliseconds in one day
    var startingDate = new Date(2020, 4, 3);
    var diffDays = (Math.abs(startingDate.getTime() - date.getTime()) / oneDay);
    
    return ((day == 0) && (Math.ceil(diffDays) % 14 == 0)); //sunday and every other weeks
  }
  
  function checkField(input, inst) {
    if ($(input).closest('li').hasClass('startSun')) {
      $(input).datepicker("option", {minDate: startDate, beforeShowDay: function(n) {return [payPeriodsOnly(n), ''];}});
    }
  }
  
  $.datepicker.setDefaults( {beforeShow: checkField} );
  window.Parsley.addValidator('othersun', {
    validateString: function(value, target) {
      return payPeriodsOnly(new Date(value));
    },
    messages: {
      en: 'Not valid date.'
    }
  });
  $('.startSun input').attr('data-parsley-othersun', true);
});

The date field should have class "startSun". In your current script there is also a field with "endingSat", but since you didn't mention using a Sat so I removed. You can add it back if needed.
In the function payPeriodsOnly you provided, it used a "new Date(2020, 5, 3)" which actually meant June 3 2020. I changed it to "new Date(2020, 4, 3)" which meant May 3 2020.

1 0

replied on May 27, 2020

Hi Rui,

That works great with one question. I went out to November and the dates stop showing after November 1. Would this be due to the calculation being done in the payPeriodsOnly function is now using numbers that are to large for the calculation? Why does the newDate have to have the "month" a number before what you want?

Thanks!!

Steve

0 0

replied on May 27, 2020

Rui,

I am now being asked to see if it would be possible to make the start date a more dynamic one, where it will adjust every two weeks. For example, right now the start date is 05-17-2020, and in two weeks, it will adjust 05-24-2020. Basically the start date will adjust every two weeks.

Thanks!

0 0

replied on May 27, 2020

Steve, were you ever able to figure out why it stops in November? I am having a similar request made of me and would like to use this code, but I want to make sure it doesn't stop in November.

0 0

You are not allowed to follow up in this post.

Question

Question

Datepicker showing only every other Sunday

Answer

Replies

Sign in to reply to this post.