从jquery datepicker中选择日期后关闭jquery对话框

Question

我的问题是我有jquery对话框。在对话框中我填充了一个输入框并初始化了datepicker，它有选择日期然后完成按钮的选项。

我希望当我选择日期并点击完成时，对话框也应该关闭日期选择器。

<script>
 $(document).ready(function() { 
  $('body').on('click','[id^="trnids"]',function(){
  vartrnnum = $(this).text();
  vartrnname = $(this).closest('#alstn > tr').find('.clstrnname').text();

  document.getElementById('divnewdate').innerHTML = ("<input id='ipnewdoj'>");

  fulldate1 = fulldate;
  datearray1 = fulldate1.split("-"); //storing dd,mm,yy seperated by "-" or "/"
  vardoj1 = datearray1[2] + datearray1[1] + datearray1[0]; //joining yyyymmdd

  document.getElementById("ipnewdoj").value = vardoj1;

 $(function() {   
   $('#ipnewdoj').datepicker( { 
   onSelect: function(date) {
              vardoj1 = date;
        },
   dateFormat: 'yymmdd', //you can modify this - in lower case dd-mm-yy
   numberOfMonths: 1, 
   showButtonPanel: true, 
   showWeek: true, 
   firstDay: 1,
   changeMonth: true,
   changeYear: true,
   showAnim: 'fold',   //show; slideDown; fadeIN; blind; bounce, drop; fold; clip;
   minDate: '-4D', //min days calender will go back. use '-12D' for days, '-12W' for weeks, '-12M' for months, or '-12Y' for years.
   maxDate: '0D', //max days calender will go next. use '+12D' for days, '+12W' for weeks, '+12M' for months, or '+12Y' for years.
   }).val(); 
});

  $(function() {
    $("#divnewdate").dialog({   
    width: 250,
    height: 270,
    modal: true,
    dialogClass:'datagrid',
    show: {effect: "clip", duration: 1000},
    hide: {effect: "drop", duration: 200},
    close: function( event, ui ) {
           fnltrs();//write your function here or call function here
    }//dialog box close option end
    }); // dialog } close
 }); // dialog function } close


  }); //main click event close fn
 }); // document ready fn close

 </script>

非常感谢任何帮助。

Answer 1

尝试以下代码。

$(document).ready(function() { 
  $('body').on('click','[id^="trnids"]',function(){
  vartrnnum = $(this).text();
  vartrnname = $(this).closest('#alstn > tr').find('.clstrnname').text();

  document.getElementById('divnewdate').innerHTML = ("<input id='ipnewdoj'>");

  fulldate1 = fulldate;
  datearray1 = fulldate1.split("-"); //storing dd,mm,yy seperated by "-" or "/"
  vardoj1 = datearray1[2] + datearray1[1] + datearray1[0]; //joining yyyymmdd

  document.getElementById("ipnewdoj").value = vardoj1;

 $(function() {   
   $('#ipnewdoj').datepicker( { 
   onSelect: function(date) {
              vardoj1 = date;
   },
   onClose: function () {              // Note this additional function here
       $('#divnewdate').dialog('close');
   },
   dateFormat: 'yymmdd', //you can modify this - in lower case dd-mm-yy
   numberOfMonths: 1, 
   showButtonPanel: true, 
   showWeek: true, 
   firstDay: 1,
   changeMonth: true,
   changeYear: true,
   showAnim: 'fold',   //show; slideDown; fadeIN; blind; bounce, drop; fold; clip;
   minDate: '-4D', //min days calender will go back. use '-12D' for days, '-12W' for weeks, '-12M' for months, or '-12Y' for years.
   maxDate: '0D', //max days calender will go next. use '+12D' for days, '+12W' for weeks, '+12M' for months, or '+12Y' for years.
   }).val(); 
});

  $(function() {
    $("#divnewdate").dialog({   
    width: 250,
    height: 270,
    modal: true,
    dialogClass:'datagrid',
    show: {effect: "clip", duration: 1000},
    hide: {effect: "drop", duration: 200},
    close: function( event, ui ) {
           fnltrs();//write your function here or call function here
    }//dialog box close option end
    }); // dialog } close
 }); // dialog function } close


  }); //main click event close fn
 }); // document ready fn close

此代码确保每当日期选择器关闭时，它也会关闭对话框。