Bootstrap datetimepicker only month and year not working as intended

Question

My Datetime picker works on the fist click, but if I click again in the input field again it shows the picker with the day field. How can I do this? Any help will be appreciated.

This is the image in first click (expected behavior)

This is the image in second click (expected behavior is to come like to the first one)

My code is below

HTML

<div class='input-group' id='dpRM'>
    <input type='text' class="form-control form-control-1 form-input input-sm fromq" placeholder="Enter Month and year" />
    <span class="input-group-addon">
        <span class="fa fa-calendar"></span>
    </span>
</div>

Javascript

<script type="text/javascript">
    $(function() {
        $('#dpRM').datetimepicker({
            format: "MMMM YYYY",
            viewMode: "years",
            //minViewMode: 0,
            toolbarPlacement: "top",
            allowInputToggle: true,
            icons: {
                time: 'fa fa-time',
                date: 'fa fa-calendar',
                up: 'fa fa-chevron-up',
                down: 'fa fa-chevron-down',
                previous: 'fa fa-chevron-left',
                next: 'fa fa-chevron-right',
                today: 'fa fa-screenshot',
                clear: 'fa fa-trash',
                close: 'fa fa-remove'
            }
        });
    });
</script>

Thanks in advance

This is a [known bug](https://github.com/Eonasdan/bootstrap-datetimepicker/issues/1850) affecting version `4.17.42` and `4.17.43`. You can modify datetimepicker code as suggested on github or use older version of the component like `4.17.37`. — VincenzoC, Nov 03 '16 at 09:09
Thanks , That was a quick help but unfortunately it dint work for me, i am trying though — Bobin Thomas, Nov 03 '16 at 11:30
commenting out currentViewMode = 0; worked for me in version 4.17.45 — JJ_Coder4Hire, Oct 20 '17 at 20:25

score 10 · Answer 1 · answered Oct 26 '17 at 06:07

10

Try as follow

$('#dpRM').datetimepicker({
    viewMode : 'months',
    format : 'MM/YYYY',
    toolbarPlacement: "top",
    allowInputToggle: true,
    icons: {
        time: 'fa fa-time',
        date: 'fa fa-calendar',
        up: 'fa fa-chevron-up',
        down: 'fa fa-chevron-down',
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
    }
});

$("#dpRM").on("dp.show", function(e) {
   $(e.target).data("DateTimePicker").viewMode("months"); 
});

REF :: GitHub

answered Oct 26 '17 at 06:07

R.Katnaan

2,486
4
24
36

Just the event on dp.show works perfectly. Thank you – Marc Roussel Dec 03 '17 at 10:40
You should accept the answer, better reference for others. – R.Katnaan Jul 13 '21 at 08:51
What do you mean by accepting the answer? – Marc Roussel Jul 14 '21 at 14:06
If my answer is solved your problem, you should tick green check beside my answer. An so, the others will take that answer as actual solution and this question need no more amswer. Do you got it? – R.Katnaan Jul 15 '21 at 05:43
Also you will see that my answer has 10 votes for solving other people problem. – R.Katnaan Jul 15 '21 at 05:44
Yep, already did that long time ago. Great answer, thank you! – Marc Roussel Jul 16 '21 at 14:11
No bro, if you accept, green tick will shown under votes of my answer. – R.Katnaan Jul 19 '21 at 12:25
Sorry dude I don't see any green check beside your answer other than an UP and DOWN arrow for voting. Did I miss something? Can you provide a screenshot? – Marc Roussel Jul 21 '21 at 08:50

Bootstrap datetimepicker only month and year not working as intended

HTML

Javascript

1 Answers1

Linked