试图将图像放入我的日期选择器输入中答案

【问题标题】：Trying to put an image inside my datepicker input试图将图像放入我的日期选择器输入中
【发布时间】：2014-06-09 01:11:22
【问题描述】：

我正在使用 datepicker 来选择一个日期，它已经可以正常工作了。

我还有 buttonImage 选项可以在点击图片时打开日期选择器。

问题是，我想将日历图像放在左侧浮动的输入中，但我不知道该怎么做。

这是我的输入：

<input type="text" class="datepicker" id="formDate" />

在这里，我使用一些配置启动我的日期选择器：

$(function(){
    $('.datepicker').datepicker({   
        showOn: "both",
        buttonImage: 'img/calendar.png',
        buttonImageOnly: true
     });
    $('.ui-datepicker-trigger').css({padding: '7px' ,  float:'left', cursor:'pointer', background:'gray' });
});

我试图将我的图像放入我的输入中，但我没有成功。

我尝试了边距、浮动、给我的图像绝对位置和我的输入相对位置，但没有任何效果..

我总是得到这个结果：

你有没有办法把我的日历图像放在我左边的输入中？

【问题讨论】：

标签： jquery css datepicker

【解决方案1】：

我建议你使用bootstrap。您可以轻松进行简单的设计。像这样。

<div class="form-group">
 <div class="input-group date" id="timepicker">
  <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </span>
  <input type="text" class="form-control" />
 </div>
</div>

输出是这样的..

我认为它更好..

但是你真的喜欢在你的文本框的背景上制作图标吗

在 HTML 中

<input type="text" id="txtSample"/>

在 CSS 中

#txtSample
{
   background: url('calendar.png') no-repeat;
}

图像会根据其大小而有所不同，因此最好获得较小的图像..

希望对你有帮助

【讨论】：

【解决方案2】：

<input tpye="text" class="datepicker"/>


input.datepicker
{
  background-image : url('images/calendarp.png');
  background-Position : 97% center;
  background-Repeat :no-repeat;
  cursor:pointer;
}

【讨论】：

【解决方案3】：

您的问题的解决方案使用 jquery 来做样式和下面的更多细节链接

这是一个例子：

<label for ="txtDOB">Date of birth</label>
    <input id="txtDOB" type="text" class="inputWithImge" />
    <img src="calendar.png" alt="Click to popup the clendar!" onclick="alert('Popup some calendar here!');" />

jquery

$(document).ready(function() {
    $(".inputWithImge").each(function(){
        $(this).add($(this).next()).wrapAll('<div class="imageInputWrapper"></div>');
    }); 
});

css

.imageInputWrapper{ width:200px; border:solid 1px #000;  }
#sampleForm input.inputWithImge { width:175px; border:none; margin-right:5px;}

【讨论】：