Question

我需要jquery日期选择器中的两个表之间的间距作为公共标题。我尝试了各种解决方案，例如给父div提供填充，但是我无法解决它。任何人都可以帮忙吗？

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
  .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default,
  .ui-button,
  html .ui-button.ui-state-disabled:hover,
  html .ui-button.ui-state-disabled:active {
    background: 0 !important;
    border: 0 !important;
    color: #9c9c9c !important;
    font-weight: bold;
    text-align: center !important;
    white-space: no-wrap;
    font-size: 10px;
  }
  
  table {
    border-collapse: collapse !important;
    margin: 0;
  }
  
  .ui-datepicker-multi .ui-datepicker-group table {
    width: 100% !important;
  }
  
  <!-- .ui-datepicker-unselectable.ui-state-disabled {
    border: 0 !important;
  }
  
  -->.ui-datepicker-unselectable.ui-state-default {
    display: none;
  }
  
  .ui-state-range {
    background-color: #FBD2D3 !important;
    color: #fff !important;
  }
  
  #ui-datepicker-div tr td:hover *,
  #ui-datepicker-div tr td>.ui-state-default.ui-state-hover,
  .ui-datepicker-current-day {
    background-color: #F4777C !important;
    color: #fff !important;
    text-align: center !important;
  }
  
  thead::after {
    content: "";
    display: block;
    height: 1.5em;
    width: 100%;
    background: white;
  }
  
  .ui-datepicker-today {
    background-color: none !important;
  }
  
  .ui-datepicker td span,
  .ui-datepicker td a {
    text-align: center !important;
  }
  
  tbody {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  
  td {
    border: 1px solid #F6F6F6 !important;
  }
  
  #ui-datepicker-div {
    display: none;
    left: 8px;
    position: absolute;
    top: 31px;
    width: 50% !important;
    z-index: 1;
  }
  
  .ui-datepicker-header.ui-widget-header {
    background-color: #F6F6F6 !important;
    border: 0 !important;
    font-weight: bold;
    color: #9c9c9c !important;
  }
  
  .ui-datepicker th {
    background-color: #F6F6F6 !important;
    border: 0 !important;
    font-weight: normal;
  }
  
  .lowTicketValue {
    color: #326EA6;
    white-space: no-wrap;
    font-size: 10px;
  }
  
  .lowTicketValue:active {
    color: #fff !important;
    white-space: no-wrap;
  }
  
  .ui-datepicker .ui-state-range {
    background-color: #F4777C !important;
  }
  
  .ui-datepicker-calendar .highlight {
    background-color: #FBD2D3 !important;
  }
  
  .ui-state-range {
    background-color: #F4777C !important;
  }
  
  .highTicketValue {
    color: #F4777C !important;
  }
  
  #ui-datepicker-div tr td:nth-child(2n+1)>span {
    color: #F4777C !important;
  }
  
  #ui-datepicker-div tr td:nth-child(2n+1):active>span,
  #ui-datepicker-div tr td:nth-child(2n+1):hover>span {
    color: #fff !important;
  }
</style>
<input type="text" id="flexibledates" />
<input type="text" id="flightdeparture" />
<script>
  $(function() {
    $('#flexibledates').datepicker({
      changeMonth: false,
      numberOfMonths: 2,
      dateFormat: 'D, d MM',
      dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      beforeShow: function(input, inst) {
        insertMessageStartDate();
      },
      onSelect: function(selectedDate) {
        var selectedDate = $("#flexibledates").datepicker("getDate");
        if (selectedDate != null) {
          $('#flightdeparture').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
        }
      }
    });
    $('#flightdeparture').datepicker({
      changeMonth: false,
      numberOfMonths: 2,
      dateFormat: 'D, d MM',

      dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      beforeShow: function(input, inst) {
        insertMessageEndDate();
      },
      onSelect: function(selectedDate) {
        $('#flexibledates').datepicker('option', 'maxDate', $(this).datepicker('getDate')); // Reset maximum date				 
      }



    });


    function insertMessageStartDate(message) {
      clearTimeout(insertMessageStartDate.timer);

      if ($('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default').is(':visible')) {
        $('.ui-state-default').after('<span class="lowTicketValue">' + 45555 + '</span>');



      } else
        insertMessageStartDate.timer = setTimeout(insertMessageStartDate, 10);
    }

    function insertMessageEndDate(message) {
      clearTimeout(insertMessageEndDate.timer);
      // $("#flexibledates").datepicker("getDate").css({"background-color": "#F4777C !important", "color": "#fff !important"});
      if ($('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default').is(':visible')) {

        $('.ui-state-default').after('<span class="lowTicketValue">' + 45555 + '</span>');
        $("#ui-datepicker-div td").on({
          mouseenter: function() {
            $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
          },
          mouseleave: function() {
            $("#ui-datepicker-div td").removeClass("highlight");
          }
        });


      } else
        insertMessageEndDate.timer = setTimeout(insertMessageEndDate, 10);
    }
  });
</script>

Answer 1

添加css：

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 48%;
    margin: 0 1%;
}

