Expanded calendar in modal

Question

I have a modal with some information in it and with a button click I want to replace this information with an expanded calendar in order for the user to select a date. So to be more particular the first text is GDPR agreement where the user must click I agree and then the modal body must be replaced with an opened calendar where the user must select his date of birth. Then if user is > 18 years old the login screen appears. But I cannot display the opened calendar. Here is my code:

MODAL

<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel"
                         aria-hidden="true" style="width:100%;">
                        <div class="modal-dialog modal-sm" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body" id="smallBody">
                                    <div id="gdprtext">
                                        <h4 style="color:#1A1055; text-align: center;">GDPR Text</h4>
                                        texttexttext ....
                                    </div>
                                    <input id="#datepicker" type="date" >
                                </div>
                                <div class="my-modal-footer" >
                                    <div style="display: flex; justify-content: flex-start; margin-left:10px;">
                                        <label for="gdprchk" >
                                            <input type="checkbox"  id="gdprchk"  required style="margin-right:10px;">Δέχομαι
                                        </label>
                                    </div>
                                    <div style="display: flex; justify-content: center;">
                                        <button type="button" id="acceptbtn" style="background-color: #1A1055; color:white; margin-bottom: 10px;">ΑΠΟΔΟΧΗ</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

Javascript

<script>
    // display a modal (small modal)
    $( document ).ready(function(event) {
        $('#smallModal').modal("show");
        $('#datepicker').css("display", "none");
        $('#acceptbtn').prop("disabled", true);

        $('#gdprchk').on('change', function(e) {
            e.stopImmediatePropagation();
            if(this.checked){
                $('#acceptbtn').prop("disabled", false);
                $('#gdpr').val(true);
            }
            else{
                $('#acceptbtn').prop("disabled", true);
                $('#gdpr').val(false);
            }
        });

        $('#acceptbtn').on('click', function() {
           
            $('#gdprtext').hide();
            $("#datepicker").css("display", "block");

            $('.my-modal-footer').hide();
        });

    });


</script>

Scripts and css

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">



    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <!-- Script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' type='text/javascript'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

UPDATE After fix provided by Swati in comments I managed to display the field but I want to show the calendar expanded. How I can achieve that?

aaahh! thank you! But how I can show it expanded? and not like a field — netdev, May 31 '21 at 13:39

Bernhard Beatus · Accepted Answer · 2021-06-01T13:58:10.303

This should work:

$('#acceptbtn').prop("disabled", true);
$('#gdprchk').change(function() {
  if (this.checked) {
    $('#acceptbtn').prop("disabled", false);
    $('#gdpr').val(true);
  } else {
    $('#acceptbtn').prop("disabled", "disabled");
    $('#gdpr').val(false);
  }
});

$('#acceptbtn').on('click', function() {
  $('#gdprtext').hide();
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    themeSystem: 'bootstrap',
    headerToolbar: {
      start: 'title', // will normally be on the left. if RTL, will be on the right
      center: '',
      end: 'prevYear prev,next nextYear' // will normally be on the right. if RTL, will be on the left
    },
    dateClick: function(info) {
      alert('Clicked on: ' + info.dateStr);
      info.dayEl.style.backgroundColor = 'red';
    }
  });

  calendar.render();
  $('#calendar').css("display", "block");
  $('.my-modal-footer').hide();
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.1/css/all.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.0/main.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.0/main.min.js"></script>
<div class="modal-dialog modal-xl" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body" id="smallBody">
      <div id="gdprtext">
        <h4 style="color:#1A1055; text-align: center;">GDPR Text</h4>
        texttexttext ....
      </div>
      <div id='calendar'></div>
    </div>
    <div class="my-modal-footer">
      <div style="display: flex; justify-content: flex-start; margin-left:10px;">
        <label for="gdprchk">
          <input type="checkbox" id="gdprchk" required style="margin-right:10px;"/>Δέχομαι
        </label>
      </div>
      <div style="display: flex; justify-content: center;">
        <button type="button" id="acceptbtn" style="background-color: #1A1055; color:white; margin-bottom: 10px;">ΑΠΟΔΟΧΗ</button>
      </div>
    </div>
  </div>
</div>

Maybe I didnt make myself clear. I dont want a field, just the calendar in the modal. So when the user clicks a day then the modal closes and the selected value will be copied to a form field — netdev, May 31 '21 at 14:17
Ok now i understand you. I will help you later. Go to work now. Maybe fullcalendar Plugin Could help you. — Bernhard Beatus, May 31 '21 at 14:46
updated my answer. You got the selected date and its highlighted after click. — Bernhard Beatus, Jun 01 '21 at 12:19
thank you! but the problem with this kind of calendar is that its not very userfriendly to select a year. you have to go month by month back. Or it is something that I am missing? — netdev, Jun 01 '21 at 13:38
So now you can switch between years prev and next and month prev and next. Please upvote or mark the question as answered. So I will get some points. THX — Bernhard Beatus, Jun 01 '21 at 13:59

Expanded calendar in modal

1 Answers1