Padding between two jquery datepicker tables
I need spacing between the two tables inside the jquery date picker which as common header.I tried with various solutions like giving padding to the parent div,but I"m unable to resolve it.Can anyone help?
<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>Solution
Add css:
.ui-datepicker-multi-2 .ui-datepicker-group {
width: 48%;
margin: 0 1%;
}
I'm overriding jquery-ui css here but notice I don't need important
Check the snippet out in full screen mode
<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>Update - I don't think you can do exactly what you want but you can make a change like so, again, have a look full screen:
.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>- Clear clipboard to prohibit unauthorised copying, insert message?
- Can you render a html file into a container?
- how to position two elements left and right
- Debounce in ReactJS
- Angular - Why isn't my dropdown list working
- Is [h6 aria-level="7"] a reliable way to create a [h7] element?
- There was an error during the transport or processing of this request. Error code = 10, Path = /wardeninit
- How can I prevent address bar from hiding in mobile browsers?
- How do you limit the number of options selected in an HTML <select> element?
- Is there an option on the IFrame element to load it before the dom page loaded event?
- Changing Font Color in HTML Email for AOL Mail
- TypeError: 'Locator' object is not callable using .first() in Playwright
- is form enctype "application/json" available?
- QTextBrowser not processing CSS properly
- Cannot remove bootstrap button border
- Unable to center navbar properly
- Popover on input field
- How to hide an element and all its children from screen readers?
- Force a line break in a URL
- Select text in ::before or ::after pseudo-element
- Trying to size div as percentages of the entire page
- Remove all style attributes from HTML in PHP
- Tooltips for mobile browsers
- How to open Windows Explorer via link
- Method 'POST' is not supported - Spring
- Monitor an images folder to get a live local html/javascript gallery
- Is call to preventDefault() really necessary on drop event?
- Use rvest to scrape all p after h? (or other R package)
- How to position two elements side by side using CSS
- Data not getting into the database