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

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

This topic contains 12 replies, has 2 voices, and was last updated by  Carl E Tippins 1 week, 4 days ago.

  • Author
    Posts
  • #24021

    Carl E Tippins
    Participant

    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”
    });
    }
    }

  • #24042

    Alexander Bautz
    Keymaster

    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

  • #24066

    Carl E Tippins
    Participant

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

  • #24069

    Alexander Bautz
    Keymaster

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

    Alexander

  • #24088

    Carl E Tippins
    Participant

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

    Attachments:
  • #24091

    Alexander Bautz
    Keymaster

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

    Alexander

  • #24098

    Carl E Tippins
    Participant

    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:
  • #24132

    Alexander Bautz
    Keymaster

    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

  • #24139

    Carl E Tippins
    Participant

    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. 🙂

  • #24166

    Alexander Bautz
    Keymaster

    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

  • #24176

    Carl E Tippins
    Participant

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

    Carl

  • #24184

    Alexander Bautz
    Keymaster

    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

  • #24186

    Carl E Tippins
    Participant

    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!!

You must be logged in to reply to this topic.