CODEWITHSUNDEEP
jqueryjquery-uidatepickerjquery-ui-datepicker
Dev
Dev

Reputation: 791

Can JQuery UI datepicker be bound to an icon?

I have some HTML that looks like 

<select id="day"><option>Day</option></select>
<select id="month"><option>Month</option></select>
<select id="year"><option>Year</option></select>
<img src="img/some-icon.png" id="datepicker" />

I'm unable to bind $("#datepicker").datepicker() to the icon above. It's just wouldn't display the calendar.

JQuery UI examples are always bind the datepicker to an input field. I just wanted to know is there an alternative way to achieve this?

EDIT: I'm currently using a hidden field as many suggested below. Just wanted to know if there was a way for me to avoid using a hidden field

Upvotes: 0

Views: 527

Answers (4)

Dev
Dev

Reputation: 791

If anyone is interested in knowing how I created the plugin for this, follow the code below. I had to work with having a hidden field in the end but it did turn out to be the only way I could find to work with the calendar successfully.

HTML

<select id="day"><option>Day</option></select>
<select id="month"><option>Month</option></select>
<select id="year"><option>Year</option></select>
<input type="hidden" id="date-selector">

JavaScript

$.fn.showCalendar = function(options){
    var defaults ={
        selector : "#date-selector",
        calendarIcon : "./images/icons/calendar.gif",
        numberOfSelectableDays : "+60D",
        dateFormat: "dd/mm/yy",
        numberOfMonths : 3,
        daySelector : "#day",
        monthSelector : "#month",
        yearSelector : "#year"
    }

    var $this = $(this);
    var params = $.extend({},defaults, options);

    var getDateFromDropDowns = function(){
         var dateOnDropDowns =  new Date($(params.daySelector).val(),$(params.monthSelector).val(),$(params.yearSelector).val());
         return  dateOnDropDowns;
    }


    return $this.each(function(){
        $this.datepicker({
            showOn: "button",
            buttonImage: params.calendarIcon,
            minDate: 0,
            maxDate: params.numberOfSelectableDays,
            dateFormat: params.dateFormat,
            buttonImageOnly: true,
            numberOfMonths: params.numberOfMonths,
            setDate : getDateFromDropDowns,
            onClose: function(dateText, inst) {
                $(params.yearSelector).val(dateText.split('/')[2]);
                $(params.daySelector).val(dateText.split('/')[0]);
                $(params.monthSelector).val(dateText.split('/')[1]);
            }
        });
    });
},

Upvotes: 0

Code Lღver
Code Lღver

Reputation: 15603

<input type="text" id="datepicker"/>
<img src="img/some-icon.png" id="datepick" />

Use the above code to show the calender. If you want to hide the textbox then use type="hidden".

To click the hidden textbox use below JS code.

$("#datepick").click(function(){
     $("#datepicker").click();
     $("#datepicker").datepicker();
});

Upvotes: 0

Kazekage Gaara
Kazekage Gaara

Reputation: 15052

An alternative would be to let the control be bound to an input field. Make this hidden. And then onclick of your icon, simply call onFocus() of the input field.

Upvotes: 0

Eli
Eli

Reputation: 14827

You missed open " of your id, should be:

<img src="img/some-icon.png" id="datepicker" />
--------------------------------^here-----------

Upvotes: 1

Related Questions