两个jquery日期选择器表之间的填充
问题描述 投票：0回答：2
我需要 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>2个回答
2
投票
投票
添加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>0
投票
投票
你可以在 CSS 中尝试这个
.datepicker{
&.datepicker-orient-bottom{
margin-top:10px;
}
&.datepicker-orient-top{
margin-top:-10px;
}
}最新问题
- Azure OpenAI Studio Playground：在向任何函数提交输出时，我的助手总是返回未定义的错误
- 如何对Bull.js与Redis服务器的连接实现完整而非部分的TLS保护？
- Nuget 资源从 https 更改为 http
- 不同值时如何在同一行返回结果
- 我可以将 boost::intrusive::rbtree 与 stateful_value_traits 一起使用吗？
- 确定next.js中的客户端/服务器组件
- 按照Ieee-754单精度格式实现浮点加法器但移位错误
- 如何在Python中通过OR-Tools使用sorted()和min()函数？
- 来自 openai python SDK 的 AsyncAzureOpenAI 客户端支持自定义快速 API 端点
- 如果我想使用过去/未来数百万年的日期和时间，我该怎么做？
- 使用 docker-compose 进行 LangGraph 部署
- 如何使用 WebDriver Sampler (JMeter) 中的 JMeter 属性 props.get props.put
- 从 winit 获取 windows-rs HWND？
- 迭代所有用户 - firestore
- Python 2 中对象和实例之间的区别？
- 如何使用 PyMuPDF 将 unicode 文本插入 PDF？
- 使用多个 PDF 矢量数据库从一个 PDF 中检索信息
- 在连接中使用字符串值和 CONCAT 作为表名
- 在 ubuntu 23.04 或任何非 LTS 版本中安装 Cloudflare warp cli 存在问题 [已关闭]
- 使用列作为带有 concat 的表连接
© www.soinside.com 2019 - 2024. All rights reserved.