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

Discussion

Discussion

Forms Calendar - Restrict to specific list of dates

Forms

Updated August 31, 2023

posted on January 8, 2021 • Show version history

$(document).ready(function () {

//  alert('Test');
    

// Hard Code List of Dates
var availableDates = ["11-1-2021","17-1-2021","25-1-2021"];
  

function available(date) {
  dmy =  date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear() ;
  if ($.inArray(dmy, availableDates) != -1) {
    return [true, "","Available"];
  } else {
    return [false,"","unAvailable"];
  }
}
 
$.datepicker.setDefaults({ beforeShowDay:available });

  
  }); //end of $(document).ready(function () {

I have found code to be able to restrict the Calendar to a list of specific dates.

Issue is this applies to all Calendars on the Form.

I do not seem to be able to use a Selector to specify which Date Field this should apply to.

This line works:

$.datepicker.setDefaults({ beforeShowDay:available });

Using:

$('#q1').datepicker.setDefaults({ beforeShowDay:available });

"or"

$('.daterestrict').datepicker.setDefaults({ beforeShowDay:available });

0 0

Comments 4
Follow-Ups 0

replied on January 11, 2021

Thanks this worked.

$('.daterestrict input').datepicker( 'option', { beforeShowDay:available });

Unfortunately we can not use setDefaults on individual instances so had to apply using a Click Function.

Utility functions

$.datepicker.setDefaults( options )

Change the default options for all date pickers.

Use the option() method to change options for individual instances.

0 0

replied on August 16, 2023

Hello William,

Could you show me how the full code looks? I'm new to javascript and haven't been able to make this work for me.

Thanks!

0 0

replied on August 31, 2023 • Show version history

I attached a "Rough" Business Process I used to develop and test the logic for a customer. You need to remove the .txt extension.

$(document).ready(function () {

//  alert('Test');
  
var testdatevar = "2021-1-30";
    
// $('.testdate input').val(testdatevar);
  
// $('.testdate input').val($.datepicker.formatDate('d-m-yy', new Date(testdatevar)));
  

  

// Hard Code List of Dates
var availableDates = ["11-1-2021","12-1-2021","13-1-2021"];
  
//Retrieve List of Dates from Drop List Field
var availableDatesList = new Array();
  

availableDatesList.length = 0;
$('.availableDatesListclass2 option').each(function() {
//    var i = $(this).val()
//    var i = $.datepicker.formatDate('d-m-yy', new Date(i))
//    availableDatesList.push(i);
//    $('.testdate input').val(i);
    availableDatesList.push($(this).val());
  });
  

function available(date) {
//  dmy =  date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear() ;
  ymd =  date.getFullYear() + "/" + (date.getMonth()+1) + "/" + date.getDate() ;
  if ($.inArray(ymd, availableDatesList) != -1) {
    return [true, "","Available"];
  } else {
    return [false,"","unAvailable"];
  }
}
 
// $('.daterestrict').datepicker.setDefaults({ beforeShowDay:available });
// $('#q1').datepicker({ beforeShowDay: available });
$.datepicker.setDefaults({ beforeShowDay:available });

  
  }); //end of $(document).ready(function () {

Hope this helps.

Currently it loads dates from a drop list.

Business Process Date Picker.xml.txt (38.05 KB)

| Download

1 0

replied on January 8, 2021 • Show version history

It looks like you'll want to use the .option() method to change individual instances:

https://api.jqueryui.com/datepicker/#method-option

And make sure you're targeting the input, not the parent element. Something like this might work:

$('.daterestrict input').datepicker.option({"beforeShowDay", available });

Might need to tweak your available function to ensure it returns a string

1 0

You are not allowed to follow up in this post.

Sign in to reply to this post.