Question

我想在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>

Answer 1

请查看此文档以查看Bootstrap 3 Datepicker。

如果我理解正确，你需要一个内联的datetimepicker。

试试这段代码：

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

Answer 2

如果您只需要包含日期的日历：

<!-- Ignore these prerequisites if you have already included them in your project -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<div class="input-group date" id="datePicker">
    <input type="text" class="form-control" placeholder="YYYY/MM/DD"/>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

<script type="text/javascript">
    $(function() {
        $("#datePicker").datepicker({
            // Here you can add any additional parameters
            format: "yyyy/mm/dd"
        });
    });
</script>

如果您需要包含日期和时间的日历，则可以使用

替换bootstrap-datepicker.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>

并将datepicker()更改为datetimepicker()

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

2 个答案: