datatimepicker c разделением расписания времени на am и pm

150
17 июня 2019, 07:40

Есть подобный календарь+расписание. Расписание разделено на "утро" и "день". Некоторое время расписания должно быть недоступно (белым закрашено) как и дни календаря:

Использую datetimepicker:

$.datetimepicker.setLocale('ru'); 
$('#datetimepicker').datetimepicker({ 
  inline:true, 
  lang:'ru', 
  disabledDates:['2018/12/18','2018/12/04','2018/12/10'],             
  dayOfWeekStart: 1, 
});
* { 
  box-sizing:border-box; 
} 
 
.xdsoft_datetimepicker { 
  background: #fff; 
  border:none; 
  color: #333; 
  padding: 0px; 
  position: absolute; 
  z-index: 9999; 
  display: none; 
} 
 
 
.xdsoft_datetimepicker iframe { 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 75px; 
  height: 210px; 
  background: transparent; 
  border: none; 
} 
 
/*For IE8 or lower*/ 
.xdsoft_datetimepicker button { 
  border: none !important; 
} 
 
.xdsoft_noselect { 
  -webkit-touch-callout: none; 
  -webkit-user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  -o-user-select: none; 
  user-select: none; 
} 
 
.xdsoft_noselect::selection { background: transparent } 
.xdsoft_noselect::-moz-selection { background: transparent } 
 
.xdsoft_datetimepicker.xdsoft_inline { 
  display: block; 
  position: static; 
  box-shadow: none; 
} 
 
.xdsoft_datetimepicker * { 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  padding: 0; 
  margin: 0; 
} 
 
.xdsoft_datetimepicker .xdsoft_datepicker, .xdsoft_datetimepicker .xdsoft_timepicker { 
  display: none; 
} 
 
.xdsoft_datetimepicker .xdsoft_datepicker.active, .xdsoft_datetimepicker .xdsoft_timepicker.active { 
  display: block; 
} 
 
.xdsoft_datetimepicker .xdsoft_datepicker { 
  width: 100%; 
  margin-bottom: 60px; 
} 
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_datepicker { 
  float: right; 
  margin-right: 8px; 
  margin-left: 0; 
} 
 
 
 
.xdsoft_datetimepicker .xdsoft_timepicker { 
  margin-bottom: 40px; 
 
  padding-top: 50px; 
  position: relative; 
} 
 
 
 
.xdsoft_datetimepicker .xdsoft_timepicker:before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 16px !important; 
} 
 
 
 
.xdsoft_datetimepicker .xdsoft_monthpicker { 
  position: relative; 
  text-align: center; 
} 
 
.xdsoft_datetimepicker .xdsoft_label i, 
.xdsoft_datetimepicker .xdsoft_prev, 
.xdsoft_datetimepicker .xdsoft_next, 
.xdsoft_datetimepicker .xdsoft_today_button { 
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0NBRjI1NjM0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0NBRjI1NjQ0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQ0FGMjU2MTQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQ0FGMjU2MjQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoNEP54AAAIOSURBVHja7Jq9TsMwEMcxrZD4WpBYeKUCe+kTMCACHZh4BFfHO/AAIHZGFhYkBBsSEqxsLCAgXKhbXYOTxh9pfJVP+qutnZ5s/5Lz2Y5I03QhWji2GIcgAokWgfCxNvcOCCGKqiSqhUp0laHOne05vdEyGMfkdxJDVjgwDlEQgYQBgx+ULJaWSXXS6r/ER5FBVR8VfGftTKcITNs+a1XpcFoExREIDF14AVIFxgQUS+h520cdud6wNkC0UBw6BCO/HoCYwBhD8QCkQ/x1mwDyD4plh4D6DDV0TAGyo4HcawLIBBSLDkHeH0Mg2yVP3l4TQMZQDDsEOl/MgHQqhMNuE0D+oBh0CIr8MAKyazBH9WyBuKxDWgbXfjNf32TZ1KWm/Ap1oSk/R53UtQ5xTh3LUlMmT8gt6g51Q9p+SobxgJQ/qmsfZhWywGFSl0yBjCLJCMgXail3b7+rumdVJ2YRss4cN+r6qAHDkPWjPjdJCF4n9RmAD/V9A/Wp4NQassDjwlB6XBiCxcJQWmZZb8THFilfy/lfrTvLghq2TqTHrRMTKNJ0sIhdo15RT+RpyWwFdY96UZ/LdQKBGjcXpcc1AlSFEfLmouD+1knuxBDUVrvOBmoOC/rEcN7OQxKVeJTCiAdUzUJhA2Oez9QTkp72OTVcxDcXY8iKNkxGAJXmJCOQwOa6dhyXsOa6XwEGAKdeb5ET3rQdAAAAAElFTkSuQmCC); 
} 
 
