How to display selected month dates only in date picker with respect to selecting month in another text box?

Question

I have 2 text boxes, one is to choose month and year, and another with dates. My both date pickers are working fine, but what I need is when I select month and year from one text box, my date picker for another text box needs to display selected month's dates only.

Here is my code:

 <div class="col-lg-3">
            <label>Month</label>
            <div class="input-group date">
                <input type="text" class="form-control pull-right" id="txtMonth">
                <div class="input-group-addon bg-purple">
                    <i class="fa fa-calendar"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <label>Date From</label>
            <div class="input-group date">
                <input type="text" class="form-control pull-right" id="txtDateFrom">
                <div class="input-group-addon bg-purple">
                    <i class="fa fa-calendar"></i>
                </div>
            </div>
        </div>

My Javascript:

 <script>
        $(function () {
      $('#txtMonth').datepicker({
                autoclose: true,
                format: "MM yyyy",
                viewMode: "months",
                minViewMode: "months"
            })
            $('#txtDateFrom').datepicker({
                autoclose: true,
                format: 'dd/mm/yyyy'
            })           
        })</script>

This is my month selection textbox. If I select Sep 2019 it means, only sep month dates need to display in dates displaying datepicker.

Or if removing those previous and next icons on date calendar also enough for my requirement.

How can I achieve this?

Answer 1

您可以做的是获取您单击的月份的索引，如果两个日期都匹配，则可以将其与日期日历相匹配，您可以专门显示该月日期，或者为年份月份和日期月份日历提供相同的id并运行for循环，如果两项都显示，否则显示隐藏