cancel jQuery datepicker default click on input

Question

I would like to ask if there is any way to cancel the default behaviour of the jquery datepicker, that so when I click the input field where the datepicker is attached, my custom logic to flow and the datepicker calendar to not be shown. I read the documentation and used the suggested "hide" option but it seems to not work flawless. Here is a js fiddle that I used: jquery datepicker jsfiddle

function hideIt(){
    $( "#datepicker" ).datepicker( "hide" );
    //custom logic
}

function showIt(){   
    $( "#datepicker" ).datepicker("show");
}

checkout: https://stackoverflow.com/questions/9749895/date-picker-automatically-opens — Ajay, Sep 01 '17 at 12:07

Znaneswar · Answer 1 · 2017-09-01T15:05:06.907

0

Try like this

function hideIt(){ 
}

function showIt(){ 
$( "#datepicker" ).datepicker();
$('#datepicker').focus();
$('#datepicker').prop('disabled', true);
}

edited Sep 01 '17 at 15:05

answered Sep 01 '17 at 12:13

Znaneswar

3,329
2
16
24

That is totally irrelevant with the question. This still displays the calendar on the first click and removes it after that, therefore its not very helpful. I am asking about a solution that blocks the execution of the displaying the calendar. – Bojidar Lyutskanov Sep 01 '17 at 12:32
remove $("#datepicker").datepicker(); in first JS function and test – Znaneswar Sep 01 '17 at 12:36
http://jsfiddle.net/ezKwN/220/ do you mean this? If yes, please click on the input field and tell me if the calendar shows up, because if it is ( I am almost 100% sure it does), then its not helping at all... I am trying to make the calendar pop only when button is clicked, but when input field is clicked nothing to happen visually.... – Bojidar Lyutskanov Sep 01 '17 at 12:39

score 0 · Answer 2 · answered Sep 01 '17 at 12:22

No need to add button. Just give it to handle datepicker.

$(function() {
  $("#datepicker").datepicker({
    constrainInput: true,
    showOn: 'button',
    buttonText: 'Show It !'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js
"></script>
<p>Date:
  <input type="text" id="datepicker" /> </p>

Note : To prevent to write on text box make it disable if you want.

Its not an option for me, because the form is from a template and you cant modify the inbuilt button to have a custom look. — Bojidar Lyutskanov, Sep 01 '17 at 12:26

score 0 · Accepted Answer · answered Sep 01 '17 at 13:07

I have found a solution to the problem by using "fictional" button with imageOnly property. Here is the jsfiddle: jsfiddle

Javascript:

$(function() {
  $("#datepicker").datepicker({
        showOn: 'button',
    buttonImage: 'randomlocation/nonexisting-calendar-img.gif',
    buttonImageOnly: true,
    buttonText: ''
  })
});


function hideIt(){
        //custom logic
}

function showIt(){   
    $( "#datepicker" ).datepicker("show");
}

Html:

<p>Date: <input type="text" id="datepicker" onclick="javascript:hideIt();" /></p>
<input type="button" onclick="javascript:showIt();" value="Show It !" />

cancel jQuery datepicker default click on input

3 Answers3