使用 jQuery / JQueryUI 动态创建日期选择器元素

在前端开发中，日期选择器是一个非常常见的组件。jQuery 和 JQueryUI 提供了内置的 datepicker() 方法来创建日期选择器，并且还可以通过动态创建元素的方式来实现更加灵活的控制。本文将介绍如何使用这些工具来创建动态日期选择器，并提供示例代码和深入的解释。

创建基础 HTML 结构

首先我们需要创建一些基础的 HTML 结构，用于容纳日期选择器元素。我们可以使用一个简单的 div 元素来作为外层容器，然后在其中嵌套一个 input 元素用于显示选定的日期。此外，我们还需要添加一个按钮元素，用于触发日期选择器的弹出。

<div class="date-picker-wrapper">
  <input type="text" class="date-picker-input" readonly>
  <button class="date-picker-btn">选择日期</button>
</div>

使用 jQuery 动态创建日期选择器元素

接下来，我们可以使用 jQuery 的 click() 方法来监听按钮的点击事件，并在点击时动态创建日期选择器元素。具体步骤如下：

1. 获取外层容器元素
2. 创建一个新的 div 元素，用于容纳日期选择器
3. 在 div 元素中调用 Datepicker() 方法创建日期选择器
4. 将新创建的 div 元素添加到外层容器中

-- -------------------- ---- -------
-------------------------------------- -
  -- --------
  --- ------- - ----------------------------------------
  
  -- ---- --- --
  --- ------ - -----------
  
  -- -- ------------ ---------
  -------------------
    ----------- -----------
    --------- ------------------ -
      -- --------- ----- ---
      -------------------------------------------------
      
      -- -------
      -----------------------------
      ----------------
    -
  ---
  
  -- ----- --- ----------
  -----------------------
---

在上述代码中，我们使用了 closest() 方法来获取最近的外层容器元素，然后使用 $('<div>') 的方式动态创建一个新的 div 元素。接着，我们调用 datepicker() 方法，并传入一些配置参数来创建日期选择器。在用户选择日期后，我们将选定的日期填充到 input 元素中，并销毁和移除日期选择器元素。

使用 JQueryUI 动态创建日期选择器元素

除了使用 jQuery 创建日期选择器元素外，我们还可以使用 JQueryUI 提供的组件库来实现相同的效果。具体步骤如下：

1. 引入必要的样式文件和 JS 文件
2. 获取外层容器元素
3. 调用 datepicker() 方法创建日期选择器
4. 将日期选择器附加到外层容器元素

-- -------------------- ---- -------
----- ---------------- -------------------------------------------------------------
------- --------------------------------------------------------

---- ----------------------------
  ------ ----------- ------------------------- ---------
  ------- -------------------------------------
------

--------
-------------------------------------- -
  -- --------
  --- ------- - ----------------------------------------
  
  -- ---- ----- --
  --- ------ - -------------
  ------------------- --------
  ----------------------- ------
  
  -- -- ------------ ---------
  -------------------
    ----------- -----------
    --------- ------------------ -
      -- --------- -----

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------