CODEWITHSUNDEEP
jquerytwitter-bootstrapjquery-uidatepickerbootstrap-daterangepicker
Marielle
Marielle

Reputation: 81

How to set daterangepicker to ONLY YEARS

I've been using AdminLTE bootstrap for my UI. It already comes with datepicker and daterangepicker plugins. I've been looking for answers on how to set the datarangepicker to show only years but so far I've only come across setting datepicker to the format I want. I tried using the solution for datepicker on setting my daterangepicker to only years but it didn't workout for me. How can I do this? I don't want to use datepicker because it only selects a single date compared to daterangepicker which allows me to select 2 dates in one go.

Here's the datepicker solution I tried. It only works for datepicker but not in daterangepicker: 

$('#reservation').datepicker({
    format: "yyyy",
    autoclose: true,
    minViewMode: "years"});

I tried including this in my daterangepicker but nothing happened:

$('#reservation').daterangepicker({
    format: "yyyy",
    autoclose: true,
    minViewMode: "years"});

Here's what my daterangepicker looks like currently:

Here's how I want my daterrangepicker to somewhat look like (taken from datepicker):

Upvotes: 0

Views: 14111

Answers (1)

Евгений Боринских
Евгений Боринских

Reputation: 75

Here is the best way I found -> link

Use bootstrap-datepicker whis this code: 

$('#education-range input').each(function () {
        $(this).datepicker({
            autoclose: true,
            format: " yyyy",
            viewMode: "years",
            minViewMode: "years"
        });
        $(this).datepicker('clearDates');
    });
<link href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://adminlte.io/themes/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<div class="input-group input-daterange" id="education-range">
                                <input type="text" class="form-control" value="2012-04-05">
                                <div class="input-group-addon">to</div>
                                <input type="text" class="form-control" value="2012-04-19">
</div>

Upvotes: 1

Related Questions