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

时间:2016-10-04 07:26:51

标签: javascript jquery html

在此图像中,当我从下拉选择值并选择日期然后显示容器然后当我从表数据中选择行时,然后显示cont和sumdata div我想要当我再次选择日期选择器的日期然后想要隐藏所有div ...当点击搜索然后想要显示容器

image

<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>

1 个答案:

答案 0 :(得分:1)

使用onselect选项执行任何JavaScript转换

e.g:

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

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

工作小提琴:

https://jsfiddle.net/7dy0wduc/