How to validate date in datepicker with jquery (no with validation column)

Question

I have two date-pickers in the same list but each have a different validation rule (in configuration of column) and the user can choice set date in one or other field on the form (but not required to set both date-pickers).

Is it possible to set the rules on date-picker for validation with jQuery? any example?

Example:

1. set Datepicker 1 rules to choice only Sundays.

2. set Datepicker 2 rules to choice only Weekdays.

Answer 1

We can use jQuery DatePicker to achieve it. The following code for your reference. Add the code into script editor web part in new/edit form page.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
    var dateField1="Datepicker1";
    var dateField2="Datepicker2";   
    $("input[title='"+dateField1+"']").datepicker({ beforeShowDay:function (date) { return [date.getDay() === 0, ''];}});
    $("input[title='"+dateField2+"']").datepicker({ beforeShowDay: $.datepicker.noWeekends })
    //hide defualt picker image 
    $("img[id^='"+dateField1+"']").hide();
    $("img[id^='"+dateField2+"']").hide();
    //only allow the date picker select value
    $("input[title='"+dateField1+"']").prop('readonly', true);
    $("input[title='"+dateField2+"']").prop('readonly', true);
});
</script>