模态扩展日历

Posted 2023-03-14

【中文标题】模态扩展日历

【英文标题】：Expanded calendar in modal

【发布时间】：2021-08-18 19:25:51

【问题描述】：

我有一个包含一些信息的模式，单击按钮我想用扩展的日历替换此信息，以便用户选择日期。因此，更具体地说，第一个文本是 GDPR 协议，用户必须单击我同意，然后必须将模态主体替换为打开的日历，用户必须在其中选择他的出生日期。然后，如果用户 > 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>

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

【问题讨论】：

你有 id="#datepicker" 删除 # 然后再试一次

啊啊！谢谢！但是我怎样才能显示它扩大了呢？不像一个字段

是正常的日期输入还是bootstrap-datepicker？

【参考方案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>

【讨论】：

但我需要扩展日历

也许我没有说清楚。我不想要一个字段，只是模式中的日历。因此，当用户单击一天时，模式关闭并且所选值将被复制到表单字段

好的，现在我明白了。以后我会帮你的。现在去上班。也许 fullcalendar 插件可以帮助你。

更新了我的答案。您获得了选定的日期，并在点击后突出显示。

所以现在您可以在上一个和下一个年份和上一个和下一个月份之间切换。请投票或将问题标记为已回答。所以我会得到一些分数。 THX