当日期选择器处于活动状态时，将类添加到输入和标签？答案

【问题标题】：add class to input and label when datepicker is active?当日期选择器处于活动状态时，将类添加到输入和标签？
【发布时间】：2017-10-30 09:08:08
【问题描述】：

我正在尝试创建一个带有样式输入的表单（有点受到 shopify 结帐页面的启发），当用户开始输入输入时，标签将显示在该表单中。在我尝试添加 jQuery UI 的 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>

任何帮助将不胜感激！谢谢！

（由于英语不是我的第一语言，如果我的任何话没有意义，也很抱歉。）

【问题讨论】：

标签： jquery jquery-ui input datepicker jquery-ui-datepicker

【解决方案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');
  }
}

如果您要创建一个有效的 sn-p（或小提琴或其他东西），我可以向您展示如何修复它。

【讨论】：

我的荣幸?祝你好运?
你应该使用 onClose 而不是 onSelect

【解决方案2】：

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

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

【讨论】：