We Keep Coding

cancel jQuery datepicker default click on input

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");
}

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.

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 !" />

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

Bootstrap datepicker: second field to allow dates later than the selected date on first field

When user selects a date on the first field, the second field must start on the selected date, and disallow any selection of previous date. I created a fiddle for reference
http://jsfiddle.net/gfokvuxr/ and here is the code:
Thank you
<label class="form-label">Loading Date</label>
<div class="input-append success date">
<input type="text" name="loadingdate" id="dt1" class="span12" required >
<span class="add-on"><span class="arrow"></span><i class="fa fa-th"></i></span>
</div>
<label class="form-label">Delivery date</label>
<div class="input-append success date">
<input type="text" name="deliverydate" id="dt2" class="span12" required >
<span class="add-on"><span class="arrow"></span><i class="fa fa-th"></i></span>
</div>
this is the JS code
$('.input-append.date').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
startDate: new Date()
});

Based on my reading of the API, it would be thus:
$('#loadDate').change(function(event, ui){
$('#deliverDate').datepicker( "setDate", (Date)($( "#loadDate" ).datepicker( "getDate" )));
$('#deliverDate').datepicker( "option", "minDate", (Date)($( "#loadDate" ).datepicker( "getDate" )));
});
https://jsfiddle.net/1a09hyff/1/
Give each datepicker an ID and use those to register an event listener on the first to update the second's minDate.
That said, it isn't working for some reason; I can't get any of the modification methods (including destroy) to actually work. A couple throw internal errors (I've been seeing a lot of those lately, where date.getMonth() throws getMonth is not a function etc).

Bootstrap datepicker auto fill end date

I am using the Bootstrap Datepicker here in order to display a simple calendar range picker. All is working well so far, however I would like some additional functionality that I can't seem to figure out.
I would like to select a start date and then automatically fill in the end date (+10 days).
I'm sure this is possible however I can't figure it out.
I have created a Fiddle. Any help is greatly appreciated.
My JS is as follows;
$( document ).ready(function() {
$('#sandbox-container .input-daterange').datepicker({
format: "dd/mm/yy",
startDate: "0d",
endDate: "+10d",
todayBtn: "linked",
clearBtn: true,
multidateSeparator: " ",
forceParse: false,
daysOfWeekDisabled: "0,6",
orientation: "top auto",
todayHighlight: true,
toggleActive: true
});
});
My HTML is as follows;
<div class="col-md-5" id="sandbox-container">
<h2>Select borrow date</h2>
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-lg form-control" name="start" placeholder="borrow date" /> <span class="input-group-addon">to</span>
<input type="text" class="input-lg form-control" name="end" placeholder="return date" />
</div>
</div>

You can check this link
Datepicker using jquery
You have to include javascript on change fuction of first datepicker
$('firstdatepicker').change(function() {
var date2 = $('firstdatepicker').datepicker('getDate', '+1d');
date2.setDate(date2.getDate()+1);
$('seconddatepicker').datepicker('setDate', date2);
});

Create multiple external jQuery datepicker functions and call selectively

This is a follow up to my original post here: Call jQuery datepicker from external file
EDITED:
Added correct jQuery code
I have a group of Perl reports all in one file. Most of the reports require the user to enter either a date or a date range. This would be simple if each report was in its own file, but since it's not, I need a way to call either the range-based datepicker or single date datepicker.
Here is the jQuery code:
$(function () {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
showOn: "both",
buttonImageOnly: true,
buttonImage: "../images/calendar.gif",
dateFormat: "yyddmm",
altField: "#forminp1",
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
},
onSelect: function () {
$(this).datepicker.val();
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
showOn: "both",
buttonImageOnly: true,
buttonImage: "../images/calendar.gif",
dateFormat: "yyddmm",
altField: "#forminp2",
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
},
onSelect: function () {
$(this).datepicker.val();
}
});
$("#single").datepicker({
defaultDate: "+1w",
numberOfMonths: 2,
showOn: "both",
buttonImageOnly: true,
buttonImage: "../images/calendar.gif",
altField: "#forminp1",
changeMonth: true,
changeYear: true,
dateFormat: "yymmdd",
onSelect: function () {
$(this).datepicker.val();
}
});
});
To test, I created an HTML file containing the following:
<p>Double Dates</p>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<!--test the output-->
<p>Output the result</p>
<input type="text" id="forminp1" size="30"> <input type="text" id="forminp2" size="30">
<p>Single Date</p>
<input type="text" id="single">
The datepicker won't attached to any of the ids unless I remove the function targeting the single id.
Is there a way to build the correct datepicker based on the input id?

jQuery elements not getting passed to perl cgi

I have a html pg which has got two forms and upon submit its calling a perl script. But in the script cgi param is not getting any values.
Html code --
<fieldset class="col_4" name="BetweenRange"> <legend>Range Comparison</legend>
<form action="call_range.pl" method="post" id="range1" target="Range1">
<table width="100%" border="1">
<tr>
<td><input name="r1_1stdate" type="text" id="from1" required/><input name="r1_2nddate" type="text" id="to1" required/></td>
</form>
<form action="call_range.pl" method="post" id="range2" target="Range2">
<td><input name="r2_1stdate" type="text" id="from2" required/><input name="r2_2nddate" type="text" id="to2" required/></td>
</tr></form>
<tr>
<td><iframe id="I3" align="left" name="Range1" >Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></td>
<td><iframe id="I4" align="left" name="Range2" >Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></td>
</tr>
</table>
</fieldset>
Script goes here --
$(function() {
$( "#from1" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to1" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to1" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from1" ).datepicker( "option", "maxDate", selectedDate );
}
});
<!-- RangeComparison form submit , getting called after selecting 2nd date-->
$("#to1").change(function() { this.form.submit(); }); });
$(function() {
$( "#from2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to2" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from2" ).datepicker( "option", "maxDate", selectedDate );
}
});
<!-- RangeComparison form submit , getting called after selecting 2nd date-->
$("#to2").change(function() {
this.form.submit(); });
});
Perl code --
use strict;
use CGI;
my $query = CGI->new;
print $query->header;
my $from1 = $query->param('from1');
my $to1 = $query->param('to1');
print "</br>Value passed for form1 $from1</br>$to1";
print $query->end_html;
Where is this going wrong ? I would appreciate if someone can help.
Link to JSFiddle http://jsfiddle.net/jDd5U/

You HTML is seriously invalid. You have forms where forms are not allowed. Browser error recovery is likely to break them as it tries to generate a valid DOM. Use a validator.
The name of a form control is used as the key in submitted data. You are trying to look it up by the id which isn't submitted.