htmlcssdatepicker
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>- Setting the background of an input element as a combination of three colors
- jQuery button click not showing/hiding content
- How to style SVG with external CSS?
- How to Make an SVG Image Dynamically Match the Height (1em) and the Baseline of Surrounding Text?
- How can I count and show Unicode Characters when insert onclick to textarea?
- How to find my images in my folders using the picture element in HTML?
- How to Position an Image on Different Sides of a Container Using CSS?
- How remove border around image in css?
- HTML canvas not drawing image
- Show a message if a text is copied successfully(alternative to alert)
- Should I use the .htm or .html file extension? Which one is correct?
- TailwindCSS: SVG icon won't resize properly
- Float CSS attribute causing parent div not to inherit height?
- Save canvas in grayscale
- svg path not drawing for single point on chrome surface
- Any Way to Reduce File Size Using wkhtmltopdf?
- How to load a gzip compressed javascript without a webserver?
- How simulate CTRL+V keystrokes (paste) using C#
- How to get the value of a selected radio button
- Show text outside the div with clip-path
- Flask/Jinja content not centering
- How to create a scalable document element inside a container in HTML
- Custom directive and [ngClass] on same element does not work
- How can mock a component child to test the parent standalone component in Angular
- How to add Font Awesome icon into <input> button?
- I can't set text after modifying the text
- Change / Hack style of Facebook 'Like it' button
- Selector :last-child not working as expected?
- Convert an array of objects into an unordered HTML list with nested list items
- Why does this strange space start appearing at the bottom of the page only on mobile?