单击链接打开Datepicker

时间:2013-04-10 20:56:04

标签: jquery jquery-ui calendar datepicker

我在网页上使用JQuery UI的Datepicker。目前,我已成功地使用名为“mydate”的文本字段。代码如下:

$('#releasedate').datepicker({
                changeYear: 'true',
                changeMonth:'true',
                startDate: '07/16/1989',
                firstDay: 1
            });

但是,我想要一个小小的改变。而不是文本字段,我想显示一个名为“选择日期”的链接,它应该打开日期选择器,并且在选择日期时,需要更新隐藏文本字段的值。

我尝试了不同的方法,但都没有成功。 JQuery专家,能帮帮我吗?我迫不及待地想要为此获得解决方案。非常感谢你提前。

2 个答案:

答案 0 :(得分:9)

您实际上只需将日期选择器附加到<input type="hidden" />并将该链接设为触发器即可将其打开:

$(function() {
    $('#hiddenDate').datepicker({
        changeYear: 'true',
        changeMonth: 'true',
        startDate: '07/16/1989',
        firstDay: 1
    });
    $('#pickDate').click(function (e) {
        $('#hiddenDate').datepicker("show");
        e.preventDefault();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

<input id="hiddenDate" type="hidden" />
<a href="#" id="pickDate">Select Date</a>

答案 1 :(得分:1)

试试这个:

$('#datepicker').datepicker('hide');
$('a').click(function () {
    $('#datepicker').datepicker('destroy');
    $('#datepicker').datepicker({
        altField: '#shhh',
        changeYear: 'true',
        changeMonth: 'true',
        firstDay: 1,
        onSelect: function () {
            $('#datepicker').datepicker('destroy');
        }
    })
});

<强> jsFiddle example