在日期选择器处于活动状态时将 class 添加到输入和标签？

Question

我正在尝试创建一个带有样式输入的表单（有点受 shopify 的结帐页面的启发），当用户开始输入时，标签将显示在该表单中。在我尝试添加 jQuery UI 的日期选择器小部件之前，一切似乎都运行良好。

输入前我的表单如下所示：

这就是我输入内容时的样子：

如您所见，标签 "birthday" 应该在用户从日期选择器小部件中选择生日后显示。但是除非用户自己输入日期，否则什么也不会出现……有什么建议我可以用代码做什么吗？

这是我的 jQuery:

// input
$('input[type="text"], input[type="password"]').on('keyup blur', function(){
    tmpval = $(this).val();
    if(tmpval == '') {
        $(this).removeClass('active')
        .siblings('label').removeClass('active');
    } else {
        $(this).addClass('active')
        .siblings('label').addClass('active');
    }
});
// date picker
$('.datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: "-100:+0"
});

这是我的一部分 html:

<li>
    <label class="label" for="first_name">First name</label>
    <input type="text" id="first_name" placeholder="First name" />
</li>
<li>
    <label class="label" for="last_name">Last name</label>
    <input type="text" id="last_name" placeholder="Last name" />
</li>
<li>
    <label class="label" for="birthday">Birthday</label>
    <input type="text" id="birthday" class="datepicker" placeholder="Birthday" />
</li>

如有任何帮助，我们将不胜感激！谢谢！

（由于英语不是我的第一语言，如果我的任何文字没有意义，我也深表歉意。）

Answer 1

嗯，你需要运行代码，当用户 select 约会时显示标签（因为事件 keyup 和 blur 都没有被触发） . 您可以使用 onSelect 回调来执行此操作。

类似于：

// input
$('input[type="text"], input[type="password"]').on('keyup blur', function() {
  handleLabel($(this));
});
// date picker
$('.datepicker').datepicker({
  changeMonth: true,
  changeYear: true,
  yearRange: "-100:+0",
  onSelect: function() {
    // Keep in mind that maybe the $(this) now reference to something else so you need to serach for the relvent Node
    handleLabel($(this));
  }
});

function handleLabel(elm) {
  tmpval = elm.val();
  if (tmpval == '') {
    elm.removeClass('active')
      .siblings('label').removeClass('active');
  } else {
    elm.addClass('active')
      .siblings('label').addClass('active');
  }
}

如果您要创建一个工作片段（或 fiddle 或其他），我可以告诉您如何修复它。

Answer 2

您需要在 jquery 日期选择器的 select 事件上设置 class。这需要帮助你。

// input
 function setclass()
{
  tmpval = $(this).val();
  if(tmpval == '')
  {
    $(this).removeClass('active')
    .siblings('label').removeClass('active');
  }
  else 
  {
    $(this).addClass('active')
    .siblings('label').addClass('active');
  }
}
$('input[type="text"], input[type="password"]').on('keyup blur', function()
{
  setclass();
});

$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:+0",
onSelect: function(dateText) 
  {
  setclass()
  }
});

在日期选择器处于活动状态时将 class 添加到输入和标签？

add class to input and label when datepicker is active?

jquery

jquery-ui

input

datepicker

jquery-ui-datepicker