You are viewing limited content. For full access, please sign in.

Discussion

Discussion

Restricting Date Picker

posted on May 22 Show version history

I am trying to restrict the Reporting Pay Period Start Date(.PPstartrange) range to four weeks prior to the Current Pay Period Start Date(.currentPPstart).  I also want the user to only be able to select Sundays.  I would like the Reporting Pay Pay Period End Date(.PPendrange) to automatically be the Saturday two weeks after the Reporting Pay Period Start Date. 

 

I am using a formula in the date field to calculate the Current Pay Period Start and End Dates.

 

I am pretty new to JavaScript and have not figured out the date picker yet.  Could anyone that is familiar with JavaScript help me with a code to make this happen?  Any help is greatly appreciated! smiley

 

0 0
replied on May 26

Using your code Steve Knowlton and some code I got from another post I am close to achieving what I want.  However, I want to add two weeks to the minimum date.  For example, in the image above it shows only the Sundays during the current pay period.  I would like it to also show the two Sundays before the current pay period (i.e. May 10th and 17th).  Below is the code I am currently using.  Can someone tell me how to add 14 days to the code to make the two Sundays prior be enabled?  Any help is greatly appreciated.

Current Pay Period Start Date (.periodBegin)

Current Pay Period End Date (.periodEnd)

Reporting Pay Period Start Date (.dateRange)

$(document).ready(function(){

  function updateMinMaxDates () {
    var minimum = $('.periodBegin input').val(); // get Pay Period Start Date
    var maximum = $('.periodEnd input').val();   // get Pay Period End Date
    var minSplit = [];
    minSplit = minimum.split("/");
    var newMin = (minSplit[2]+"-"+minSplit[0]+"-"+minSplit[1]); 
    var maxSplit = [];
    maxSplit = maximum.split("/");
    var newMax = (maxSplit[2]+"-"+maxSplit[0]+"-"+maxSplit[1]);
    $('.dateRange input').attr('min',newMin); // disable dates before period start date
    $('.dateRange input').attr('max',newMax); // disable dates after period end date
  }
  $('.periodBegin input').change(updateMinMaxDates);
  
    // reset enabled date range when a row is added or removed
  $('.dateRange').on('click',function(){
    updateMinMaxDates();
  });
 
  function isCorrectDate(n) {
    var t = n.getDay();
    var d = n.getDate();
    return (t==0);
  }
  function checkDate(n) {
    return[isCorrectDate(n),""];
  }
  function checkField(input, inst) {
    if ($(input).closest('li').hasClass('dateRange')) {
      $(input).datepicker("option", {beforeShowDay: checkDate});
    }
  }
  $.datepicker.setDefaults( {beforeShow: checkField} );
  window.Parsley.addValidator('secondsat', {
    validateString: function(value) {
      return isCorrectDate(new Date(value));
    },
    messages: {
      en: 'Not valid date.'
    }
  });
  $('.dateRange input').attr('data-parsley-secondsat','');

  });

 

0 0
replied on May 26

Thank you this is helpful smiley

0 0
replied on May 22 Show version history

This is some code I found from another post that I used to only allow the user to pick Sunday on the Date Picker. You would need to add the class myDate to your Date field

 

$(document).ready(function(){
 
  function isCorrectDate(n) {
    var t = n.getDay();
    var d = n.getDate();
    return (t==0);
  }
  function checkDate(n) {
    return[isCorrectDate(n),""];
  }
  function checkField(input, inst) {
    if ($(input).closest('li').hasClass('myDate')) {
      $(input).datepicker("option", {beforeShowDay: checkDate});
    }
  }
  $.datepicker.setDefaults( {beforeShow: checkField} );
  window.Parsley.addValidator('secondsat', {
    validateString: function(value) {
      return isCorrectDate(new Date(value));
    },
    messages: {
      en: 'Not valid date.'
    }
  });
  $('.myDate input').attr('data-parsley-secondsat','');

  });

1 0
replied on May 22 Show version history

Hi Vanessa,

Using JavaScript you should be able to set the "min" and "max" values of the date field to the datess that you want.

They should be in the yyyy-MM-dd format, like "2020-05-22".

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.