jQuery UI：datepicker - 如何在右上方添加关闭按钮（图像！）？

我想在右上角添加一个关闭按钮。jQuery UI：datepicker - 如何在右上方添加关闭按钮（图像！）？

我不想在按钮面板底部使用关闭按钮。

我该怎么做？

我想是这样的“X”：

enter image description here

2012-04-23 Keith L.

我想我的主要问题是为什么你要添加一个关闭按钮？当用户点击日历以外的其他页面时，日历会关闭。如果要专门添加关闭按钮，则必须在运行时将.append（）“img /按钮添加到控件，还可以操作日期选择器CSS将其填充到标题中。 – Lowkase 2012-04-23 12:45:27

因为我有老用户需要“X”关闭;）这很让人伤心，但如果是唯一的方法，那么我会在运行时执行此操作。 – 2012-04-23 13:01:38

如你愿意，你可以插入标记和风格它的链接，安装一个onclick处理函数，将调用.datepicker("hide")，一个built-in method日期选择的：

$("#datepicker").datepicker({ 
    beforeShow: function(input) { 
     setTimeout(function() { 
      var headerPane = $(input) 
      .datepicker("widget") 
      .find(".ui-datepicker-header"); 

      $("<button>", { 
       text: "Close", 
       click: function() { 
        $.datepicker.hide(); 
       } 
      }).appendTo(headerPane); 
     }, 1); 
    } 
});

此外，为了使空间的关闭按钮，你可能需要为了通过向左移动“下个月”按钮，并腾出空间“关闭”，调整这些风格但吨：

.ui-datepicker .ui-datepicker-next { right:2px; } 
.ui-datepicker .ui-datepicker-next-hover { right:1px; }

注：我从this proof of concept采取上面的JS代码，并相应地调整它。虽然没有测试过。

来源

2012-04-23 15:54:50 montrealist

我已添加此代码，它的工作。但是当我们下个月去的时候。关闭按钮隐藏。之后我们无法找到关闭按钮。当然还有“$ .datepicker.hide（）;”不工作。 – 2017-03-10 04:49:58

您可以更改按钮的位置是这样的：

$("#id_from_date").datepicker({ 
     closeText: "X", 
     showButtonPanel: true, 
    }); 
    $('#id_from_date').click(function() { 
     $(this).datepicker("show"); 
     var button = $(".ui-datepicker-close"); 
     $(".ui-datepicker-buttonpane").remove(); 
     $("#ui-datepicker-div").children().first().before(button); 
     button.css("margin-left", button.parent().width() - 30 + "px"); 
    });

希望它能帮助。如果没有，请告诉我。 :)

来源

2012-04-23 16:04:39 alexarsh

我不断收到此错误：

$.datepicker.hide() is not a function

通过使用@ dalbaeb的解决方案萤火虫

。它是正确的，但我不得不稍微调整它以关闭日期选择器。

这是我调整了它和它的工作对我来说：

$("#datepicker").datepicker({ 
beforeShow: function(input) { 
    setTimeout(function() { 
     var headerPane = $(input) 
     .datepicker("widget") 
     .find(".ui-datepicker-header"); 
     $("<button>", { 
      text: "Close", 
      click: function() { 

      $('#ui-datepicker-div').hide();   

      } 
     }).appendTo(headerPane); 
    }, 1); 
} 
});

我刚刚更换：

$.datepicker.hide();

有了这个：

$('#ui-datepicker-div').hide();

......它关闭日期选择器现在！希望能帮助到你！

来源

2014-03-25 13:57:20 IchegoFX

我将buttonpane移到顶部，然后在CSS中完成其余部分。

$("[data-date-picker]") 
    .datepicker({ 
    showButtonPanel: true, 
    closeText: "X" 
    }) 
    .on('click', function() { 
    var datepicker = $('#ui-datepicker-div') 
    datepicker.prepend(datepicker.find(".ui-datepicker-buttonpane")); 
    });

来源

2015-06-02 19:15:20 martinedwards

使用这个隐藏日期选择器：

$("#datepicker").datepicker('hide');

来源

2016-01-25 10:37:40

我已经被定型Done按钮

首先做到了这一点，使showButtonPanel选项，然后改变它的文字：

$(".calendar").datepicker({ 
    showButtonPanel: true, 
    closeText: '&times;' 
});

然后隐藏Today按钮和样式th e关闭按钮：

#ui-datepicker-div .ui-datepicker-current { 
    display: none; 
} 
#ui-datepicker-div .ui-datepicker-close { 
    position: absolute; 
    top: 0; 
    right: 0; 
    border: none; 
    background: transparent; 
    box-shadow: none; 
    text-shadow: none; 
    font-size: 26px; 
    line-height: 1; 
    padding: 3px 8px; 
    color: #cc6a6a; 
    font-weight: 600; 
    opacity: 0.8; 
} 
#ui-datepicker-div .ui-datepicker-close:focus { 
    outline: none; 
} 
#ui-datepicker-div .ui-datepicker-close:hover { 
    opacity: 1; 
}

来源

2017-10-25 09:04:42 harisrozak

jQuery UI：datepicker - 如何在右上方添加关闭按钮（图像！）？

回答

相关问题