Javascript to disable datepicker

[chriscas]

Hi everyone...  Hoping there's some script coder better than I am here (or someplace where someone could redirect me to).

We currently have the start and end dates on our course settings page completely hidden for teachers via javascript.   I'd like to change to having the fields visible, but just disabled.

So far, I can do this with the input fields and the override checkbox, but I've been unable to figure out how to disable the datepickers next to the boxes.

my working code is:

$(document).ready(function(){

$("#course_start_at").prop("disabled","disabled");

$("#course_conclude_at").prop("disabled","disabled");

$("#course_restrict_enrollments_to_course_dates").prop("disabled","disabled");

});

If anyone could figure out how to disable the datepickers, I'd be so grateful!  I can add the disabled="disabled" code in firefox inspector mode, and the button does get disabled, so I know it's got to be possible, just can't seem to figure out the right code snippet.

Thanks!

-Chris

[kona · Accepted solution]

chriscas​, it looks like  @James ​ provided a solution for this here - https://community.canvaslms.com/ideas/3623#comment-54447

[James · Accepted solution]

Thanks to  @kona ​ for linking the pages together. I answered it based off of what Chris had posted earlier and hadn't seen this one when I responded. When I pulled up the 14th row, it was the course format, not the one about restricting enrollments, which illustrates the problem of trying to refer by table row and Canvas changing things.

Anyway, use the + which is next sibling selector to get the right selector.

$('#course_start_at + button.ui-datepicker-trigger').prop('disabled',true);

$('#course_conclude_at + button.ui-datepicker-trigger').prop('disabled',true);

or to hide the date picker completely ...

$('#course_start_at + button.ui-datepicker-trigger').hide();

$('#course_conclude_at + button.ui-datepicker-trigger').hide();

I gave a much more thorough response on the page Disable Changing Course Start and End Dates

[kona · Accepted solution]

chriscas​, it looks like  @James ​ provided a solution for this here - https://community.canvaslms.com/ideas/3623#comment-54447

[James · Accepted solution]

Thanks to  @kona ​ for linking the pages together. I answered it based off of what Chris had posted earlier and hadn't seen this one when I responded. When I pulled up the 14th row, it was the course format, not the one about restricting enrollments, which illustrates the problem of trying to refer by table row and Canvas changing things.

Anyway, use the + which is next sibling selector to get the right selector.

$('#course_start_at + button.ui-datepicker-trigger').prop('disabled',true);

$('#course_conclude_at + button.ui-datepicker-trigger').prop('disabled',true);

or to hide the date picker completely ...

$('#course_start_at + button.ui-datepicker-trigger').hide();

$('#course_conclude_at + button.ui-datepicker-trigger').hide();

I gave a much more thorough response on the page Disable Changing Course Start and End Dates

[chriscas · Accepted solution]

This solution didn't actually work quite right, because it actually turned out the datepicker is loaded after the document is "ready", meaning the script wasn't going to work as written no matter what jquery selector I used.  After some email assistance from  @James ​, I found a way to get this coded that now seems to work correctly.  I posted the code in the topic.  Thanks for the assistance!

[dlyons]

GitHub - lyonsinbeta/canvas-disable-course-dates

Pull Requests welcome.

[James]

 @dlyons ​

This solution, which is essentially the same one I offered but packaged much nicer, sometimes fails. And the one that Chris finally decided upon (removing the class from the textfield) may fail as well.

They're all timing related and rely on your custom JavaScript being executed after (in our case) the Canvas JavaScript is executed. In the case Chris settled upon, he counts on his JavaScript being executed before Canvas JavaScript is. There is no guarantee that either one will happen before the other.

The only thing that isn't timing related is content that gets delivered as part of the page when it comes from the server. Use Ctrl-u to see that. For dynamically added content, you cannot currently guarantee the order the JavaScript will execute in unless you use something like RequireJS (I'm not an expert on RequireJS, so I'm supposing here) to make sure everything is loaded or use MutationObservers to check for the existence of the element.

As Canvas moves more and more of their content into JavaScript that is created after the page is loaded, this is becoming an issue for more and more people. I've been pushing MutationObservers and sometimes they're necessary like on the People page when new content is added when the user scrolls down, but now that I've looked at your recommendation, I have a solution that I think will work without using them.

If you incorporate both Chris and David's solutions together then you would probably have a case that would work in all but the raciest of conditions where Canvas happens to be in the middle of adding the date pickers while it's executing the code. In that case, it would be too late to disable it by removing the class (Chris' approach) that triggers its creation, but the date picker wouldn't have been created yet, so it wouldn't be disabled (David's approach). That's a tiny window for the race condition.

// Chris' code to get rid of it before the date picker is created
$('.date_entry.hasDatePicker').removeClass('date_entry hasDatepicker');
// David's code to hide date picker if it is already there.
$(".ui-datepicker-trigger").hide();

I modified Chris' a little based of what David wrote and modified David's a little based off what Chris wanted.