引导程序中的个别日期，月份和年份下拉列表 [英] Individual date, month and year dropdowns in bootstrap

问题描述

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

我浏览过引导文件，找不到任何帮助。

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

箭头下拉菜单是我创建的一个自定义图像。

非常感谢:)

 < form class =form> 
< div class =form-group col-xs-4 col-md-4> 
< label for =first-nameclass =control-label>名字< / label> 
< input type =textclass =form-controlid =first-name> 
< / div> 
< div class =form-group col-xs-4 col-md-4> 
< label for =email-addressclass =control-label>电子邮件< / label> 
< input type =emailclass =form-controlid =email-address> 
< / div> 
< br> 
< div class =form-group col-xs-4 col-md-4> 
< label for =last-nameclass =control-label>姓氏< / label> 
< input type =textclass =form-controlid =last-name> 
< / div> 
< div class =form-group col-xs-4 col-md-4> 
< label for =confirm-email-addressclass =control-label>确认电子邮件< / label> 
< input type =emailclass =form-controlid =confirm-email-address> 
< / div> 
< div class =form-group col-xs-4 col-md-4> 
 //下拉菜单会出现在这里
< / div> 
< / form> 
< / div> 
< / div> 
  

解决方案

我做了一个完整的例子，你只需要把

 
 code> $（。date-dropdowns）。dateDropdowns（）; 
  

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

还会阅读有关插件的文档

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

So I am trying to create a form in bootstrap, I have completed the majority of it however I am getting stuck on the last part. What I need is 3 dropdown menus containing the users date of birth. Day, Months and Year.

I have looked through the bootstrap docs and cannot find any help for this.

I would like to look like this: https://gyazo.com/96c8be19718dbffef7302ea30a7eb343

The arrow dropdown is a custom image I made. I was wondering if it would be possible to have that instead of a default arrow.

Thanks a lot :)

                <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> 

解决方案

I made a full example you only need is put the correct class for each element.

To initialize the date time you have to use this

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

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

also read the documentation about the plugin

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

这篇关于引导程序中的个别日期，月份和年份下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！