jquery ui dialog里调用datepicker的问题

当我们使用jQuery UI Dialog弹出窗口时，若需要在弹出窗口中使用日历控件datepicker，则需要注意下面的几点：

步骤一：引入jQuery UI和jQuery UI Datepicker

首先要在头部引入jQuery和jQuery UI库，并且添加jQuery UI Datepicker的CSS和JS文件。

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

步骤二：设置datepicker选项

在初始化Dialog之前，需要对datepicker进行设置，以满足具体需求。

$(function() {
  $("#datepicker").datepicker({
    dateFormat: "yy-mm-dd"
  });
});

上面代码中的dateFormat："yy-mm-dd"表示日历控件所显示的日期格式，按照设定的格式来呈现。

步骤三：在Dialog控件中调用日历控件

在Dialog控件弹出之前，需要设置datepicker的父元素，并将其追加到Dialog控件中，代码如下：

$(function() {
  $("#dialog-form").dialog({
    autoOpen: false,
    height: 400,
    width: 350,
    modal: true,
    buttons: {
      "Ok": function() {
        $( this ).dialog( "close" );
      },
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    },
    open: function(){
      $( "#datepicker" ).datepicker( "widget" ).appendTo( "#dialog-form" );
    }
  });
});

上面代码中的open是Dialog的打开事件，每次Dialog打开时，都会执行一次。将datepicker追加到Dialog控件中，这样就可以在Dialog中调用日历控件了。

示例一：Dialog中调用日历控件

下面是一个完整的实例，演示了如何在Dialog控件中调用日历控件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dialog with Datepicker</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(function() {
    $("#datepicker").datepicker({
      dateFormat: "yy-mm-dd"
    });
    $("#dialog-form").dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
        "Ok": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      open: function(){
        $( "#datepicker" ).datepicker( "widget" ).appendTo( "#dialog-form" );
      }
    });

    $( "#create-user" ).button().on( "click", function() {
      $( "#dialog-form" ).dialog( "open" );
    });
  });
  </script>
</head>
<body>

<div id="dialog-form" title="Create new user">
  <p>Date: <input type="text" id="datepicker"></p>
</div>

<button id="create-user">Create new user</button>

</body>
</html>

示例二：2级弹出框中调用日历控件

下面这个示例演示了如何在二级弹出框中调用日历控件。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Date picker in Dialog and Tooltip</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $( function(){
      $( "#datepicker" ).datepicker();
      $( "#dialog" ).dialog({
        autoOpen: false,
        modal: true,
        buttons: {
          "Close": function(){
            $( this ).dialog( "close" );
          },
          "Open nested dialog": function(){
            $( this ).dialog( "close" );
            $( "#dialog-nested" ).dialog( "open" );
          }
        }
      });
      $( "#dialog-nested" ).dialog({
        autoOpen: false,
        modal: true,
        buttons: {
          "Close": function(){
            $( this ).dialog( "close" );
          }
        },
        open: function(){
          $( "#datepicker2" ).datepicker( "widget" ).appendTo( "#dialog-nested" );
        }
      });
      $( "#opener" ).click( function(){
        $( "#dialog" ).dialog( "open" );
      });
    });
    </script>
</head>
<body>

<div id="dialog" title="Dialog">
  <p>Dialog with date picker.</p>
  <p>Date: <input type="text" id="datepicker"></p>
  <button id="opener">Open nested dialog</button>
</div>

<div id="dialog-nested" title="Nested Dialog">
  <p>Dialog in dialog.</p>
  <p>Date: <input type="text" id="datepicker2"></p>
</div>

</body>
</html>

上面的代码演示了如何在嵌套的弹出窗口中调用日历控件，即将datepicker2控件追加到dialog2中。由于datepicker2位于dialog-nested控件中，并且dialog-nested控件是dialog控件的子控件，所以加入到子控件即可。

这个例子中演示了如何在初始Dialog控件打开之前，就进行了控件的初始化，因此datepicker2显示的样式和初始页面的datepicker样式相同。

以上就是在Dialog中调用日历控件的完整攻略，希望能够对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery ui dialog里调用datepicker的问题 - Python技术站