Datepicker To Only Display Months

Question

I have a datepicker which I only want the user to be able to select a month and year.

The user should only be able to select up to a year from todays date. I have this working but I cant seem to get only the months displaying.

HTML

<div class="form-groups">
    <div class="col-sm-12">
        <div class="input-group">
            <input type="text" name="idTourDateDetails" id="idTourDateDetails" class="form-control clsDatePicker">
        </div>
    </div>
</div>

Script

<script type="text/javascript">    
    $('#idTourDateDetails').datepicker({
        format: "mm-yyyy",
        startMode: "months", 
        minViewMode: "months",
        changeMonth: true,
        changeYear: true,
        minDate: '0d',
        maxDate: '1y'
    });
</script>

I tried adding data-date-format="mm-yyyy" to the input but it didn't work.

See working fiddle

I do not want to just hide the calendar, I want the dates to display the months instead. Other suggestion below only hide the calendar.

This fiddle is what I'm after but I can't get it working as when I put the HTML and the JQuery into my solution, I get the dates still displayed.

@dreamweiver Rather than display the dates I want to display the month not completely hide the calendar as all the suggestions in that stack show — murday1983, Oct 01 '15 at 11:14
@Pekka Please see comment above, I want the months to display rather than dates and I want only the 'Year' to be displayed at the top — murday1983, Oct 01 '15 at 11:15
`$(this).datepicker('setDate', new Date( month, 1));` <---- is this what you mean? — guradio, Oct 01 '15 at 11:16

score 2 · Accepted Answer · answered Oct 01 '15 at 11:16

2

Instead of datepicker you can use month picker where you can select only year and month, you can refer https://github.com/KidSysco/jquery-ui-month-picker where they have given detailed documentation and fiddle link.

answered Oct 01 '15 at 11:16

vilas sarvade

46
1

Datepicker To Only Display Months

1 Answers1