第二个 Instagram 按钮的 CSS 属性

Question

ref21

Asked:2020-05-20 18:02:58 +0000 UTC2020-05-20 18:02:58 +0000 UTC 2020-05-20 18:02:58 +0000 UTC

如何在 jquery UI datapicker 中绘制两个日期之间的差距？

772

$.datepicker.regional.ru = {
        closeText: "Закрыть",
        prevText: "&#x3C;Пред",
        nextText: "След&#x3E;",
        currentText: "Сегодня",
        monthNames: [ "Январь","Февраль","Март","Апрель","Май","Июнь",
            "Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь" ],
        monthNamesShort: [ "Янв","Фев","Мар","Апр","Май","Июн",
            "Июл","Авг","Сен","Окт","Ноя","Дек" ],
        dayNames: [ "воскресенье","понедельник","вторник","среда","четверг","пятница","суббота" ],
        dayNamesShort: [ "вск","пнд","втр","срд","чтв","птн","сбт" ],
        dayNamesMin: [ "Вс","Пн","Вт","Ср","Чт","Пт","Сб" ],
        weekHeader: "Нед",
        dateFormat: "dd.mm.yy",
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: "" };
    $.datepicker.setDefaults( $.datepicker.regional.ru );


    $( ".datepicker-multiple" ).datepicker({
            numberOfMonths: 3,
        });

.calendars-wrap .ui-widget.ui-widget-content {
  border: none;
}


.calendars-wrap .ui-datepicker-inline {
  width: 100% !important;
  display: flex;
  justify-content: space-between;
}


.calendars-wrap .calendars-wrap .ui-widget.ui-widget-content {
  border: none;
}

.calendars-wrap .ui-datepicker-multi-3 .ui-datepicker-group {

  &:last-child {
    margin-right: 0;
  }
}

.calendars-wrap .datepicker-multiple .ui-widget.ui-widget-content {
  display: flex !important;
  width: 100% !important;
}

.calendars-wrap .ui-datepicker-row-break {
  display: none;
}

.calendars-wrap .ui-datepicker-multi-3 .ui-datepicker-group:nth-child(1) {
  margin-right: 48px;
}

.calendars-wrap .ui-datepicker-multi-3 .ui-datepicker-group:nth-child(2) {
  margin-right: 48px;
}


.calendars-wrap {
  margin-top: 99px;
}

.ui-widget-header {
  background: none;
  border: none;
  margin-bottom: 44px;
}

.calendars-wrap .ui-widget-header {
  background: none;
  border: none;
  margin-bottom: 44px;
}

.calendars-wrap .ui-datepicker .ui-datepicker-title {
  font-family: $Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 26px;
  line-height: 32px;
  color: #151515;
}

.ui-datepicker th {
  font-family: $Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: #9B9B9B;
  text-transform: lowercase;
  padding: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(155, 155, 155, 0.3);
}

.calendars-wrap .ui-datepicker th {
  font-family: $Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: #9B9B9B;
  text-transform: lowercase;
  padding: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(155, 155, 155, 0.3);
}

.calendars-wrap .ui-datepicker-calendar tbody tr:first-child td {
  padding-top: 30px;
}

.ui-datepicker td {
  height: 28px;
  padding-bottom: 13px;
  background: none;
}

.calendars-wrap .ui-datepicker td {
  height: 28px;
  padding-bottom: 13px;
  background: none;
}

.ui-state-default {
  background: none !important;
  border: none !important;
  font-family: $Roboto ;
  font-style: normal;
  font-weight: bold !important;
  font-size: 14px;
  line-height: 16px;
  color: #151515 !important;
  text-align: center !important;
}

.calendars-wrap .ui-state-default {
  background: none !important;
  border: none !important;
  font-family: $Roboto ;
  font-style: normal;
  font-weight: bold !important;
  font-size: 14px;
  line-height: 16px;
  color: #151515 !important;
  text-align: center !important;
}

.calendars-wrap .ui-datepicker-today {
  position: relative;

  
}

.calendars-wrap .ui-datepicker-today:after {
    content: "";
    position: absolute;
    top: 33%;
    left: 52%;
    transform: translate(-50%,  -50%);
    width: 36px;
    height: 36px;
    background: #C0964C;
    border-radius: 50%;
  }

.calendars-wrap .ui-datepicker-today  a {
    position: relative;
    z-index: 1;
    color: #fff !important;
  }


/*.calendars-wrap .ui-icon-circle-triangle-w {
  display: block;
  width: 10px;
  height: 10px;
  background-image: url('../img/al.svg') !important;
}

.calendars-wrap .ui-widget-header .ui-icon {
  background-image: url('../img/al.svg') !important;
}

.calendars-wrap .ui-datepicker .ui-datepicker-prev {
  background-image: url('../img/al.svg') !important;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}*/


.calendars-wrap .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
  background-color: #fff;
  border: none;
}

.calendars-wrap .ui-datepicker .ui-datepicker-next {
 /* background-image: url('../img/al.svg') !important;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;*/
  transform: rotate(180deg);
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="theme-color" content="#ffffff">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    
    <div class="calendars-wrap">
        <div class="datepicker-multiple"></div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="scripts.js"></script>
</body>
</html>

任务有点难。有一个基于 UI 数据选择器插件的日历。它应该显示在页面上，没有用户交互的可能性。需要显示空闲日期。根据我的想法，日期将来自 WP 管理员。任务是获取这些日期，并根据它们绘制这个（从 5 月 6 日到 5 月 15 日）：

并且可以有几个这样的日期和不同的月份......请帮我解决这个问题。

1 个回答

Voted

teran · Answer 1 · 2020-05-20T18:41:39Z

使用事件检查日期是否落入可用间隔（ranges示例中的数组）beforeShowDate并添加必要的类。好吧，实际上根据需要重新定义样式。

const cd = new Date();
const range = [{ 
        s: new Date(cd.getFullYear(), cd.getMonth(), 5), 
        e: new Date(cd.getFullYear(), cd.getMonth(), 15)}
      ];

$( ".datepicker" ).datepicker({          
  beforeShowDay: function(d){        
        let cls = range.reduce(function(cls,v){                     
                     if(d.getTime() >= v.s.getTime() && 
                        d.getTime() <= v.e.getTime()) cls.push("p-inside");
                     if(d.getTime() == v.s.getTime()) cls.push('p-start');
                     if(d.getTime() == v.e.getTime()) cls.push('p-end');
                        
                     return cls; 
                  }, []);            
        return [true, cls.join(' '), null];
     }
});

.p-inside a { color: blue !important; }
.p-start a  { color: red !important; }
.p-end a    { color: red !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="datepicker"></div>

如何在 jquery UI datapicker 中绘制两个日期之间的差距？

如何从列表中打印最大元素（str 类型）的长度？

如何在 PyQT5 中清除 QFrame 的内容

如何将具有特定字符的字符串拆分为两个不同的列表？

导航栏活动元素

是否可以将文本放入数组中？[关闭]

如何一次用多个分隔符拆分字符串？

如何通过 ClassPath 创建 InputStream？

在一个查询中连接多个表

对列表列表中的所有值求和

如何对齐 string.Format 中的列？

如何在 jquery UI datapicker 中绘制两个日期之间的差距？

1 个回答

相关问题