我在这里覆盖jquery-ui css，但请注意我不需要important

以全屏模式检查摘录

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
  .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default,
  .ui-button,
  html .ui-button.ui-state-disabled:hover,
  html .ui-button.ui-state-disabled:active {
    background: 0 !important;
    border: 0 !important;
    color: #9c9c9c !important;
    font-weight: bold;
    text-align: center !important;
    white-space: no-wrap;
    font-size: 10px;
  }
  
  table {
    border-collapse: collapse !important;
    margin: 0;
  }
  
  .ui-datepicker-multi-2 .ui-datepicker-group {
    width: 48%;
    margin: 0 1%;
}
  
  .ui-datepicker-multi .ui-datepicker-group table {
    width: 100% !important;
  }
  
  <!-- .ui-datepicker-unselectable.ui-state-disabled {
    border: 0 !important;
  }
  
  -->.ui-datepicker-unselectable.ui-state-default {
    display: none;
  }
  
  .ui-state-range {
    background-color: #FBD2D3 !important;
    color: #fff !important;
  }
  
  #ui-datepicker-div tr td:hover *,
  #ui-datepicker-div tr td>.ui-state-default.ui-state-hover,
  .ui-datepicker-current-day {
    background-color: #F4777C !important;
    color: #fff !important;
    text-align: center !important;
  }
  
  thead::after {
    content: "";
    display: block;
    height: 1.5em;
    width: 100%;
    background: white;
  }
  
  .ui-datepicker-today {
    background-color: none !important;
  }
  
  .ui-datepicker td span,
  .ui-datepicker td a {
    text-align: center !important;
  }
  
  tbody {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  
  td {
    border: 1px solid #F6F6F6 !important;
  }
  
  #ui-datepicker-div {
    display: none;
    left: 8px;
    position: absolute;
    top: 31px;
    width: 50% !important;
    z-index: 1;
  }
  
  .ui-datepicker-header.ui-widget-header {
    background-color: #F6F6F6 !important;
    border: 0 !important;
    font-weight: bold;
    color: #9c9c9c !important;
  }
  
  .ui-datepicker th {
    background-color: #F6F6F6 !important;
    border: 0 !important;
    font-weight: normal;
  }
  
  .lowTicketValue {
    color: #326EA6;
    white-space: no-wrap;
    font-size: 10px;
  }
  
  .lowTicketValue:active {
    color: #fff !important;
    white-space: no-wrap;
  }
  
  .ui-datepicker .ui-state-range {
    background-color: #F4777C !important;
  }
  
  .ui-datepicker-calendar .highlight {
    background-color: #FBD2D3 !important;
  }
  
  .ui-state-range {
    background-color: #F4777C !important;
  }
  
  .highTicketValue {
    color: #F4777C !important;
  }
  
  #ui-datepicker-div tr td:nth-child(2n+1)>span {
    color: #F4777C !important;
  }
  
  #ui-datepicker-div tr td:nth-child(2n+1):active>span,
  #ui-datepicker-div tr td:nth-child(2n+1):hover>span {
    color: #fff !important;
  }
</style>
<input type="text" id="flexibledates" />
<input type="text" id="flightdeparture" />
<script>
  $(function() {
    $('#flexibledates').datepicker({
      changeMonth: false,
      numberOfMonths: 2,
      dateFormat: 'D, d MM',
      dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      beforeShow: function(input, inst) {
        insertMessageStartDate();
      },
      onSelect: function(selectedDate) {
        var selectedDate = $("#flexibledates").datepicker("getDate");
        if (selectedDate != null) {
          $('#flightdeparture').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
        }
      }
    });
    $('#flightdeparture').datepicker({
      changeMonth: false,
      numberOfMonths: 2,
      dateFormat: 'D, d MM',

      dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      beforeShow: function(input, inst) {
        insertMessageEndDate();
      },
      onSelect: function(selectedDate) {
        $('#flexibledates').datepicker('option', 'maxDate', $(this).datepicker('getDate')); // Reset maximum date				 
      }



    });


    function insertMessageStartDate(message) {
      clearTimeout(insertMessageStartDate.timer);

      if ($('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default').is(':visible')) {
        $('.ui-state-default').after('<span class="lowTicketValue">' + 45555 + '</span>');



      } else
        insertMessageStartDate.timer = setTimeout(insertMessageStartDate, 10);
    }

    function insertMessageEndDate(message) {
      clearTimeout(insertMessageEndDate.timer);
      // $("#flexibledates").datepicker("getDate").css({"background-color": "#F4777C !important", "color": "#fff !important"});
      if ($('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default').is(':visible')) {

        $('.ui-state-default').after('<span class="lowTicketValue">' + 45555 + '</span>');
        $("#ui-datepicker-div td").on({
          mouseenter: function() {
            $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
          },
          mouseleave: function() {
            $("#ui-datepicker-div td").removeClass("highlight");
          }
        });


      } else
        insertMessageEndDate.timer = setTimeout(insertMessageEndDate, 10);
    }
  });
</script>