.xdsoft_datetimepicker .xdsoft_label i { 
  opacity: 0.5; 
  background-position: -92px -19px; 
  display: inline-block; 
  width: 9px; 
  height: 20px; 
  vertical-align: middle; 
 
  display: none; 
} 
 
.xdsoft_datetimepicker .xdsoft_prev { 
  float: left; 
  background-position: -20px 0; 
} 
 
.xdsoft_monthpicker .xdsoft_prev, 
.xdsoft_monthpicker .xdsoft_next { 
  position: absolute !important; 
  top:50%; 
  float: none; 
  margin-top: -15px; 
  background: transparent; 
  opacity: 1 !important; 
} 
 
.xdsoft_monthpicker .xdsoft_prev:before, 
.xdsoft_monthpicker .xdsoft_next:before { 
  content: "chevron_right"; 
  position: absolute; 
  top: 0; 
  left: 0; 
  font-family: 'Material Icons'; 
  font-style: normal; 
  font-weight: 400; 
  font-size: 18px; 
  line-height: 18px; 
  border: none; 
  width: 18px; 
  height: 18px; 
} 
 
.xdsoft_monthpicker { 
  padding-left: 30px; 
  padding-right: 30px; 
  text-align: center; 
} 
 
.xdsoft_monthpicker .xdsoft_prev { 
  left: 0; 
} 
 
.xdsoft_monthpicker .xdsoft_next { 
  right: 0; 
} 
 
.xdsoft_datetimepicker .xdsoft_today_button { 
  float: left; 
  background-position: -70px 0; 
  margin-left: 5px; 
 
  display: none !important; 
} 
 
.xdsoft_datetimepicker .xdsoft_next { 
  float: right; 
  background-position: 0 0; 
} 
 
.xdsoft_datetimepicker .xdsoft_next, 
.xdsoft_datetimepicker .xdsoft_prev , 
.xdsoft_datetimepicker .xdsoft_today_button { 
  background-color: transparent; 
  background-repeat: no-repeat; 
  border: 0 none; 
  cursor: pointer; 
  display: block; 
  height: 30px; 
  opacity: 0.5; 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
  outline: medium none; 
  overflow: hidden; 
  padding: 0; 
  position: relative; 
  text-indent: 100%; 
  white-space: nowrap; 
  width: 20px; 
  min-width: 0; 
} 
 
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev, 
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next { 
  float: none; 
  background-position: -40px -15px; 
  height: 15px; 
  width: 30px; 
  display: block; 
  margin-left: 14px; 
  margin-top: 7px; 
 
  display: none; 
} 
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_prev, 
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_next { 
  float: none; 
  margin-left: 0; 
  margin-right: 14px; 
} 
 
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev { 
  background-position: -40px 0; 
  margin-bottom: 7px; 
  margin-top: 0; 
} 
 
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box { 
  height:auto; 
  overflow: hidden; 
  border-bottom: none; 
} 
 
.xdsoft_time_variant { 
  display: -webkit-flex; 
  display: -moz-flex; 
  display: -ms-flex; 
  display: -o-flex; 
  display: flex; 
 
  -webkit-flex-wrap: wrap; 
  -moz-flex-wrap: wrap; 
  -ms-flex-wrap: wrap; 
  -o-flex-wrap: wrap; 
  flex-wrap: wrap; 
 
 
} 
 
