使用beforeShow（）在datepicker中添加类

Question

I'm trying to add a class on the selected date element using this function:

beforeShow:function(){ $(".ui-datepicker-current-day").addClass('testX') }

I have two issues. First, no such class has been added. Second, the log shows a strange behavior. The first two times that I open the datePicker, hasClass() returns false but on the third time shows true (while the testX class still not shown in the html).

  $(function() { $( "#datepicker" ).datepicker({ beforeShow:function(){ console.log('================================================'); console.log($( ".ui-datepicker-current-day" ).hasClass('testX')); $( ".ui-datepicker-current-day" ).addClass('testX'); console.log($( ".ui-datepicker-current-day" ).hasClass('testX')); } }); }); 

 .container { width: 600px; padding: 20px; margin: auto; background: #ddd; } .testX{ background-color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <link href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <div class="container"> <p>This is a datepicker example using jquery, jquery ui, and jquery css</p> <form> Date: <input id="datepicker"> </form> </div> 

Answer 1

$("#datepicker").datepicker({
            afterShow: function () {
                console.log('================================================');
                console.log($(".ui-datepicker-current-day").hasClass('testX'));
                $(".ui-datepicker-current-day").addClass('testX');
                console.log($(".ui-datepicker-current-day").hasClass('testX'));
            }
        });

The above code has been updated you can use onfous event on #datetimepicker. the below given code might be helpful for you. it works for me.

  $(function () {

       $("#datepicker").focus(function(){
              console.log('================================================');
                console.log($(".ui-datepicker-current-day").hasClass('testX'));
                $(".ui-datepicker-current-day").addClass('testX');
                console.log($(".ui-datepicker-current-day").hasClass('testX'));

         });

    });

Answer 2

Try this code

 var selectedDay = new Date().getDate(); $(function() { $( "#datepicker" ).datepicker({ onSelect: function(dateText, inst) { selectedDay = inst.selectedDay; }, beforeShowDay: function (date) { if (date.getDate() == selectedDay && !$('#datepicker').val()=="") { return [true, "testX", ""]; } else { return [true, ""] } } }); }); 

 .container { width: 600px; padding: 20px; margin: auto; background: #ddd; } .testX{ background-color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <link href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <div class="container"> <p>This is a datepicker example using jquery, jquery ui, and jquery css</p> <form> Date: <input id="datepicker"> </form> </div> 

Hope this helps