在datepicker处于活动状态时添加类到输入和标签？

Question

我正在尝试创建一个带有样式输入的表单（有点受shopify的结帐页面启发），当用户开始输入输入时，标签会显示。在我尝试添加jQuery UI的datepicker小部件之前，一切看起来都很完美。

这是我的表单在输入之前的样子：

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

正如您所看到的，标签“birthday”应该在用户从datepicker小部件中选择生日后显示。但是没有任何东西出现，除非用户自己键入日期...任何建议我可以用代码做什么？

这是我的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

好吧，当用户选择日期时，您需要运行公开标签的代码（因为事件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');
  }
}

如果你要创建一个工作片段（或小提琴或其他东西），我可以告诉你如何解决它。

Answer 2

您需要在jquery datepicker的select事件上设置类。这需要帮助你。

// 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()
  }
});