ASP.NET - Calendar closing problem in Jquery. - Asked By avula on 23-Apr-13 06:42 AM

Hi Every one,
I have used jquery's datetimepicker control in my project, where i need to select fromdate and todate .

here is my output html source:
=========================
<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div" style="position: absolute; top: 169px; left: 226px; zoom: 1; display: block;" jQuery17108418949241934279="2">

lableled style got changed when i traversed between fromdate and todate.

and jquery it self has the facility to close calendar popup when i click anywhere in the page.

and my datetimepicker(calendar) control has manual close button.

here is the code i have written.

  var myControl = {
    create: function (tp_inst, obj, unit, val, min, max, step) {
    $('<input class="ui-timepicker-input" maxlength ="2" style="z-index:1;" value="' + val + '"">')
   .appendTo(obj)
   .spinner({
   min: min,
   max: max,
   step: step,
   change: function (e, ui) { // key events
   // don't call if api was used and not key press
   if (e.originalEvent !== undefined)
   tp_inst._onTimeChange();
   tp_inst._onSelectHandler();
   },
   spin: function (e, ui) { // spin events
   tp_inst.control.value(tp_inst, obj, unit, ui.value);
   tp_inst._onTimeChange();
   tp_inst._onSelectHandler();
   }
   });
    return obj;
    },
    options: function (tp_inst, obj, unit, opts, val) {
    if (typeof (opts) == 'string' && val !== undefined)
      return obj.find('.ui-timepicker-input').spinner(opts, val);
    return obj.find('.ui-timepicker-input').spinner(opts);
    },
    value: function (tp_inst, obj, unit, val) {
    if (val !== undefined)
      return obj.find('.ui-timepicker-input').spinner('value', val);
    return obj.find('.ui-timepicker-input').spinner('value');
    }
    }

    $('.date_and_time_picker').datetimepicker({
    controlType: myControl,
    showTime: false,
    hourText: 'Hr',
    minuteText: 'Min',
    closeText: 'Close',
    dateFormat: 'dd-M-yy',
    timeFormat: 'HH:mm',
    showOn: 'button',
    buttonImageOnly: true,
    buttonText: 'Select Date',
    buttonImage: '../../css/images/calendar_icon.png',

    })

 My Problem is :
When i click fromDate calendar icon its opening appropriate datetimepicker and also its closed when i click close button - its OK

When i click fromDate calendar icon its opening appropriate datetimepicker and also its closed when i click any where in the page - OK


When i click fromDate calendar icon its opening appropriate datetimepicker and i have not closed it manual then i have clicked toDate calendar icon its opening appropriate datetimepicker and fromDate calendar closed... i observed that calendar div just moved the position and got changed display mode to "block".. then i have tryied to close toDate calendar its not closing..this is the problem..

MY R&D :
i have written $("#ui-datepicker-div",css('display','none'); in mouse hover of calender icon its got closed but according to our requirement ..we need to close all previous instances in clicking of another calendar icon, not in mouse hover event..
even i have written in click event of calendar control i.e  $('.ui-datepicker-trigger').click(function ()

now this time its not opening new datetimepicker ..

Could you please suggest me ? how can i close all previous datetimepicker controls in opening of new one.'


Thanks every one.