.xdsoft_time_box.xdsoft_scroller_box { 
  margin-left: -5px; 
  margin-right: -6px; 
} 
 
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div { 
  background: transparent; 
  border: 1px solid #888; 
  color:#888; 
  font-size: 16px; 
  border-radius:5px; 
  text-align: center; 
  border-collapse: collapse; 
  cursor: pointer; 
  height: 42px; 
  line-height: 42px; 
  width: 86px; 
  margin-bottom: 15px; 
 
  margin-left: 5px; 
  margin-right: 5px; 
} 
 
 
 
.xdsoft_datetimepicker .xdsoft_today_button:hover, 
.xdsoft_datetimepicker .xdsoft_next:hover, 
.xdsoft_datetimepicker .xdsoft_prev:hover { 
  opacity: 1; 
} 
 
.xdsoft_datetimepicker .xdsoft_label { 
  display: block; 
  position: relative; 
  z-index: 9999; 
  margin: 0; 
  font-size: 24px; 
  line-height: 24px; 
  font-family: Arial, sans-serif; 
 
  font-weight: 200; 
  background-color: #fff; 
  text-align: center; 
  cursor: pointer; 
  color: #000; 
} 
 
.xdsoft_datetimepicker .xdsoft_label:hover>span { 
  text-decoration: underline; 
} 
 
