Custom JS to limit selectable days in Date field not working past DFFS v55

[Carl E Tippins]

We have Custom JS that limits the dates available for selection based on the field value selected from a choice field. What’s happening is when I use a DFFS version greater than v55, the icon next to the calendar field fails to display the calendar popup when clicked. I’m wondering if this is related to my other issue “Rule set to trigger on change not firing”.
Here is our JS code:
function constrainDate(){
var moment = require(‘moment’);
var $requestType = getFieldValue(“Request_x0020_Type”);
var $strReviewForum = getFieldValue(“ReviewForum”);

var $strMinDate = “”;

//Set Min Date
if($requestType === “Production Issue”){
$strMinDate = ‘+1d’;
}
else
if($requestType === “Enhancement”){
if($strReviewForum == “Intake Forum”){
$strMinDate = ‘+21d’;
}
else
if($strReviewForum === “AIT”){
$strMinDate = ‘+21d’;
}
else
if($strReviewForum === “Reporting Forum”){
$strMinDate = ‘+21d’;
}
else
if($strReviewForum === “Op Reporting Forum”){
$strMinDate = ‘+21d’;
}
else
if($strReviewForum === “RMP Reporting Forum”){
$strMinDate = ‘+21d’;
}
else
if($strReviewForum === “None”){
$strMinDate = ‘+21d’;
}
else
if($strReviewForum === “PMO Forum”){
$strMinDate = ‘+21d’;
}
else{
setFieldValue(“Due_x0020_Date”,””);
$strMinDate = ”;
}
}
else{
setFieldValue(“Due_x0020_Date”,””);
$strMinDate = ”;
}

jQuery(“#dffs_Target_x0020_Release_x0020_Date”).find(“input”).datepicker(‘destroy’);
jQuery(“#dffs_Target_x0020_Release_x0020_Date”).find(“input”).datepicker({
inline: true,
beforeShow: function(input, inst) {noDates();},
maxDate: ‘+120d’, //sets the maximum selectable date.. in this case 60 days from today
minDate: $strMinDate, //sets the minimum selectable date.. in this case tomorrow
dateFormat: “mm/dd/yy”,
buttonImage: window.location.protocol+”//”+window.location.host+”/_layouts/images/itevent.png”,
buttonText: ‘Select Week Ending’,
buttonImageOnly: true,
showOn: “both”,
showAnim: “slideDown”,
constrainInput: true,
beforeShowDay: function (date) {

var day = date.getDay();

var firstDayOfYear = new Date(date);
firstDayOfYear = new Date(firstDayOfYear.getFullYear()+”/01/01 00:00:00″);
var firstWeekdayOfYear = moment(firstDayOfYear).format(“d”);
var weekofyear = moment(date).format(“W”);

var firstDayOfMonth = new Date(date);
firstDayOfMonth = new Date(firstDayOfMonth.getFullYear()+”/”+(firstDayOfMonth.getMonth()+1)+”/01 00:00:00″);
var firstWeekdayOfMonth = moment(firstDayOfMonth).format(“d”);
//var weekdayOfMonth = Math.floor(moment(date).format(“D”) / 7);
var weekdayOfMonth = weekofyear – moment(firstDayOfMonth).format(“W”);

if ( firstWeekdayOfMonth > 0 && firstWeekdayOfMonth <= day ) {
weekdayOfMonth++;
}
//Set strDayReturn
if($requestType === “Production Issue”){
return [(day !== 0 && day !== 6), ”];
}
else
if($requestType === “Enhancement”){
if($strReviewForum === “Intake Forum”){
return [(day === 5 && ( weekdayOfMonth === 3 ) ), ”];
}
else
if($strReviewForum === “Reporting Forum”){
return [(day === 5 && ( weekdayOfMonth === 3 ) ), ”];
}
else
if($strReviewForum === “Op Reporting Forum”){
return [(day === 5 && ( weekdayOfMonth === 3 ) ), ”];
}
else
if($strReviewForum === “RMP Reporting Forum”){
return [(day === 5 && ( weekdayOfMonth === 4 ) ), ”];
}
else
if($strReviewForum === “AIT”){
return [(day === 5 && ( weekdayOfMonth === 3 ) ), ”];
}
else
if($strReviewForum === “PMO Forum”){
return [(day === 5 && ( weekdayOfMonth === 3 ) ), ”];
}
else
if($strReviewForum === “None”){
return [(day === 5 && ( weekdayOfMonth === 3 ) ), ”];
}
else{
setFieldValue(“Due_x0020_Date”,””);
return [(”, ”)];
}
}
else{
setFieldValue(“Due_x0020_Date”,””);
return [(”, ”)];

}
}
}).attr(‘readonly’, ‘readonly’);
// Hide the default calendar icon
jQuery(“#dffs_Target_x0020_Release_x0020_Date”).find(‘.ms-dtinput’).not(‘:first’).hide();
}

function noDates(){
var $requestType = getFieldValue(“Request_x0020_Type”);
var $strReviewForum = getFieldValue(“ReviewForum”);

//Set Min Date
if($requestType === “Production Issue”){}
else if($requestType === “Enhancement”){
if($strReviewForum == “Intake Forum”){}
else if($strReviewForum === “Reporting Forum”){}
else if($strReviewForum === “Op Reporting Forum”){}
else if($strReviewForum === “AIT”){}
else if($strReviewForum === “PMO Forum”){}
else if($strReviewForum === “None”){}
else if($strReviewForum === “RMP Reporting Forum”){}
else{
spjs.dffs.alert({
“title”:”No Dates available!”,
“msg”:”<i class=’fa fa-warning fa-4x iconBad’ aria-hidden=’true’></i><p>You must complete Request Type before you can select a date!</p><p>For Enhancements you must also select your Impacted Solution!</p>”,
“ok”:function(){
},
“okBtnLabel”:”OK”
});
}
}
else{
spjs.dffs.alert({
“title”:”No Dates available!”,
“msg”:”<i class=’fa fa-warning fa-4x iconBad’ aria-hidden=’true’></i><p>You must complete Request Type before you can select a date!</p><p>For Enhancements you must also select your Impacted Solution!</p>”,
“ok”:function(){
},
“okBtnLabel”:”OK”
});
}
}

[Alexander Bautz]

Try bringing up the developer tools (hit F12 and select Console) before you open the form. Are there any error messages in the console when you try to change the date?

Alexander

[Carl E Tippins]

I’m getting an “Object expected” error on – var firstWeekdayOfYear = moment(firstDayOfYear).format(“d”); – which I do not get on v55.

• This reply was modified 5 years, 1 month ago by Carl E Tippins.

[Alexander Bautz]

Can you show me a screenshot of the error message? – sometimes you can click to expand the error message for more details.

Alexander

[Carl E Tippins]

Alexander,
Clicking on the error doesn’t do anything 🙁
But here’s a screen shot just in case it sheds more light.

Attachments:

1. 

   Due-Date-Error.png
   

[Alexander Bautz]

If you are able to check it in Google Chrome browser it will most likely give you some more details about the error.

Alexander

[Carl E Tippins]

Here’s the console info text and an attachment.

Resource interpreted as Document but transferred with MIME type image/gif: “<URL>”.
jquery.js:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jquery.js:4
ajax @ jquery.js:4
wrapSoap @ VM713:1
queryItems @ VM713:1
spjs_QueryItems @ VM713:1
loadConfig @ VM756:1
(anonymous) @ VM756:1
ExecuteOrDelayUntilEventNotified @ init.js?rev=Xpo7ARBt8xBROO1h5n3s6g%3D%3D:1
ExecuteOrDelayUntilScriptLoaded @ init.js?rev=Xpo7ARBt8xBROO1h5n3s6g%3D%3D:1
init @ VM756:1
(anonymous) @ VM756:1
(anonymous) @ /SPJS/DFFS/js/DFFS_frontend.min.js:9
(anonymous) @ jquery.js:2
globalEval @ jquery.js:2
text script @ jquery.js:4
Xb @ jquery.js:4
y @ jquery.js:4
c @ jquery.js:4
XMLHttpRequest.send (async)
send @ jquery.js:4
ajax @ jquery.js:4
jQspjs.cachedScriptLoader @ NewForm.aspx?RootFolder=:1862
(anonymous) @ NewForm.aspx?RootFolder=:1883
i @ jquery.js:2
fireWith @ jquery.js:2
y @ jquery.js:4
c @ jquery.js:4
XMLHttpRequest.send (async)
send @ jquery.js:4
ajax @ jquery.js:4
jQspjs.cachedScriptLoader @ NewForm.aspx?RootFolder=:1862
(anonymous) @ NewForm.aspx?RootFolder=:1871
each @ jquery.js:2
(anonymous) @ NewForm.aspx?RootFolder=:1867
i @ jquery.js:2
fireWith @ jquery.js:2
y @ jquery.js:4
c @ jquery.js:4
XMLHttpRequest.send (async)
send @ jquery.js:4
ajax @ jquery.js:4
jQspjs.cachedScriptLoader @ NewForm.aspx?RootFolder=:1862
load_DFFS_files @ NewForm.aspx?RootFolder=:1864
jqReady @ NewForm.aspx?RootFolder=:1787
(anonymous) @ NewForm.aspx?RootFolder=:1804
setTimeout (async)
jqReady @ NewForm.aspx?RootFolder=:1803
(anonymous) @ NewForm.aspx?RootFolder=:1804
setTimeout (async)
jqReady @ NewForm.aspx?RootFolder=:1803
(anonymous) @ NewForm.aspx?RootFolder=:1809
(anonymous) @ NewForm.aspx?RootFolder=:1810
VM756:1 *** Show DFFS load time tracker ***
Either type this in the console: spjs.dffs.showLoadTime()
Or load the page with “showLoadTime=1” in the URL query string
*** Show DFFS load time tracker ***
VM779:317 Uncaught TypeError: moment is not a function
at HTMLInputElement.beforeShowDay (eval at <anonymous> (jquery.js:2), <anonymous>:317:30)
at n._generateHTML (jquery-ui.min.js:8)
at n._updateDatepicker (jquery-ui.min.js:8)
at n._showDatepicker (jquery-ui.min.js:8)
at HTMLImageElement.<anonymous> (jquery-ui.min.js:7)
at HTMLImageElement.dispatch (jquery.js:3)
at HTMLImageElement.r.handle (jquery.js:3)

Attachments:

1. 

   Console.png
   

[Alexander Bautz]

From the error message it looks like “moment.js” has not been loaded properly. I did a test and it looks like moment.js loads as a AMD (require.js) module. I’m not so happy with this require.js hijacking of the modules because I struggle to have DFFS load these modules consistently.

I did however get it working by adding the export-name in front of the file path like this:

moment|https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js

and then defining it like you did in your snippet:

var moment = require('moment');

This method is described in the help text on the “Load these files before executing the Custom JS” textarea in the DFFS backend.

Let me know if this works.

Alexander

[Carl E Tippins]

Alexander,
My company does not allow us to link to outside urls, we can only reference files within our internal SP folders. So, I went to https://momentjs.com/, copied the moment.js file to the SiteAssets folder and referenced it in the “Load these files before executing the Custom JS” section of the Custom JS tab. Worked like a charm. 🙂

[Alexander Bautz]

I’m glad it fixed the problem, but I’m a bit confused – didn’t you already load moments.js in the form? – did you have to update it to work properly?

Alexander

[Carl E Tippins]

We were loading moment.min.js. Evidently it needed moment.js also.

Carl

[Alexander Bautz]

I don’t think you need both, but maybe the minified one didn’t play well when loading like this. Try removing the min.js version and use only the .js.

Alexander

[Carl E Tippins]

Thanks! I removed the min.js reference and there was no issue. Actually, I had thought about removing it yesterday, but other work got in the way and I forgot to do it before I left. Thanks again!!

[Author]

Posts