CODEWITHSUNDEEP
jqueryjquery-uicalendardatepicker
Sasanka Panguluri
Sasanka Panguluri

Reputation: 3138

Open Datepicker by clicking a Link

I am using JQuery UI's Datepicker on my web page. Currently, I have been successful in getting it to work with a textfield called "mydate". The code is as follows:

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

However, I want a small change. Instead of the text field, I would like to display a link called "Select Date" which should open the datepicker, and upon selecting a date, a hidden text field's value needs to be updated.

I tried different ways to do it, but have been unsuccessful. JQuery experts, can you please help me? I am eagerly waiting to receive a solution for this. Thank you very much in advance.

Upvotes: 2

Views: 11471

Answers (2)

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107576

You can actually just attach the datepicker to an <input type="hidden" /> and make the link a trigger to open it:

$(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>

Upvotes: 10

j08691
j08691

Reputation: 207953

Try this:

$('#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

Upvotes: 1

Related Questions