Using bootstrap datepicker in steps: year -> month -> day - bootstrap-datepicker

Question

I am using the bootstrap datepicker for a Date of Birth field.
But apparently users are not using the year drop down field properly.
What I would like to do is have a staged setup, where with 3 clicks they go from choosing year, then month and then the day. I think it would be much more user friendly.
This is how i see it working:
step 1: select year
Step 2: select month
step 3: select day
Does anyone know if this is possible?

Answer 1

Please check this
https://eonasdan.github.io/bootstrap-datetimepicker/
you can change mode like below,
jQuery(function () {
$('#datetimepicker').datetimepicker({
viewMode: 'years'
});
});
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>