Jquery ui JQuery UI日期选择器：创建链接触发器日期选择器

我正在使用JQuery的UI日期选择器：

在这里实施：

我想用一个链接作为触发器，但我无法让它工作

这是我的密码：

// JQuery UI
$("#datepicker").datepicker({
      changeMonth: true,
      changeYear: true,
      maxDate: '0m 0d',
      minDate: new Date(2000, 1 - 1, 1),
      dateFormat: 'dd-mm-yy'
});

<p class="clearfix hidden">
    <input id="" class="input float datepicker" type="input" name="" value="" />
    <a class="calendar ui-icon ui-icon-calendar">Date</a>

    <span class="mid-info">To</span>
    <input id="" class="input datepicker" type="input" name="" value="" />
    <a class="calendar" href="#">Date</a>
</p>

//jqueryui
$（“#日期选择器”）。日期选择器({
变化月：对，
变化年：是的，
maxDate:'0m 0d'，
minDate：新日期（2000年1月1日-1日），
日期格式：“dd-mm-yy”
});

有什么想法吗？

从中，您似乎应该添加

shown

，也许（不知道是否需要）

按钮图像

：

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    maxDate: '0m 0d',
    minDate: new Date(2000, 1 - 1, 1),
    dateFormat: 'dd-mm-yy',
    showOn: 'button', 
    buttonImage: 'images/calendar.gif', // adapt this to your image
    buttonImageOnly: true
});

---

这可能会帮助其他人

我最终让它与jQueryUI一起工作

代码如下：

$(".date-pick").datepicker({
      changeMonth: true,
      changeYear: true,
      maxDate: '0m 0d',
      minDate: new Date(2000, 1 - 1, 1),
      dateFormat: 'dd-mm-yy',
      showOn: 'button', 
      buttonImage: 'http://www.example.com/elements/images/calendar.png', 
      buttonImageOnly: true
      });

我将datepicker id更改为date pick类

尝试使用：

    <a href="javascript:void(0);" onclick="$.datepicker._showDatepicker($('#inputID')[0]);">Text here</a>
    <input type="hidden" id="inputID"/>
    ...
    <script type="text/javascript">
      $(document).ready(
         function()
         {
             $('#inputID').datepicker();
         }
      );
    </script>

...
$（文件）。准备好了吗(
函数（）
{
$（'#inputID'）。日期选择器（）；
}
);

你可以像我在年做的那样做

HTML:

JS:

var$dp=$（“”）.hide（）.日期选择器({
onSelect：函数（日期文本，inst）{
$（“正文”）.append（“选定的”+日期文本+”）；
}
}).附于（“主体”）；
$（“#toggleDP”）.button（）。单击（函数（e）{
如果（$dp.datepicker（'widget'）。是（':hidden'））{
$dp.show（）.datepicker（'show'）.hide（）；
$dp.datepicker（“小部件”）.位置({
我的：“左上”，
在“右上方”，
作者：这个
});
}否则{
$dp.hide（）；
}
//e、 预防默认值（）；
});

我刚刚在我的应用程序中很容易地解决了这个问题——如果你用文本字段打开了日期选择器，你也可以使用这个解决方案。我添加了一个

$（“#日期字段”）.focus（）

链接到图标。单击图标，文本字段获得焦点并触发日期选择器打开。瞧。

使用更容易做到这一点。检查我的电脑

HTML

JS

var dpToggler=$（'a.datepicker'）.button（），
dp=$（“”）.css（'position'，'absolute'）.hide（）.datepicker（）.appendTo（dpToggler）；
dpToggler.on（'click'，函数（e）{
e、 预防默认值（）；
如果（dp.is（'：hidden'））{
dp.show（）位置({
我的‘左上’，
在“右上角”，
作者：这个
});
}否则{
dp.hide（）；
}
});

基于@camilokawerin的回答，我这样做了，我发现它是最简单、最干净的解决方案：

HTML:

---

谢谢你的回复。不幸的是，我试过了，但它似乎也不起作用。我不知何故忘记了以前的

datepicker（）

函数，正如您自己的答案所示，

buttonImage

属性可能必须进行调整。很抱歉不准确。你最后用了什么HTML？您是否也将日期选择类添加到链接中？在我这方面有问题。这根本不能回答问题。哈哈。这不是使用链接来触发日历-它只是使用buttonImage来打开它。仍然需要一个输入字段，您可能有，也可能没有…谢谢，到目前为止，我找到的最好的解决方案：）这个解决方案在Chrome 29中不起作用，jQuery 1.9在Chrome上对我有效，我唯一的问题是它将我滚动到底部，因此，我编辑了它，在单击链接并将其附加到当前单击元素的父元素时，只添加了一次日期选择器。我喜欢这个解决方案，简单快捷。谢谢！此技术还可用于创建一个简单的按钮，该按钮在单击时打开日期选择器（如果使用“显示：”按钮“日期选择器”参数，则不会创建额外的侧边按钮），例如：

在其他地方执行正常的

$（“#日期”）。日期选择器（）

。这是正确的答案，允许容易维护的代码。到目前为止，最简单的解决方案，添加的代码和hijinks最少。非常感谢。是的，我喜欢这个：）+1看起来不错，但你如何获得选定的日期？@tiho我在选择的

方法中选择它。。。一切都在文件里
<a href="#" id="toggleDP">Toggle</a>

var $dp = $("<input type='text' />").hide().datepicker({
    onSelect: function(dateText, inst) {
       $("body").append("<div>Selected "+dateText+"</div>");
    }
}).appendTo('body');

$("#toggleDP").button().click(function(e) {
    if ($dp.datepicker('widget').is(':hidden')) {
        $dp.show().datepicker('show').hide();
        $dp.datepicker("widget").position({
            my: "left top",
            at: "right top",
            of: this
        });
    } else {
        $dp.hide();
    }

    //e.preventDefault();
});

<a href="#" class="datepicker">Pick a date</a>

var dpToggler = $('a.datepicker').button(),
    dp = $("<div />").css('position', 'absolute').hide().datepicker().appendTo(dpToggler);

dpToggler.on('click', function(e) {
  e.preventDefault();
  if (dp.is(':hidden')) {
    dp.show().position({
      my: 'left top',
      at: 'right top',
      of: this
    });
  } else {
    dp.hide();
  }
});

<a href="#" id="selec">Click</a> <div id="datepicker" style="display:none"></div>

$("#datepicker").datepicker();
$('#selec').click(function(){
    $('#datepicker').toggle();
});