Search code examples
javascripthtmljquerydaterangepicker

HTML table styles affecting date range picker pop-up dialog

I am trying to implement the date range picker, which is available in github. I have followed this link for the code: daterangepicker

  • I have included the following scripts inside my html <head> section

    <link rel="stylesheet" href="styles.css"> <!-- This is my custom css file -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="script.js"></script> <!-- This is my javascript file -->
  • I have included this code inside my javascript file:

    $('input[name="datefilter"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
        cancelLabel: 'Clear'
      }
    });
    
    $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('MM/DD/YYYY') 
            + ' - ' + picker.endDate.format('MM/DD/YYYY'));
    });
    
    $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });
  • and this in my html:

    <p id="date">
      <b>Occupancy Date</b> :<br>
      <input type="text" name="datefilter" value="" />
    </p>

Now when I run my code, the pop-up appears like this:

my output

As you can see, half of the dates are overlapped, and the color combination is also not correct. I want the color of the calendar to be completely white. How do I fix this?

EDIT : I have found the cause of the problem, it's in my styles.css file. Actually I have another table in my html:

<div id="employee">
     <table id="emp_details" style="display: none;"></table>
</div>

<div id="quarter_tenure">
     <p id="date"><b>Occupancy Date</b> :<br>
           <input type="text" name="datefilter" value="" />
     </p>
</div>

And my styles.css:

#emp_details td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
  
#emp_details tr:nth-child(even) {
    background-color: #dddddd;
}

This styles is intended only for the #emp_details table and not for the calender. But somehow, it's affecting the calendar's styles too. So, what do I do so that the styles.css only affects my #emp_details table and not my calendar?

Solution

  • The issue is this style here

    #emp_details td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

    The td, th this style applies to all #emp_details and th. I think you intended this style for all th inside td which should be #emp_details td th that will not effect other table headers in the page other the in id #emp_detials

    Correct style would be

    #emp_details td th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}