Datebox to only show the calendar when the user clicks the calendar icon

[morib]

Hi, I need the datebox to NOT show the calendar when a user types in the text field but only when the user clicks on the calendar icon. The user should be able to type in the text field.

What is the way to implement this ?

Thanks!

[stworthy]

To prevent from displaying the calendar panel when press something on input box, override the 'keyHandler'.

Code:

$('#dd').datebox(...).datebox('options').keyHandler.query = function(){
	$(this).datebox('hidePanel');
};

[morib]

Perfect, thanks for the hint !

Here is the final code fragment:

        $('#periodStartDate').datebox('options').keyHandler.query = function () {
            $(this).datebox('hidePanel');
        };

[morib]

The above solution works for when the user clicks the text part of the datebox.  However, when the user types-in the text part of the datebox the calendar part still pops-up...

I tried to override the other keys but the calendar still pops-up...

        $('#periodStartDate').datebox('options').keyHandler.query = function () {
            $(this).datebox('hidePanel');
        };
        $('#periodStartDate').datebox('options').keyHandler.up = function () {
            $(this).datebox('hidePanel');
        };
        $('#periodStartDate').datebox('options').keyHandler.down = function () {
            $(this).datebox('hidePanel');
        };
        $('#periodStartDate').datebox('options').keyHandler.left = function () {
            $(this).datebox('hidePanel');
        };
        $('#periodStartDate').datebox('options').keyHandler.right = function () {
            $(this).datebox('hidePanel');
        };
        $('#periodStartDate').datebox('options').keyHandler.enter = function () {
            $(this).datebox('hidePanel');
        };

What I need is for the calendar to never show unless the user click on the icon.  How can I override all events on the text part of the databox ?

Thank you for your assistance.

[stworthy]

Please refer to this example http://jsfiddle.net/kV679/

[morib]

That is great, thanks !

What I added is on click of the calendar icon, I set the current date of the Calendar to the selected data from the text data (after performing a conversion on the input text).

            onShowPanel: function () {
                var date = GetDateFromEntry($('#periodStartDate').combobox('getValue'));
                var c = $('#periodStartDate').datebox('calendar');
                c.calendar('moveTo', Date.parse(date));