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

时间:2016-03-16 20:25:58

标签: javascript jquery html css twitter-bootstrap

所以我试图在bootstrap中创建一个表单,我已经完成了它的大部分,但是我被困在最后一部分。我需要的是包含用户出生日期的3个下拉菜单。日,月和年。

我查看过bootstrap文档但找不到任何帮助。

我想看起来像这样: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> 

1 个答案:

答案 0 :(得分:1)

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

要初始化您必须使用此日期的时间

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

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

还阅读有关插件的文档

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