blocks|key|1338852|text|在jqueryui中，您似乎应该添加showOn，也许(不知道是否需要)+buttonImage|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1338853|$("#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
});|code-block|syntax|javascript|1338854|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/demos/datepicker/#icon-trigger^0|I|6|11|B|1|8|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

From <a href="http://jqueryui.com/demos/datepicker/#icon-trigger" rel="nofollow noreferrer">jqueryui</a>, it seems like you should add <code>showOn</code> and maybe (don't know if it's required) <code>buttonImage</code>:

<pre><code>$("#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
});
</code></pre>

blocks|key|1338908|text|这可能对其他人有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1338909|我最终让它与JQuery+UI一起工作。|1338910|代码如下：|1338911|$(".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
++++++});|code-block|syntax|javascript|1338912|并且我将datepicker+id改为date-pick类|1338913|​|1338914|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

This might help somebody else. 

I ended up getting it to work with JQuery UI.

Code below: 

<pre><code>$(".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
 });
</code></pre>

and I changed the datepicker id to date-pick class

blocks|key|1123936|text|尝试使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1123937|++++<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>|code-block|syntax|javascript|1123938|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try using:

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

blocks|key|1338965|text|您可以像我在this+fiddle中所做的那样|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1338966|HTML：|1338967|<a+href="#"+id="toggleDP">Toggle</a>|code-block|syntax|javascript|1338968|JS：|1338969|var+$dp+=+$("<input+type='text'+/>").hide().datepicker({
++++onSelect:+function(dateText,+inst)+{
+++++++$("body").append("<div>Selected+"%2BdateText%2B"</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();
});|1338970|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/gnarf/dsbyX/2/^0|6|B|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

You could do something like I did in <a href="http://jsfiddle.net/gnarf/dsbyX/2/" rel="noreferrer">this fiddle</a>

HTML:

<pre><code>&lt;a href="#" id="toggleDP"&gt;Toggle&lt;/a&gt;
</code></pre>

JS:

<pre><code>var $dp = $("&lt;input type='text' /&gt;").hide().datepicker({
 onSelect: function(dateText, inst) {
 $("body").append("&lt;div&gt;Selected "+dateText+"&lt;/div&gt;");
 }
}).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();
});
</code></pre>

blocks|key|1124043|text|我只是在我的应用程序中很容易地解决了这个问题--如果你的datepicker打开了一个文本字段，你也可以使用这个解决方案。我为图标添加了一个$('#date_field').focus()链接。单击该图标，文本字段将获得焦点，并触发日期选择器打开。瞧。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1124044|entityMap^0|1Y|O|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

I just solved this very easily in my app -- if you have your datepicker open with a text field, you can use this solution too. I added a <code>$('#date_field').focus()</code> link to the icon. Click the icon, the text field gets focus and that triggers the datepicker to open. Voila.

blocks|key|1124108|text|使用inline+datepicker更容易做到这一点。查看我的JSFiddle。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1124109|HTML|1124110|<a+href="#"+class="datepicker">Pick+a+date</a>|code-block|syntax|javascript|1124111|JS|1124112|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();
++}
});|1124113|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/datepicker/#inline|1|http://jsfiddle.net/3vV3E/1/^0|2|H|0|W|8|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]|$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|16|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

With <a href="http://jqueryui.com/datepicker/#inline" rel="nofollow">inline datepicker</a> is pretty easier to do this. Check my <a href="http://jsfiddle.net/3vV3E/1/" rel="nofollow">JSFiddle</a>.

HTML

<pre><code>&lt;a href="#" class="datepicker"&gt;Pick a date&lt;/a&gt;
</code></pre>

JS

<pre><code>var dpToggler = $('a.datepicker').button(),
 dp = $("&lt;div /&gt;").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();
 }
});
</code></pre>

blocks|key|1124191|text|基于@camilokawerin的回答，我这样做了，我发现它是最简单和最干净的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1124192|HTML：|1124193|<a+href="#"+id="selec">Click</a>+<div+id="datepicker"+style="display:none"></div>|code-block|syntax|javascript|1124194|JS：|1124195|$("#datepicker").datepicker();
$('#selec').click(function(){
++++$('#datepicker').toggle();
});|1124196|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Based on @camilokawerin answer, I did this and I find it the easieast and cleanest solution:

HTML:

<pre><code>&lt;a href="#" id="selec"&gt;Click&lt;/a&gt; &lt;div id="datepicker" style="display:none"&gt;&lt;/div&gt;
</code></pre>

JS:

<pre><code>$("#datepicker").datepicker();
$('#selec').click(function(){
 $('#datepicker').toggle();
});
</code></pre>

I am using JQuery's UI datepicker: <a href="http://jqueryui.com/demos/datepicker/" rel="noreferrer">http://jqueryui.com/demos/datepicker/</a>

implemented here: 

<a href="http://www.clients.eirestudio.net/old/" rel="noreferrer">http://www.clients.eirestudio.net/old/</a>

I want to use a link as the trigger but I can't get it to work.

Here is my code: 

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

&lt;p class="clearfix hidden"&gt;
 &lt;input id="" class="input float datepicker" type="input" name="" value="" /&gt;
 &lt;a class="calendar ui-icon ui-icon-calendar"&gt;Date&lt;/a&gt;

 &lt;span class="mid-info"&gt;To&lt;/span&gt;
 &lt;input id="" class="input datepicker" type="input" name="" value="" /&gt;
 &lt;a class="calendar" href="#"&gt;Date&lt;/a&gt;
&lt;/p&gt;
</code></pre>

Any ideas?

JQuery UI Datepicker: Making a link trigger datepicker

我使用的是JQuery的UI日期选择器：在此处实现：我想使用一个链接作为触发器，但我不能让它工作。下面是我的代码：// JQuery UI$("#datepicker").datepicker({      changeMonth: true,      changeYear: true,      maxDate: ...

问JQuery UI日期选择器:创建链接触发器日期选择器
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery UI日期选择器:创建链接触发器日期选择器EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery UI日期选择器:创建链接触发器日期选择器
EN