使用便捷日期选择与标从技主题

StackOverflow https://stackoverflow.com/questions/802379

  •  03-07-2019
  •  | 
  •  

题

我有一个日期选择控制的设置使用的便捷，我还使用便捷的主题，这提供了一堆的缺省标，我想到使用。

的日期选择允许指定一个特定的图像，即：

<script type="text/javascript">
  $(document).ready(function() {
    $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
  });
</script>

到显示器的图标标设定使用这样的：

<span class="ui-icon ui-icon-calendar"></span>

是有一个易于整合的两个或者我只需破解出来的样式/图像手动？

有帮助吗？

解决方案

我担心你必须手动完成。默认情况下，Datepicker插件使用以下HTML插入指定的 buttonImage ：

<img title="..." alt="..." src="images/ui-icon-calendar.png" class="ui-datepicker-trigger">

顺便说一句，您可能想要使用...... 

$(function() {
 // your code here
});

......而不是...... 

$(document).ready(function() {
 // your code here
});

其他提示

我这样做了

$("#DateFrom").datepicker({
    showOn: 'button'
}).next('button').button({
    icons: {
        primary: 'ui-icon-calendar'
    }, text:false
});

只需修改它在日历输入旁边插入的按钮即可。默认情况下，它们在文本中抛出三个椭圆，所以我也删除它。

我建议把图像进入

input.date_picker {
  text-align: center;
  background-image: url("images/ui-icon-calendar.png");
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 18px;
  width: 78px;
}

喜欢

date_picker_example

我用 这个图标 从好的 tango图标 项目还提供 png

优点：

  • 独立从javascript
  • 载荷立即与DOM
  • 未来的日期投入很容易增加

最好的方法是;

首先使用您已经使用过的javascript。

 <script type="text/javascript">
   $(document).ready(function() {
        $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
   });
 </script>

然后，添加以下css代码; 

<style type="text/css">
.ui-datepicker-trigger
{
        padding:0px;
        padding-left:5px;
        vertical-align:baseline;

        position:relative;
        top:4px;
        height:18px;
}
</style>

此css将帮助您根据需要正确对齐日历图像。

对Evs的回答只是一个小问题......（非常有帮助，谢谢Evs！）。

它也适用于IE8，我添加了CSS来改变悬停时的光标：

button.date-picker-button-hidden:hover
{
    cursor: pointer; 
}

http://jqueryui.com/demos/datepicker/#icon-trigger

提供了示例代码的一个非常好的示例。

借用和扩展Loktar的答案，你可以尝试这样的事情，注意我只在FF10中测试了这个，但我不明白为什么它在其他浏览器中不起作用。

$('.date-picker').datepicker({showOn: 'button'})
    .next('button').addClass('date-picker-button-hidden')
    .after($('<span/>')
        .addClass('ui-icon').addClass('ui-icon-calendar').addClass('date-picker-icon'));

请注意，在此示例中， date-picker-button-hidden 和 date-picker-icon 是我自己的类，因为我不喜欢样式化jQuery CSS类直接。应用以下CSS：

span.date-picker-icon
{
    display: inline-block;
    z-index: -1;
    position: relative;
    left: -16px;
}

button.date-picker-button-hidden
{
    opacity: 0.0;
    filter: alpha(opacity=0);
    height: 16px;
    width: 16px;
    margin: 0;
    padding: 0;
}

这实际上是在按钮后面放置一个常规的jQuery span图标。该按钮是完全透明/不透明的（通过CSS），但由于它仍然位于图标的顶部，单击该图标会触发按钮单击事件。

我使用这个jquery代码来获取textinput字段的日期选择器和jquery UI图标，以作为datepicker按钮上的图像。

// Apply jQuery UI DatePicker to all controls with class = datepicker
    $('.datepicker').datepicker({
        showWeek: true,
        dateFormat: "yy-mm-dd",
        buttonImage: "ui-icon-calendar",
        regional: "sv",
        minDate: "-10Y",
        maxDate: "+10Y",
        showButtonPanel: true,
        buttonImageOnly: false,
        showWeekNumber: true,
        firstDay: 1,
        showOtherMonths: true,
        selectOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        showOn: "both"

    }).next('button').text('Show calendar').button({ icons: { primary: 'ui-icon-calendar' }, text: false });

更改：showOn：“both”，//按钮

<input type="text" name="date_from" id="date_from" />        
<input type="text" name="date_to" id="date_to" />

$(function() {
$("#date_from").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_to").datepicker("option", "minDate", selectedDate);
    }
});
$("#date_to").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_from").datepicker("option", "maxDate", selectedDate);
    }
});
});

http://jsfiddle.net/wimarbueno/fpT6q/

在开始手动设置按钮/图标的路线时，您可以使用如何将jQueryUI DatePicker的图标触发器与Bootstrap 3的输入组组合以使JS点击事件将焦点设置在相关日期输入字段，从而触发jQueryUI日期功能出现。

或者，如文档所述，您可以使用 show 方法显示日期选择器（注意“如果日期选择器附加到输入，则输入必须是可见的，以显示日期选择器。”。）。

$（＆quot; .selector＆quot;）。datepicker（＆quot; show＆quot;）;

这允许您使用输入字段旁边的任何按钮/图像/图标，并且能够单击按钮/图像/图标以触发输入字段的日期功能。

我通过将我的图标按钮的HTML直接添加到 buttonText 选项并禁用 buttonImage 选项来实现此功能。

$('.datepicker').datepicker({
    showOn: "both",
    buttonText: '<i class="icon-calendar"></i>',
    dateFormat : "DD, MM d"
});
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top