在日期时间选择器单击上隐藏 div

Question

In this image when i select value from drop down and select dates then container is displayed and then when i select row from table data then cont and sumdata div is displayed now i want when i select again dates from date picker then want to hide all divs ... and when click on search then want to display container

<script type="text/javascript">

         $(function () {

             var currentYear = (new Date).getFullYear();
             var currentMonth = (new Date).getMonth();
             var currentDay = (new Date).getDate();
             $('#fromdate').datepicker({
                 showSecond: false,
                 timeFormat: 'HH:mm',
                 minDate: new Date((currentYear - 2), 12, 1),
                 //minDate: 0,
                 dateFormat: 'yy-mm-dd',
                 maxDate: new Date(currentYear, currentMonth, currentDay),
                 //maxDate: new Date((currentYear + 1), 12, 1),
                 onSelect: function (selectedDate) {

                     // Start Date
                     var startDate = $(this).datepicker('getDate');

                     //startDate.SetHours(0);
                     //startDate.setMinutes(0);
                     //startDate.setSeconds(0);

                     $('#todate').datepicker('option', 'minDate', startDate);
                     $('#todate').datepicker('setDate', startDate);

                     // End Date
                     var enddate = $(this).datepicker('getDate');
                     enddate.setDate(enddate.getDate() + 60);
                    // endDate.setMonth(endDate.getMonth() + 2);
                     $('#todate').datetimepicker('option', 'maxDate', enddate);
                 }
             });



        $('#todate').datepicker({
             showSecond: false,
             timeFormat: 'HH:mm',
             minDate: new Date((currentYear - 2), 12, 1),
             minDate: 0,
             dateFormat: 'yy-mm-dd',
             maxDate: '+30',
             //maxDate: endDate.setMonth(endDate.getMonth() + 2)


         });

       $('#fromdate').on('click', function () {
              $("#tabledata").hide();
             $('#container').hide();
             $("#cont").hide();
             $("#sumdata").hide();
             $("#sum").hide();
         });

         $("#todate").datepicker({
             onSelect: function (dateText) {
                 $("#tabledata").hide();
                 $('#container').hide();
                 $("#cont").hide();
                 $("#sumdata").hide();
                 $("#sum").hide();
             }
         });

     });
  </script>

Answer 1

Use the onselect option to execute any JavaScript transformations

eg:

$(".datepicker").datepicker({
  onSelect: function(dateText) {
    // hide your divs
    $('.mydivs').hide();
  }
});

http://api.jqueryui.com/datepicker/#option-onSelect

working fiddle:

https://jsfiddle.net/7dy0wduc/