.xdsoft_datetimepicker .xdsoft_label:hover i { 
  opacity: 1.0; 
} 
 
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select { 
  border: 1px solid #ccc; 
  position: absolute; 
  right: 0; 
  left: 0; 
  top: 50px; 
  z-index: 101; 
  display: none; 
  background: #fff; 
  max-height: 160px; 
  overflow-y: hidden; 
} 
 
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect{ right: -7px } 
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_yearselect{ right: 2px } 
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover { 
  color: #fff; 
  background: #ff8000; 
} 
 
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option { 
  padding: 2px 10px 2px 5px; 
  text-decoration: none !important; 
} 
 
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current { 
  background: #33aaff; 
  box-shadow: #178fe5 0 1px 3px 0 inset; 
  color: #fff; 
  font-weight: 700; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar { 
  clear: both; 
} 
 
.xdsoft_datetimepicker .xdsoft_year{ 
  font-size: 14px; 
  line-height: 24px; 
  color: #8ca6b4; 
  font-weight: normal; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar table { 
  border-collapse: collapse; 
  width: 100%; 
 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar td > div { 
  width: 42px; 
  height: 40px; 
  line-height: 40px; 
  border:1px solid transparent; 
  border-radius: 5px; 
  margin: auto; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar th { 
  height: 25px; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar td, 
.xdsoft_datetimepicker .xdsoft_calendar th { 
  width: 14.2857142%; 
  background: transparent; 
  border: 1px solid transparent; 
  color: #000; 
  font-size: 16px; 
  text-align: center; 
  vertical-align: middle; 
  padding: 0; 
  border-collapse: collapse; 
  cursor: pointer; 
  height: 40px; 
} 
.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td, 
.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th { 
  width: 12.5%; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar th { 
  background: transparent; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { 
  color: #33aaff; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default { 
  background: #ffe9d2; 
  box-shadow: #ffb871 0 1px 4px 0 inset; 
  color: #000; 
} 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_mint { 
  background: #c1ffc9; 
  box-shadow: #00dd1c 0 1px 4px 0 inset; 
  color: #000; 
} 
 
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover { 
  color: #000; 
  background: transparent; 
  border-color: orangered; 
} 
 
.xdsoft_datetimepicker .xdsoft_time.xdsoft_current:hover, 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current:hover>div, 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default>div, 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current>div, 
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current { 
   
  color: 000; 
  font-weight: normal; 
 
  width: 42px; 
  margin: auto; 
  height: 40px; 
  line-height: 40px; 
  border-radius: 5px; 
 
} 
 
 
 
.xdsoft_datetimepicker .xdsoft_time.xdsoft_current:hover, 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current:hover>div, 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default>div, 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current>div, 
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current { 
  border: 1px solid orangered; 
} 
 
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current { 
  height: 42px; 
  line-height: 42px; 
  width: 86px; 
  margin: 0px 5px 15px; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover div, 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled div, 
.xdsoft_datetimepicker .xdsoft_time_box >div >div.xdsoft_disabled, 
.xdsoft_datetimepicker .xdsoft_time_box >div >div.xdsoft_disabled:hover { 
  opacity: 1; 
  cursor: default; 
 
  border: 1px solid #888; 
  color: #000; 
  position: relative; 
  overflow: hidden; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled div:after, 
.xdsoft_datetimepicker .xdsoft_time_box >div >div.xdsoft_disabled:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
 
  background:#eee; 
  opacity: .5; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar th:nth-of-type(6), 
.xdsoft_datetimepicker .xdsoft_calendar th:nth-of-type(7), 
.xdsoft_date.xdsoft_weekend>div { 
  color: #000; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled { 
  opacity: 0.2; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar td:hover>div{ 
  border-color: #000; 
} 
 
 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover, 
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current.xdsoft_disabled:hover { 
  background: #33aaff !important; 
  color: #fff !important; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover, 
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_disabled:hover { 
  color: inherit	!important; 
  background: inherit !important; 
  box-shadow: inherit !important; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar th { 
  font-weight: 900; 
  text-align: center; 
  color: #58627c; 
  cursor: default; 
  font-size: 12px; 
} 
 
.xdsoft_datetimepicker .xdsoft_copyright { 
  color: #ccc !important; 
  font-size: 10px; 
  clear: both; 
  float: none; 
  margin-left: 8px; 
} 
 
.xdsoft_datetimepicker .xdsoft_copyright a { color: #eee !important } 
.xdsoft_datetimepicker .xdsoft_copyright a:hover { color: #aaa !important } 
 
.xdsoft_time_box { 
  position: relative; 
  border: none; 
} 
.xdsoft_scrollbar >.xdsoft_scroller { 
  background: #ccc !important; 
  height: 20px; 
  border-radius: 3px; 
} 
.xdsoft_scrollbar { 
  position: absolute; 
  width: 7px; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  cursor: pointer; 
 
  display: none; 
} 
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_scrollbar { 
  left: 0; 
  right: auto; 
} 
.xdsoft_scroller_box { 
  position: relative; 
} 
 
 
 
.xdsoft_today_button { 
  display: none; 
} 
 
.xdsoft_datetimepicker .xdsoft_calendar th:nth-of-type(6), .xdsoft_datetimepicker .xdsoft_calendar th:nth-of-type(7), .xdsoft_date.xdsoft_weekend>div { 
    color: #ed484f; 
} 
 
.xdsoft_datetimepicker .xdsoft_timepicker:before, .hr { 
    height: 66px; 
    margin: 10px 0; 
    border: none; 
    /* background: #bdccd4; */ 
    background: #ccc;  
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
  rel="stylesheet"> 
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script> 
 
 
<div class="person-date"> 
  <input type="text" id="datetimepicker"/> 
</div>

jsbin

Вопрос: Как разделить расписание на "утро" и "день" (если правильно понимаю на AM и PM) и как задать некоторое время из расписания недоступным xdsoft_disabled?

Может быть кто-то сталкивался с подобным data+timepicker.

READ ALSO
Kак решить задачу пользователь начинает скролить перенести его во вторую секцию http://genrich.ru/holmhill2/ ,как это првильно сделать? [закрыт]

Kак решить задачу пользователь начинает скролить перенести его во вторую секцию http://genrich.ru/holmhill2/ ,как это првильно сделать? [закрыт]

как решить задачу года пользователь начинает скролить пренести его во вторую секцию http://genrichru/holmhill2/ ,тут с костылями ,как это првильно сделать...

113
JS не видит переменную, переданную через res.send

JS не видит переменную, переданную через res.send

На сервере передаю переменную

131
Как циклом вывести статьи?

Как циклом вывести статьи?

У меня есть JSON что приходит по API (Screen)

117
Как зациклить .png фон по вертикали?

Как зациклить .png фон по вертикали?

Здравствуйте! Имеется некоторый фон, его я прикрепилНеобходимо сделать так, чтобы он, выходя за границу своего максимального значения по вертикали,...

131