Open JQuery Datepicker by clicking on an image w/ no input field

by

Turns out that a simple hidden input field does the job:

<input type="hidden" id="dp" />

And then use the buttonImage attribute for your image, like normal:

    $("#dp").datepicker({
        buttonImage: '../images/icon_star.gif',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
     });

Initially I tried a text input field and then set a display:none style on it, but that caused the calendar to emerge from the top of the browser, rather than from where the user clicked. But the hidden field works as desired.

JSFiddle

More Related Contents:

  1. jquery ui datepicker and mvc view model type datetime
  2. jQuery Datepicker onchange event issue
  3. jQuery Date Picker – disable past dates
  4. jQuery UI Datepicker onchange event issue
  5. jQuery Datepicker with text input that doesn’t allow user input
  6. jQuery UI Datepicker – Multiple Date Selections
  7. Jquery datepicker restrict dates in second date field based on selected date in first date field
  8. Unobtrusive validation in Chrome won’t validate with dd/mm/yyyy
  9. How to get the selected date value while using Bootstrap Datepicker?
  10. Disable specific days of the week on jQuery UI datepicker [duplicate]
  11. jQuery UI Datepicker – Disable specific days
  12. Twitter Bootstrap Datepicker within modal window
  13. jQuery UI Datepicker enable only specific days in array
  14. Jquery datepicker – only day and month
  15. how to add a day to a date using jquery datepicker
  16. Limit bootstrap-datepicker to weekdays only?
  17. How can I enable jquery validation on readonly fields?
  18. jQuery datepicker- 2 inputs/textboxes and restricting range
  19. Highlight dates in specific range with jQuery’s datepicker
  20. Changing minDate and maxDate on the fly using jQuery DatePicker
  21. How to dynamically set bootstrap-datepicker’s date value?
  22. Detect change to selected date with bootstrap-datepicker
  23. Jquery Date picker Default Date
  24. JQuery UI Datepicker, reverse the order of the year in the dropdowns
  25. JQuery DatePicker and beforeShowDay
  26. JQuery DatePicker ReadOnly
  27. JQuery Datepicker – no default date
  28. Set value of hidden field in a form using jQuery’s “.val()” doesn’t work
  29. Is there a way to prevent overlapping events in jQuery FullCalendar?
  30. Validating array inputs using jquery validation plugin

Leave a Comment