引导程序中的单个日期、月份和年份下拉列表

Individual date, month and year dropdowns in bootstrap

本文关键字:下拉列表 单个 日期 引导程序      更新时间:2023-09-26

所以我正在尝试在引导中创建一个表单,我已经完成了其中的大部分,但是我卡在最后一部分。我需要的是 3 个包含用户出生日期的下拉菜单。日、月、年。

我已经浏览了引导文档,但找不到任何帮助。

我想看起来像这样:https://gyazo.com/96c8be19718dbffef7302ea30a7eb343

箭头下拉列表是我制作的自定义图像。我想知道是否可以使用它而不是默认箭头。

非常感谢:)

                <form class="form">
                <div class="form-group col-xs-4 col-md-4">
                    <label for="first-name" class="control-label">First Name</label>
                    <input type="text" class="form-control" id="first-name">
                </div>
                <div class="form-group col-xs-4 col-md-4">
                    <label for="email-address" class="control-label">Email</label>
                    <input type="email" class="form-control" id="email-address">
                </div>
                <br>
                <div class="form-group col-xs-4 col-md-4">
                    <label for="last-name" class="control-label">Last Name</label>
                    <input type="text" class="form-control" id="last-name">
                </div>
                <div class="form-group col-xs-4 col-md-4">
                    <label for="confirm-email-address" class="control-label">Confirm Email</label>
                    <input type="email" class="form-control" id="confirm-email-address">
                </div>
                <div class="form-group col-xs-4 col-md-4">
                    // dropdowns would go here
                </div>
                </form>
            </div>
        </div> 

我做了一个完整的例子,你只需要为每个元素放置正确的类。

要初始化日期时间,您必须使用它

$(".date-dropdowns").dateDropdowns();

https://jsfiddle.net/jorge182/dszkt041/1/

另请阅读有关插件的文档

http://icklechris.github.io/jquery-date-dropdowns/