How To apply CSS To a jQuery variable?

Question

 $(document).ready(function() { var today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()); $('#startdate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', format: 'dd/mm/yyyy', maxDate: function() { return $('#enddate').val(); } }); $('#enddate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', format: 'dd/mm/yyyy', minDate: function() { return $('#startdate').val(); }, }); $("#areaFormID").submit(function(event) { event.preventDefault(); const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent; var currentlyClickedStartdate = $("#startdate").val(); var currentlyClickedenddate = $("#enddate").val(); var displayDates = ("For the date between '" + currentlyClickedStartdate + "' To '" + currentlyClickedenddate + "' and Outlet '" + currentlyClickedOutlet + "'"); $("#fromDatetoDate").html(displayDates); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script> <div id="fromDatetoDate"></div> <!-- this one to show dates --> <form id="areaFormID" method="get"> <div class="container"> <h4>Start Date:</h4> <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required /> <h4>End Date:</h4> <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required /> <h4>Outlets:</h4> <select name="outlet" id="myselect"> <option>ALL</option> <option>1</option> <option>2</option> </select> <div> <br> <button id="btn-search" class="btn btn-default" type="submit"> <i class="fa fa-search"></i>&nbsp;Search </button> </div> </div> </form> 

I have a date field and one select field whose values I am storing in a variable after user selects some values. I am then displaying them into a div container.

What I am trying to do is :

• I am trying to apply some css styling to them.

After running the code I get For the date between '05/01/2019' To '11/01/2019' and Outlet 'ALL' this line

• I want to style dates and outlet with some color and make them bold.
• Eg For the date between '05/01/2019' To '11/01/2019' and Outlet 'ALL'
• I just don't know how to add css to jquery variables

So any kind of guidance would be helpful.

Answer 1

It would be easier to just use strong tags:

 $(document).ready(function() { var today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()); $('#startdate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', format: 'dd/mm/yyyy', maxDate: function() { return $('#enddate').val(); } }); $('#enddate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', format: 'dd/mm/yyyy', minDate: function() { return $('#startdate').val(); }, }); $("#areaFormID").submit(function(event) { event.preventDefault(); const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent; var currentlyClickedStartdate = $("#startdate").val(); var currentlyClickedenddate = $("#enddate").val(); var displayDates = ("For the date between <strong>'" + currentlyClickedStartdate + "'</strong> to <strong>'" + currentlyClickedenddate + "'</strong> and Outlet <strong>'" + currentlyClickedOutlet + "'</strong>"); $("#fromDatetoDate").html(displayDates); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script> <div id="fromDatetoDate"></div> <!-- this one to show dates --> <form id="areaFormID" method="get"> <div class="container"> <h4>Start Date:</h4> <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required /> <h4>End Date:</h4> <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required /> <h4>Outlets:</h4> <select name="outlet" id="myselect"> <option>ALL</option> <option>1</option> <option>2</option> </select> <div> <br> <button id="btn-search" class="btn btn-default" type="submit"> <i class="fa fa-search"></i>&nbsp;Search </button> </div> </div> </form> 

If you want to do it via css:

 $(document).ready(function() { var today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()); $('#startdate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', format: 'dd/mm/yyyy', maxDate: function() { return $('#enddate').val(); } }); $('#enddate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', format: 'dd/mm/yyyy', minDate: function() { return $('#startdate').val(); }, }); $("#areaFormID").submit(function(event) { event.preventDefault(); const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent; var currentlyClickedStartdate = $("#startdate").val(); var currentlyClickedenddate = $("#enddate").val(); var displayDates = ("For the date between <span>'" + currentlyClickedStartdate + "'</span> to <span>'" + currentlyClickedenddate + "'</span> and Outlet <span>'" + currentlyClickedOutlet + "'</span>"); $("#fromDatetoDate").html(displayDates); }); }); 

 #fromDatetoDate span { font-weight: bold; color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script> <div id="fromDatetoDate"></div> <!-- this one to show dates --> <form id="areaFormID" method="get"> <div class="container"> <h4>Start Date:</h4> <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required /> <h4>End Date:</h4> <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required /> <h4>Outlets:</h4> <select name="outlet" id="myselect"> <option>ALL</option> <option>1</option> <option>2</option> </select> <div> <br> <button id="btn-search" class="btn btn-default" type="submit"> <i class="fa fa-search"></i>&nbsp;Search </button> </div> </div> </form> 

Answer 2

Wrap your date and Outlet with span and give them class like below.

 $(document).ready(function() { var today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()); $('#startdate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', format: 'dd/mm/yyyy', maxDate: function() { return $('#enddate').val(); } }); $('#enddate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', format: 'dd/mm/yyyy', minDate: function() { return $('#startdate').val(); }, }); $("#areaFormID").submit(function(event) { event.preventDefault(); const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent; var currentlyClickedStartdate = $("#startdate").val(); var currentlyClickedenddate = $("#enddate").val(); var displayDates = ("For the date between '" + "<span class='bold'>" + currentlyClickedStartdate + "</span>" + "' To '" + "<span class='bold'>" + currentlyClickedenddate + "</span>" + "' and Outlet '" + "<span class='bold'>" + currentlyClickedOutlet + "</span>" + "'"); $("#fromDatetoDate").html(displayDates); }); }); 

 .bold { font-weight: bold; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script> <div id="fromDatetoDate"></div> <!-- this one to show dates --> <form id="areaFormID" method="get"> <div class="container"> <h4>Start Date:</h4> <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required /> <h4>End Date:</h4> <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required /> <h4>Outlets:</h4> <select name="outlet" id="myselect"> <option>ALL</option> <option>1</option> <option>2</option> </select> <div> <br> <button id="btn-search" class="btn btn-default" type="submit"> <i class="fa fa-search"></i>&nbsp;Search </button> </div> </div> </form> 

Answer 3

check below code. hope this solves your problem

 $(document).ready(function() { var today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()); $('#startdate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', format: 'dd/mm/yyyy', maxDate: function() { return $('#enddate').val(); } }); $('#enddate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', format: 'dd/mm/yyyy', minDate: function() { return $('#startdate').val(); }, }); $("#areaFormID").submit(function(event) { event.preventDefault(); const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent; var currentlyClickedStartdate = $("#startdate").val(); var currentlyClickedenddate = $("#enddate").val(); var displayDates = ("For the date between <span class='date'> '" + currentlyClickedStartdate + "'</span> To <span class='date'>'" + currentlyClickedenddate + "'</span> and Outlet <span class='date'>'" + currentlyClickedOutlet + "'</span>"); $("#fromDatetoDate").html(displayDates); }); }); 

 .date{ font-weight:bold; color:red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script> <div id="fromDatetoDate"></div> <!-- this one to show dates --> <form id="areaFormID" method="get"> <div class="container"> <h4>Start Date:</h4> <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required /> <h4>End Date:</h4> <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required /> <h4>Outlets:</h4> <select name="outlet" id="myselect"> <option>ALL</option> <option>1</option> <option>2</option> </select> <div> <br> <button id="btn-search" class="btn btn-default" type="submit"> <i class="fa fa-search"></i>&nbsp;Search </button> </div> </div> </form> 

Answer 4

jQuery .html(htmlString) accepts a string of HTML.

In reference to the example while constructing displayDates keyword, it can be constructed as a HTML string. Wrap it in a strong tag or a span tag and apply styles.

 $(document).ready(function() { var today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()); $('#startdate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', format: 'dd/mm/yyyy', maxDate: function() { return $('#enddate').val(); } }); $('#enddate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', format: 'dd/mm/yyyy', minDate: function() { return $('#startdate').val(); }, }); $("#areaFormID").submit(function(event) { event.preventDefault(); const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent; var currentlyClickedStartdate = $("#startdate").val(); var currentlyClickedenddate = $("#enddate").val(); var displayDates = ("For the date between <span class='bold highlight'>'" + currentlyClickedStartdate + "'</span> To <span class='bold highlight'>'" + currentlyClickedenddate + "'</span> and Outlet <span class='bold highlight'>'" + currentlyClickedOutlet + "'</span>"); $("#fromDatetoDate").html(displayDates); }); }); 

 .highlight { color: #66a95b; } .bold { font-weight: bold; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script> <div id="fromDatetoDate"></div> <!-- this one to show dates --> <form id="areaFormID" method="get"> <div class="container"> <h4>Start Date:</h4> <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required /> <h4>End Date:</h4> <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required /> <h4>Outlets:</h4> <select name="outlet" id="myselect"> <option>ALL</option> <option>1</option> <option>2</option> </select> <div> <br> <button id="btn-search" class="btn btn-default" type="submit"> <i class="fa fa-search"></i>&nbsp;Search </button> </div> </div> </form>