Javascript to disable datepicker

Jump to solution
chriscas
Community Coach
Community Coach

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

3 Solutions
James
Community Champion

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

View solution in original post

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!

View solution in original post