Javascript 如何在不单击输入文件的情况下制作引导日历，在呈现任何HTML页面时都会查看此日历

我想在html页面中显示日历视图，但我不知道如何执行此操作。
实际上，在我的大学项目中，我必须在页面中集成一个引导日历，在该页面中，第一部分是日历，其他两部分是事务详细信息。我做了另外两部分。但我不知道如何在不单击输入字段的情况下创建日历。我将只可视化带有日期的日历。
我如何解决这个问题

我的代码如下：/index.html

<section id="1">
<div class="form-group all-forms">
    <div class="col-sm-3 col-sm-offset-5 r-view">
        <!-- Bootstrap calendar -->
    </div>
</div>
</section>

<section id="2">
<div class="col-md-12">
    <div class="mstep">
        <a href=""><img src="modules/core/assets/xplo-theme/booking/mstep2.png" class="img-responsive"></a>
        <h6>Pricing Details</h6>
    </div>
    <a href=""><img src="modules/core/assets/xplo-theme/booking/money.png" class="img-responsive"></a><span id="go-book">How many Guests are going?</span>
    <table class="table table1">
        <thead id="thead-color">
        <tr>
            <th>Booking Option</th>
            <th class="td-seat">Price</th>
            <th class="td-seat">Adult</th>
            <th class="td-seat">Children</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="td-date td-magic">
                <label for="1"></label> <span id="entry">Tour Price</span>
            </td>
            <td class="td-seat td-magic-price"><i class="fa fa-inr"></i></td>
            <td class="td-seat td-magic">
                <div  class="form-group">
                    <select class="form-control adult-count">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </div>
            </td>
            <td class="td-seat td-magic">
                <div class="form-group">
                    <select class="form-control child-count">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </div>
            </td>

        </tr>
        <tr id="sub-total">
            <td class="pay">You will pay</td>
            <td class="sub-rs"><i class="fa fa-inr"></i> <span></span></td>
        </tr>
        </tbody>
    </table>
</div>
</section>    

<section id="3">
<div class="col-md-12 text-center payu-form">
    <form method="post" id="payu-payment-form" action="https://test.payu.in/_payment">
        <input type="hidden" name="key" value="gtKFFx"/>
        <input type="hidden" name="txnid" value=""/>
        <input type="hidden" name="amount" value=""/>
        <input type="hidden" name="productinfo" value="Product 1"/>
        <input type="hidden" name="firstname"  value="Amit"/>
        <input type="hidden" name="email"  value="abc@gmail.com"/>
        <input type="hidden" name="phone" value="123423233"/>
        <input type="hidden" name="surl" value="http://localhost:8000/success"/>
        <input type="hidden" name="furl" value="http://localhost:8000/fail"/>
        <input type="hidden" name="hash" value=""/>
        <button class="btn btn-success sr-only" type="submit" formtarget="_blank" >Pay by PayUmoney </button>
        <a class="pay-by-payu" href=""><img src="/modules/core/assets/xplo-theme/booking/payumoney-logo.png" alt=""></a>
    </form>
</div>
</section>        

定价详情
有多少客人要去？
预订选择
价格
成人
儿童
旅游价格
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
你会付钱的
付酬

查看此文档以了解更多信息

如果我理解正确，您需要一个内联日期时间选择器

请尝试以下代码：

<div id="datetimepicker"></div>
<script type="text/javascript">
        $(function () {
            $('#datetimepicker').datetimepicker({
                inline: true,
                sideBySide: true
            });
        });
</script>

$（函数（）{
$（“#datetimepicker”）.datetimepicker({
是的，
旁边：对
});
});

如果您只需要带有日期的日历：

$（函数（）{
$（“#日期选择器”）。日期选择器({
//您可以在此处添加任何其他参数
格式：“yyyy/mm/dd”
});
});

Monika，我收到了这些名为“VM1487:3未捕获类型错误：$（…）。datetimepicker不是一个函数”的错误。您必须包含引导datetimepicker脚本和css文件。