更新 - 我认为您无法完全按照自己的意愿行事，但您可以进行更改，再次全屏查看：

.ui-datepicker-multi .ui-datepicker-group table {
    width: 96%; /* <!-- !important NOT needed */
    margin: 4%;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
  .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default,
  .ui-button,
  html .ui-button.ui-state-disabled:hover,
  html .ui-button.ui-state-disabled:active {
    background: 0 !important;
    border: 0 !important;
    color: #9c9c9c !important;
    font-weight: bold;
    text-align: center !important;
    white-space: no-wrap;
    font-size: 10px;
  }
  
  table {
    border-collapse: collapse !important;
    margin: 0;
  }
  
  .ui-datepicker-multi .ui-datepicker-group table {
    width: 96%;
    margin: 2%;
  }
  
  <!-- .ui-datepicker-unselectable.ui-state-disabled {
    border: 0 !important;
  }
  
  -->.ui-datepicker-unselectable.ui-state-default {
    display: none;
  }
  
  .ui-state-range {
    background-color: #FBD2D3 !important;
    color: #fff !important;
  }
  
  #ui-datepicker-div tr td:hover *,
  #ui-datepicker-div tr td>.ui-state-default.ui-state-hover,
  .ui-datepicker-current-day {
    background-color: #F4777C !important;
    color: #fff !important;
    text-align: center !important;
  }
  
  thead::after {
    content: "";
    display: block;
    height: 1.5em;
    width: 100%;
    background: white;
  }
  
  .ui-datepicker-today {
    background-color: none !important;
  }
  
  .ui-datepicker td span,
  .ui-datepicker td a {
    text-align: center !important;
  }
  
  tbody {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  
  td {
    border: 1px solid #F6F6F6 !important;
  }
  
  #ui-datepicker-div {
    display: none;
    left: 8px;
    position: absolute;
    top: 31px;
    width: 50% !important;
    z-index: 1;
  }
  
  .ui-datepicker-header.ui-widget-header {
    background-color: #F6F6F6 !important;
    border: 0 !important;
    font-weight: bold;
    color: #9c9c9c !important;
  }
  
  .ui-datepicker th {
    background-color: #F6F6F6 !important;
    border: 0 !important;
    font-weight: normal;
  }
  
  .lowTicketValue {
    color: #326EA6;
    white-space: no-wrap;
    font-size: 10px;
  }
  
  .lowTicketValue:active {
    color: #fff !important;
    white-space: no-wrap;
  }
  
  .ui-datepicker .ui-state-range {
    background-color: #F4777C !important;
  }
  
  .ui-datepicker-calendar .highlight {
    background-color: #FBD2D3 !important;
  }
  
  .ui-state-range {
    background-color: #F4777C !important;
  }
  
  .highTicketValue {
    color: #F4777C !important;
  }
  
  #ui-datepicker-div tr td:nth-child(2n+1)>span {
    color: #F4777C !important;
  }
  
  #ui-datepicker-div tr td:nth-child(2n+1):active>span,
  #ui-datepicker-div tr td:nth-child(2n+1):hover>span {
    color: #fff !important;
  }
</style>
<input type="text" id="flexibledates" />
<input type="text" id="flightdeparture" />
<script>
  $(function() {
    $('#flexibledates').datepicker({
      changeMonth: false,
      numberOfMonths: 2,
      dateFormat: 'D, d MM',
      dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      beforeShow: function(input, inst) {
        insertMessageStartDate();
      },
      onSelect: function(selectedDate) {
        var selectedDate = $("#flexibledates").datepicker("getDate");
        if (selectedDate != null) {
          $('#flightdeparture').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
        }
      }
    });
    $('#flightdeparture').datepicker({
      changeMonth: false,
      numberOfMonths: 2,
      dateFormat: 'D, d MM',

      dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      beforeShow: function(input, inst) {
        insertMessageEndDate();
      },
      onSelect: function(selectedDate) {
        $('#flexibledates').datepicker('option', 'maxDate', $(this).datepicker('getDate')); // Reset maximum date				 
      }



    });


    function insertMessageStartDate(message) {
      clearTimeout(insertMessageStartDate.timer);

      if ($('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default').is(':visible')) {
        $('.ui-state-default').after('<span class="lowTicketValue">' + 45555 + '</span>');



      } else
        insertMessageStartDate.timer = setTimeout(insertMessageStartDate, 10);
    }

    function insertMessageEndDate(message) {
      clearTimeout(insertMessageEndDate.timer);
      // $("#flexibledates").datepicker("getDate").css({"background-color": "#F4777C !important", "color": "#fff !important"});
      if ($('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default').is(':visible')) {

        $('.ui-state-default').after('<span class="lowTicketValue">' + 45555 + '</span>');
        $("#ui-datepicker-div td").on({
          mouseenter: function() {
            $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
          },
          mouseleave: function() {
            $("#ui-datepicker-div td").removeClass("highlight");
          }
        });


      } else
        insertMessageEndDate.timer = setTimeout(insertMessageEndDate, 10);
    }
  });
</script>

在两个jquery datepicker表之间填充

1 个答案: