为layDate输入框加上图标的方法「代码演示」

介绍

在web开发中，我们常常需要使用日期选择器，而layDate是一款基于jQuery的日期选择器插件，在使用layDate时，我们经常需要对日期选择器进行美化，比如在输入框旁边加上一个日期图标。那么，在本篇文章中，我们将介绍如何为layDate输入框加上图标的方法。

layDate简介

在开始介绍如何为layDate输入框加上图标之前，我们先来简单介绍一下layDate。

layDate是一个基于jQuery的日期选择器插件，具有简单易用、样式可定制等特点。它支持多种日期格式、支持日期范围选择、支持日期时间选择、支持年份范围限制、支持自定义皮肤等功能。

为layDate输入框加上图标的方法

1.在layDate输入框后面添加图标

我们可以通过在layDate输入框后面添加一个图标来美化layDate输入框。我们可以通过CSS样式来指定图标的位置和样式，然后使用JavaScript来控制图标的显示和隐藏。

以下是实现这一步骤的代码：

<!-- CSS样式 -->
<style>
  .icon-calendar {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 20px;
    color: #999;
    cursor: pointer;
    z-index: 1;
  }
</style>
<!-- HTML代码 -->
<div class="input-wrapper">
  <input type="text" id="date-input" class="layui-input" placeholder="请选择日期">
  <i class="iconfont icon-calendar"></i>
</div>
<!-- JavaScript代码 -->
<script>
// 使用layDate日期选择器
laydate.render({
  elem: '#date-input',
  theme: 'molv'
});
// 控制图标的显示和隐藏
var icon = document.querySelector('.icon-calendar');
var input = document.querySelector('#date-input');
icon.onclick = function() {
  laydate.render({
    elem: '#date-input',
    theme: 'molv',
    done: function(value, date) {
      input.value = value;
      icon.style.display = 'none';
    }
  });
}
input.onclick = function() {
  icon.style.display = 'inline-block';
}
</script>

上面的代码中，我们使用了CSS样式来指定图标的位置和样式。我们将图标的位置设置为absolute，然后通过top和right来将图标定位在输入框的右上角。我们还给图标设置了一些通用的样式，比如字体大小、颜色、鼠标样式等。

在HTML代码中，我们使用div元素来包裹输入框和图标。我们还给div元素设置了一个class属性，方便我们通过CSS样式来控制div元素的样式。

在JavaScript代码中，我们首先使用laydate.render方法来渲染日期选择器。在控制图标的显示和隐藏方面，我们使用了DOM操作来获取图标和输入框，然后为它们分别绑定了onclick事件，以便在用户点击输入框或图标时能够显示或隐藏日期选择器。

2.在layDate输入框前面添加图标

如果我们希望将图标放在layDate输入框的左侧，我们可以使用CSS样式来指定图标的位置和样式，然后使用JavaScript来控制图标的显示和隐藏。

以下是实现这一步骤的代码：

<!-- CSS样式 -->
<style>
  .date-wrapper {
    position: relative;
  }
  
  .icon-calendar {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 20px;
    color: #999;
    cursor: pointer;
    z-index: 1;
  }
</style>
<!-- HTML代码 -->
<div class="date-wrapper">
  <i class="iconfont icon-calendar"></i>
  <input type="text" id="date-input" class="layui-input" placeholder="请选择日期">
</div>
<!-- JavaScript代码 -->
<script>
// 使用layDate日期选择器
laydate.render({
  elem: '#date-input',
  theme: 'molv'
});
// 控制图标的显示和隐藏
var icon = document.querySelector('.icon-calendar');
var input = document.querySelector('#date-input');
icon.onclick = function() {
  laydate.render({
    elem: '#date-input',
    theme: 'molv',
    done: function(value, date) {
      input.value = value;
      icon.style.display = 'none';
    }
  });
}
input.onclick = function() {
  icon.style.display = 'inline-block';
}
</script>

上面的代码中，我们使用了CSS样式来指定图标的位置和样式。我们将图标的位置设置为absolute，然后通过top和left来将图标定位在输入框的左上角。我们还给图标设置了一些通用的样式，比如字体大小、颜色、鼠标样式等。

在HTML代码中，我们使用div元素来包裹输入框和图标。我们在div元素中先放置了图标，然后放置了输入框。我们还给div元素设置了一个class属性，方便我们通过CSS样式来控制div元素的样式。

在JavaScript代码中，我们首先使用laydate.render方法来渲染日期选择器。在控制图标的显示和隐藏方面，我们使用了DOM操作来获取图标和输入框，然后为它们分别绑定了onclick事件，以便在用户点击输入框或图标时能够显示或隐藏日期选择器。