在同一页面上使用两个具有两种不同日期格式的日期选择器

Posted 2023-05-08

【中文标题】在同一页面上使用两个具有两种不同日期格式的日期选择器

【英文标题】：Using two datepicker with two different date format on the same page

【发布时间】：2016-03-23 15:08:04

【问题描述】：

我正在使用 jQuery DatePicker 开发一个 ASP.NET MVC 网页。

我有以下页面，其中包含两个使用 Datepicker 的输入字段：

<tbody>
    <tr>
        <td>
            <div class="group">      
              <input type="text" 
                  name="BatchProducts[0].BatchName" 
                  id="BatchProducts[0].BatchName"
                  required />

            </div>
        </td>
        <td>
            <div class="group">      
              <input type="text" class="datepicker"
                  name="BatchProducts[0].MadeDate" 
                  id="BatchProducts[0].MadeDate"
                  required />

            </div>
        </td>
        <td>
            <div class="group">      
              <input type="text" class="datepicker"
                  name="BatchProducts[0].ValidateDate" 
                  id="BatchProducts[0].ValidateDate"
                  required />

            </div>
        </td>
    </tr>
</tbody>

还有下面的js脚本：

$.datepicker.setDefaults(
  $.extend(
    $.datepicker.regional['es'],
     'dateFormat': 'yy-mm' 
  )
)

$(function () 
    $(".datepicker").datepicker();
);

我的问题是我需要日期格式为yy-mm 的BatchProducts[0].MadeDate 和日期格式为yy-mm-dd 的BatchProducts[0].ValidateDate。

我该怎么做？

这是我第一次使用这个小部件，但我不知道该怎么做。我在某处读到我可以使用两个不同的类并使用两个不同的日期选择器。但我不知道如何为每个日期分配不同的日期格式。

【参考方案1】：

$(function()

   $(".datepicker[name='BatchProducts[0].MadeDate']").datepicker( 'dateFormat': 'yy-mm' );
   $(".datepicker[name='BatchProducts[0].ValidateDate']").datepicker( 'dateFormat': 'yy-mm-dd' );

);

分别初始化它们并分别传递format。

【讨论】：

感谢您的回答，但会有 1 个或多个具有相同名称的字段。我正在使用BatchProducts[0]，因为我将有BatchProducts[1]、BatchProducts[2] 等输入字段。

会有什么对称性吗？

也许我可以为ValidateDate 使用一个类，为MadeDate 使用另一个类。它们将具有相同的名称，我只更改它们的索引。我不确定我是否理解了你的问题。

MadeDate 的格式将始终为 yy-mm 而 validateDate 将始终为 yy-mm-dd?

是的，它们（所有具有相同名称的数组元素，ValidateDate 或 MadeDate）都将具有相同的格式。