Set current date for bootstrap calendar

Question

I'll have a restaurant reservation form with a date and time selection.

Now I have connected the bootstrap calendar here, everything works as it should and without problems.

The only thing I want is that initially when you go to the page where this form will be, the current day is automatically selected.

Now, when you click on the button, it shows the current day there, but it needs to be applied automatically.

I have a button, I renamed it to "click", when you press it, it opens the calendar and when you select the button, the date becomes, and I need the current date to be there automatically.

How can i do this?

I need to use datepicker('getDate') or something like this?

let restaurantReserve = {
  init: function() {
    let _self = this;

    $('#reservation-date').datepicker({
      startDate: '+0d'
    }).on('changeDate', function(e) {
      const arDate = e.date.toString().split(' ');
      $('#dayofweek').val(arDate[0]);
      filterTimes();
      let input = $('[name="RestaurantReservationForm[date]"]');
      input.val(arDate[3] + '-' + (e.date.getMonth() + 1) + '-' + arDate[2]);
      _self.unSetError(input);
      $('#reservation-date .js-value').text(arDate[2] + ' ' + arDate[1]);
    });

    $('[aria-labelledby="reservation-time"] li a').click(function() {
      $(this).closest('ul').find('a').removeClass('active');
      $(this).addClass('active');
      let input = $('[name="RestaurantReservationForm[time]"]');
      input.val($(this).data('value'));
      _self.unSetError(input);
      $('#reservation-time .js-value').text($(this).text());
    });
  },
  setError: function(ob) {
    $('#' + ob.data('btnId')).addClass('btn-error');
  },
  unSetError: function(ob) {
    $('#' + ob.data('btnId')).removeClass('btn-error');
  }
}
restaurantReserve.init();
let json = [{
  "id": 86,
  "restaurant_id": 1,
  "day": "Mon",
  "open": "4.30",
  "close": "6.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 87,
  "restaurant_id": 1,
  "day": "Tue",
  "open": "4.30",
  "close": "6.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 88,
  "restaurant_id": 1,
  "day": "Wed",
  "open": "4.30",
  "close": "6.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 89,
  "restaurant_id": 1,
  "day": "Thu",
  "open": "4.30",
  "close": "6.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 90,
  "restaurant_id": 1,
  "day": "Fri",
  "open": "4.30",
  "close": "6.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 91,
  "restaurant_id": 1,
  "day": "Sat",
  "open": "4.30",
  "close": "6.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 92,
  "restaurant_id": 1,
  "day": "Sun",
  "open": "4.30",
  "close": "6.30",
  "created_at": "2022-02-22 10:56:15"
}];

function getWorkHours(json, restaurant_id) {
  return json.filter(item => item.restaurant_id == restaurant_id);
}

function getWorkHoursForDay(json, restaurant_id, day) {
  return getWorkHours(json, restaurant_id).filter(item => item.day === day)[0];
}

