Javascript modal中的扩展日历

我有一个模式，其中包含一些信息，通过单击按钮，我想用扩展的日历替换这些信息，以便用户选择日期。因此，更具体地说，第一个文本是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>

&时代；
GDPR文本
文本文本。。。。
Δέχομαι
ΑΠΟΔΟΧΗ

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>

//显示模态（小模态）
$（文档）.ready（函数（事件）{
$（'smallModal'）.modal（“show”）；
$（“#日期选择器”）.css（“显示”、“无”）；
$（'#acceptbtn'）.prop（“disabled”，true）；
$（'#gdprchk'）。关于（'change'，函数（e）{
e、 停止即时复制（）；
如果（选中此项）{
$（'#acceptbtn'）.prop（“禁用”，false）；
$（'#gdpr'）.val（真）；
}
否则{
$（'#acceptbtn'）.prop（“disabled”，true）；
$（'#gdpr'）.val（假）；
}
});
$（'#acceptbtn'）。在（'click'，function（）上{
$（'#gdprtext'）.hide（）；
$（“#日期选择器”）.css（“显示”、“块”）；
$（'.my modal footer'）.hide（）；
});
});

脚本和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在注释中提供修复后，我设法显示该字段，但我想显示已展开的日历。我如何才能做到这一点？

这应该是可行的：

$（'#acceptbtn'）.prop（“disabled”，true）；
$（'#gdprchk'）.change（function（）{
如果（选中此项）{
$（'#acceptbtn'）.prop（“禁用”，false）；
$（'#gdpr'）.val（真）；
}否则{
$（'#acceptbtn'）.prop（“禁用”、“禁用”）；
$（'#gdpr'）.val（假）；
}
});
$（'#acceptbtn'）。在（'click'，function（）上{
$（'#gdprtext'）.hide（）；
var calendarEl=document.getElementById（'calendar'）；
var calendar=新的完整日历。日历（calendarEl{
初始视图：“dayGridMonth”，
主题系统：“引导”，
headerToolbar：{
start:'title'，//通常位于左侧。如果是RTL，则位于右侧
中心：''，
end:'prevYear prev，next nextYear'//通常位于右侧。如果为RTL，则位于左侧
},
日期点击：功能（信息）{
警报（'点击：'+info.dateStr）；
info.dayEl.style.backgroundColor='红色'；
}
});
calendar.render（）；
$（“#日历”）.css（“显示”、“块”）；
$（'.my modal footer'）.hide（）；
});

&时代；
GDPR文本
文本文本。。。。
Δέχομαι
ΑΠΟΔΟΧΗ
您有
id=“#日期选择器”
删除该
#
并再次尝试！非常感谢。但我如何才能展示它？和字段不同的是，正常的日期输入或引导日期选择器是什么？但我需要扩展日历。请稍等，我会查找它。好的，现在我明白了。我以后会帮你的。现在去工作吧。也许fullcalendar插件可以帮助你。更新了我的答案。您在单击后获得了所选日期及其高亮显示。因此，现在您可以在“上一年”和“下一年”以及“上一个月”和“下一个月”之间切换。请投票或将问题标记为已回答。所以我会得到一些分数。谢谢