Geek Answers Handbook

How to change the color of a specific date <input type = Date>?

Is there a way to change the style (ie Color) of the input date of type HTML 5 in html 5 we can show the calendar via <input type=date> now we can say that the 23rd march is a holiday and I want to show this specific date in red , How can i do this?

I want to change the color of a certain date during the opening of the calendar so that it is visible to the client, as I did, using the Jquery plugin in the following figure enter image description here

+7
jquery date css html5 calendar
source share
3 answers

The following is a jQuery method.

  $('input[type="date"]').change(function{ var date = new Date( this.value ); var specificDate = "23 March 2018"; if(date.getDay() == 6 || date.getDay() == 0 || this.value == specificDate) { //Check for Saturday or Sunday $(this).css("color","red"); } else { $(this).css("color","inherit"); } });
-one
source share

Pure js solution, no jQuery required. You can save your vacation in an array and check if the input is in the array or not.

See 1. includes 2. Date Comparison

 function datechanged(el) { var holiday = new Date("2018-10-02"); var holidays = [new Date("2018-10-02").getTime(), new Date("2018-02-02").getTime(), new Date("2018-02-01").getTime()] var inputDate = new Date(el.value); el.classList.remove("red"); if(holidays.includes(inputDate.getTime())){ el.classList.add("red") } } 
 /* Styles go here */ .red{ color:red; } 
 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <input type=date onchange="datechanged(this)"> </body> </html>
-one
source share

I would make an array containing your specific dates. In doing so, you can target input change. And change the class if it finds it in the array.

Iused indexOf() and change the class if the result is other than -1

Hope this is what you were looking for. Happy to explain or help in a better solution, if necessary.

 const redDates = ['2018-02-26','2018-03-26']; $('input').change(function() { $(this).removeClass('holiday'); if(redDates.indexOf($(this).val()) != -1) $(this).addClass('holiday'); }) 
 .holiday { color: red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="date">
-one
source share

More articles:


All Articles