如何在 HTML 中禁用日历

Question

I have an HTML <input /> with type=date and I'm trying to use javascript to disable an array of dates but for some reason, it is not working and not sure where I got it wrong, below is my code:

 var array = ["2022-08-25", "2022-08-22", "2022-08-21"] $('input[type="date"][name="tester"]').datepicker({ beforeShowDay: function(date) { var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [array.indexOf(string) == -1] } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script> <input type="date" name="tester">

Answer 1

Creating a datepicker on an <input type="date"> is not supported due to a UI conflict with the native picker.

See more: https://api.jqueryui.com/datepicker/

Consider the following.

 var array = ["2022-08-25", "2022-08-22", "2022-08-21"] $('input[name="tester"]').datepicker({ beforeShowDay: function(date) { var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [array.indexOf(string) === -1] } });

 <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <input type="text" name="tester">