src/Elements/Bundle/DemiFrontendBundle/Resources/views/Includes/overlays/date-range.html.twig line 1

Open in your IDE?
  1. <script type="text/javascript" data-cookieconsent="ignore">
  2.     _config.rangeDatepicker = true;
  3.     _config.dateRangeOverlay = true;
  4. </script>
  6. {% if housePackageContainer is defined and tvbPackage is not defined %}
  7.     {% set tvbPackage = housePackageContainer %}
  8. {% endif %}
  9. {% set isTVB = tvbPackage is defined ? true : false %}
  11. <div id="date-overlay" class="overlay js-overlay js-date-range-overlay"
  12.     tabindex="-1"
  13.      role="dialog"
  14.      aria-label="{{ 'demi.search.choose-nights'|trans }}"
  15.     aria-hidden="true">
  17.     <form action="" class="js-booking-form">
  18.         {{ include('@ElementsDemiFrontend/Includes/overlays/sections/header.html.twig') }}
  20.         <div class="overlay__content">
  21.             <div class="ribbon mb-4 row row--gutter-width-1 bg-white">
  22.                 <div class="col">
  23.                     <div class="ribbon__item ribbon__item--date js-range-datepicker__from_container success">
  24.                         <div>
  25.                             {{ "demi.search.arrival"|trans }}
  26.                         </div>
  27.                         <div class="ribbon__title js-date-range-overlay__from-date-text">
  28.                             {% set anreise = carbon().create() %}
  29.                             {{ elements_dateFormat(anreise, 'date-long') }}
  30.                         </div>
  31.                         <div class="js-date-range-overlay__from-day-text">
  32.                             {{ anreise|date('%a') }}
  33.                         </div>
  34.                     </div>
  35.                 </div>
  36.                 {% if not isTVB %}
  37.                 <div class="col col-auto d-flex">
  38.                     <div class="ribbon__item ribbon__item--nights ribbon__item--has-flag text-center js-date-range-overlay__nights-container">
  39.                         <div class="ribbon__title js-date-range-overlay__nights-count">
  40.                             1
  41.                         </div>
  42.                         <div class="js-date-range-overlay__nights-text">
  43.                             {{ "demi.night"|trans }}
  44.                         </div>
  45.                     </div>
  46.                 </div>
  47.                 <div class="col">
  48.                     <div class="ribbon__item ribbon__item--date text-right js-date-range-overlay__to-container">
  49.                         <div>
  50.                             {{ "demi.search.departure"|trans }}
  51.                         </div>
  52.                         <div class="ribbon__title js-date-range-overlay__to-date-text">
  53.                             {% set abreise = carbon().create().addDay(7) %}
  54.                             {{ elements_dateFormat(abreise, 'date-long') }}
  55.                         </div>
  56.                         <div class="js-date-range-overlay__to-day-text">
  57.                             {{ abreise|date('%a') }}
  58.                         </div>
  59.                     </div>
  60.                 </div>
  61.                 {% endif %}
  62.             </div>
  64.             <div class="container">
  65.                 {% if isTVB %}
  66.                     <script type="text/javascript" data-cookieconsent="ignore">
  67.                         _config.datepicker = true;
  68.                     </script>
  69.                     {% set nextArivalDay = demi_getNextPossibleArrivalDay(tvbPackage) %}
  70.                     <div class="js-datepicker">
  71.                         <div class="js-datepicker__input js-date-range-overlay__datepicker" data-available-ranges="jep" data-datepicker-min-date="{{ nextArivalDay ? elements_customDateFormat(nextArivalDay) : '' }}">
  72.                             <input type="hidden" class="js-datepicker__alt-field" name="from" value="{{ elements_customDateFormat(anreise) }}">
  73.                         </div>
  74.                     </div>
  75.                 {% else %}
  76.                     <div class="js-range-datepicker js-date-range-overlay__datepicker datepicker--range">
  77.                         <input type="hidden" class="js-range-datepicker__from" name="from" value="">
  78.                         <input type="hidden" class="js-range-datepicker__to" name="to" value="">
  79.                         <div class="js-range-datepicker__picker"></div>
  80.                     </div>
  81.                 {% endif %}
  83.                 <div class="js-date-range-overlay__range-messages mt-4"></div>
  85.                 <div class="mt-4">
  86.                     <div class="js-date-range-overlay__arrival-msg text-center">
  87.                         <span class="demi-icon icon-in-text demi-icon-info-circle text-muted"></span>
  88.                         {{ "demi.search.select-arrival" | trans }}
  89.                     </div>
  90.                     <div class="js-date-range-overlay__departure-msg text-center" hidden>
  91.                         <span class="demi-icon icon-in-text demi-icon-info-circle text-muted"></span>
  92.                         {{ "demi.search.select-departure" | trans }}
  93.                     </div>
  94.                     <div class="js-date-range-overlay__submit text-right" hidden>
  95.                         <button type="button" class="btn btn-primary js-overlay__commit">
  96.                             {{ "demi.ok" | trans }}
  97.                         </button>
  98.                     </div>
  99.                 </div>
  100.             </div>
  101.         </div>
  102.     </form>
  103. </div>