Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I extend jQueryUI datepicker to accept an additional argument?

I like that jQueryUI datepicker is customizable enough to allow for a button to trigger showing the datepicker, but, unfortunately, it doesn't allow you to customize your own markup.

If I have markup like so:

<span>
    <input type="text" class="datepicker" />
</span>
<span>
    <button class="datepicker-trigger">Open</button>
</span>

In order to get it the datepicker to show when clicking the button, I'd have to implement the following code:

$('.datepicker').datepicker({
    showOn:'none'
});
$('.datepicker-trigger').click( function() {
    $('.datepicker').datepicker('show');
});

Here's a jsFiddle of the above code: http://jsfiddle.net/P9Qmu/

This is all well and good, but what I really want to do is pass the datepicker function an additional argument that specifies an object or selector indicating what element should trigger the showing.

For example, I'd really like to be able to do this:

$('.datepicker').datepicker({
    showOn:'none',
    trigger:'.datepicker-trigger'
});

I know how to extend jQuery to add methods and create plugins, but I'm not sure how (or if it's possible) to modify the allowed arguments in an existing function.

Does anyone know how I could extend $.datepicker to achieve what I'm looking to do or at least point me in the right direction? Any help would be much appreciated.

like image 718
Philip Walton Avatar asked Oct 12 '11 00:10

Philip Walton


People also ask

How do I increase the size of my datepicker?

By default DatePicker has standard height and width (height: '30px' and width: '143px'). You can change this height and width by using height and width property respectively. $(function () { // creates DatePicker from input $("#datePicker").

How do I set a datepicker range?

To set date range of one month from current date, we will use 'M' option to "+1" for maxDate and for minDate "0" So the current date becomes the value of minDate. See below jQuery code. $(document). ready(function(){ $("#txtDate").

How do I limit datepicker?

You can restrict the users from selecting a date within the particular range by specifying MinDate and MaxDate properties. The default value of MinDate property is 1/1/1920 and MaxDate property is 12/31/2120 . Dates that appears outside the minimum and maximum date range will be disabled (blackout).


1 Answers

You cannot extend because the datepicker does not use the widget factory and thus you can't use it to extend it but you can override the methods and can inject your code. For complete list of methods that Jquery UI Datepicker uses check datepicker.js or jquery-ui.js

You can simple add that code in your Custom JS file and after overriding you can call datepicker as usual

$.datepicker._selectDay_old = $.datepicker._selectDay;
$.datepicker._selectDay = function(id, month, year, td) {
    this._selectDay_old(id, month, year, td);
    // Your code here
    console.log("Injected Custom Method");
}

// Call Datepicker after Injecting code
$("#datepicker").datepicker()
like image 79
Khanakia Avatar answered Oct 24 '22 12:10

Khanakia