function filterTimes() {
  let restaurantID = 1;
  let dayofweek = document.getElementById("dayofweek").value;
  if ((["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].indexOf(dayofweek)) >= 0) {
    let workHours = getWorkHoursForDay(json, restaurantID, dayofweek);
    let items = document.querySelectorAll(".dropdown-menu.dropdown-menu-height-fixed li a");
    for (let item of items) {
      let itemValueParts = item.innerText.split(" ");
      itemValue = parseFloat(itemValueParts[0]) + (((itemValueParts[1] === "PM") && (itemValueParts[0] !== "00.00")) ? 12 : 0);
      item.parentNode.classList[((itemValue < parseFloat(workHours.open)) || (itemValue > parseFloat(workHours.close)) ? "add" : "remove")]("invisible");
    }
  }
}

.btn {
  border: none;
  border-radius: 8px;
  height: 40px;
  padding: 10px 15px;
  font-weight: 800;
  font-size: 14px;
  margin-right: 10px;
  cursor: pointer;
}

.btn-fourth {
  text-decoration: none;
  background: #e3e5e8;
  color: #747b8b;
}

.invisible {
  display: none;
}

ul.with-out>li:before,
.dropdown-menu li:before,
ul.whithout>li:before {
  display: none;
}

.dropdown-menu li {
  padding: 0;
}

.dropdown-menu-height-fixed {
  max-height: 200px;
  overflow-y: auto;
}

.dropdown-item.active,
.dropdown-item:active {
  background: red;
}

.block-shadow {
  box-shadow: 0 2px 8px 0 rgba(32, 35, 44, 0.05);
}

.block-white {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<form id="reservation" action="/restaurants/123/" method="post">
  <div class="block-shadow block-white mb-4">
    <h5 class="fw-bold mb-3">Reserve a table</h5>
    <div class="btn-s">
      <a class="btn btn-fourth " id="reservation-date" data-date=">">
        <span class="icon br-calender"></span> <span class="js-value">click</span>
      </a>
      
      <select id="dayofweek" onchange="filterTimes()">
        <option>Please Select Day</option>
        <option value="Mon">Mon</option>
        <option value="Tue">Tue</option>
        <option value="Wed">Wed</option>
        <option value="Thu">Thu</option>
        <option value="Fri">Fri</option>
        <option value="Sat">Sat</option>
        <option value="Sun">Sun</option>
      </select>
      
      <ul class="dropdown-menu dropdown-menu-height-fixed" aria-labelledby="reservation-time">
        <li><a class="dropdown-item " href="#" data-value="4.30">04.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="5.00">05.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="5.30">05.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="6.00">06.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="6.30">06.30 AM</a></li>
      </ul>
    </div>
    
    <div class="form-group field-restaurantreservationform-date required">
      <input type="hidden" id="restaurantreservationform-date" class="form-control" name="RestaurantReservationForm[date]" data-btn-id="reservation-date">
    </div>
    
    <div class="form-group field-restaurantreservationform-time">
      <input type="hidden" id="restaurantreservationform-time" class="form-control" name="RestaurantReservationForm[time]" data-btn-id="reservation-time">
    </div>

Elissi · Answer 1 · 2022-04-13T19:04:32.627

0

Add this in your script. The load function (or whatever name you give it) is here called upon once the window has loaded.

function load() {
  // stuff that should happen once the window has loaded
} 
window.onload = load();

JQuery:

$( window ).on( "load", load() );

edited Apr 13 '22 at 19:04

answered Apr 13 '22 at 18:57

Elissi

312
2
8

kmoser · Answer 2 · 2022-04-17T15:36:44.380

0

You can determine the current weekday and select the corresponding dropdown item.

Reference: https://stackoverflow.com/a/65588812/378779

$(document).ready(function() {
    $('a.btn').click(function() {
        let day = (new Date()).toLocaleString('en-us', {weekday: 'short'}); // E.g. 'Sat'
        $(`#dayofweek option[value="${day}"]`).attr('selected', true);
        // Might also need to call filterTimes() here
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a class="btn btn-fourth">Click</a>

<select id="dayofweek">
    <option>Please Select Day</option>
    <option value="Mon">Mon</option>
    <option value="Tue">Tue</option>
    <option value="Wed">Wed</option>
    <option value="Thu">Thu</option>
    <option value="Fri">Fri</option>
    <option value="Sat">Sat</option>
    <option value="Sun">Sun</option>
</select>

edited Apr 17 '22 at 15:36

answered Apr 16 '22 at 19:35

kmoser

8,780
3
24
40

I tried it, it doesn't work, can you please show how it works using an example in a snippet? – Apr 17 '22 at 15:15
@AJ_ I've edited my answer to include a working snippet. – kmoser Apr 17 '22 at 15:25
sorry, you probably misunderstood the question, I have a button, I renamed it to "click", when you press it, it opens the calendar and when you select the button, the date becomes, and I need the current date to be there automatically – Apr 17 '22 at 15:31
@AJ_ So when you click the button, it should change the `daysofweek` dropdown? I've edited my answer again. – kmoser Apr 17 '22 at 15:37
`daysofweek ` changes, everything is fine with him, i just need to select the current date in the calendar and stand – Apr 17 '22 at 15:47
@AJ_ Your code is working fine. You just can't see the datepicker because the `` element is too small to show the calendar. You need to put the calendar in another element, e.g. `
` (and remove `id="reservation-date"` from the `` tag). – kmoser Apr 17 '22 at 16:19
apparently, you just need to click on the full page – Apr 17 '22 at 16:45

Set current date for bootstrap calendar

2 Answers2