模态扩展日历

Question

我有一个模态框，其中包含一些信息，单击按钮后，我想用展开的日历替换此信息，以便用户 select 约会。因此，更具体地说，第一个文本是 GDPR 协议，用户必须在其中单击我同意，然后模态正文必须替换为打开的日历，用户必须在其中 select 他的出生日期。然后，如果用户年满 18 岁，则会出现登录屏幕。但是我无法显示打开的日历。这是我的代码：

模态

<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>

脚本和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>

更新在 Swati 在评论中提供修复后，我设法显示了该字段，但我想显示扩展的日历。我怎样才能做到这一点？

Answer 1

这应该有效：

$('#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>

模态扩展日历

Expanded calendar in modal

javascript

php

jquery

laravel

bootstrap-modal