试图将图像放入我的datepicker输入中

Question

我使用datepicker来选择日期，它已经正常工作。

我还有buttonImage选项，可以在图片点击时打开datepicker。

问题是，我想将我的日历图像放在左边的输入中，但我不知道如何做到这一点。

这是我的意见：

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

这里我用一些配置开始我的datepicker：

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

我试图将我的图像放在我的输入中，但我没有做到这一点。

我尝试了边距，花车，给我的图像位置绝对和我的输入位置相对而且没有任何工作..

我总是得到这个结果：

您是否看到了将我的日历图片放在左侧输入中的某种方法？

Answer 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;
}

图像会根据尺寸而变化，因此可以更好地拍摄更小的图像..

我希望它会有所帮助

Answer 2

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


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

Answer 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;}