CODEWITHSUNDEEP
javascripthtmlcsscalendar
Peter Mihok
Peter Mihok

Reputation: 47

HTML,CSS,JS calendar adding

I have this search bar here on my web page, but when I click on the calendar nothing happens, do you know what should I add there, so the calendar would pop up somehow?

search bar

Also here is a script for the search bar:

    <!-- Search -->
        <script>
        $(window).ready(function(){
              var nowTemp = new Date();
              var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
              var checkin = $('#checkin').datepicker({
                onRender: function(date) {
                  return date.valueOf() < now.valueOf() ? 'disabled' : '';
                }
              }).on('changeDate', function(ev) {
                if (ev.date.valueOf() > checkout.date.valueOf()) {
                  var newDate = new Date(ev.date)
                  newDate.setDate(newDate.getDate() + 1);
                  checkout.setValue(newDate);
                }
                checkin.hide();
                $('#checkout')[0].focus();
              }).data('datepicker');
              var checkout = $('#checkout').datepicker({
                onRender: function(date) {
                  return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
                }
              }).on('changeDate', function(ev) {
                checkout.hide();
              }).data('datepicker');
            });
        </script>

Here it's one div for check in for example and there is also this calendar, but it's only glyphicon:

<div class="input-group">
   <input type="text" class="form-control" id="checkin" placeholder="Check in">
   <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>

I'm not sure if this is enough for helping me, if it's not I will just add more code.

Thanks in advance!

Upvotes: 0

Views: 380

Answers (1)

user3828351
user3828351

Reputation: 21

Jquery ui can help you. Here is the solution: https://jqueryui.com/datepicker/#icon-trigger

Upvotes: 1

Related Questions