multiple JQuery datepicker fields - javascript

I have a form with multiple JQuery datepicker fields, but the problem is the first 2 fields only work and the rest not , i searched and found this , but didn't help., here is my code :
$('.datePicker').datepicker({
changeYear: true,
changeMonth: true,
autoSize: true,
dateFormat: "dd-mm-yy",
maxDate: "0y",
showAnim: "show",
yearRange:'c-70:c+0',
});
HTML:
<input type="text" class='datePicker' name='startDate' ><span><img alt="" src="${assetPath(src: 'calendar-icon.png')}"/></span>
<input type="text" class='datePicker' name='endDate' ><span><img alt="" src="${assetPath(src: 'calendar-icon.png')}"/></span>

Try this:
$('.datePicker').each(function(){
$(this).datepicker({
changeYear: true,
changeMonth: true,
autoSize: true,
dateFormat: "dd-mm-yy",
maxDate: "0y",
showAnim: "show",
yearRange:'c-70:c+0',
});
});

Related

Use the same javascript function for multiple controls

I would like to use the same JavaScript function for two or more controls.
Is this possible and how?
this is my example:
<script>
$(function () {
$("#datepicker").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
});
<input type="text" id="datepicker">
<input type="text" id="datepicker2">
Change your selector to the Class Selector so all the equal classes get affected by the function
<script>
$(function () {
$(".datepicker").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
});
<input type="text" class="datepicker">
<input type="text" class="datepicker">
Yes you can use a multiple id selector:
$("#datepicker, #datepicker2").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
Or add a classe and use a selector by class.
You need to add id of all the elements you need to add datepicker to, just like below:
$("#datepicker,#datepicker2").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
Use a class selector instead of id selector and things should be good.
<script>
$(function () {
$(".selectorname").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
});
<input type="text" class="selectorname">
<input type="text" class="selectorname">

Add Today Button in datetimepicker with the below code

I would like to add Today button in datetimepicker calender. I have an idea to add with the syntax "todayBtn:true". But i dont know how to implement it while showing with the below code
<html>
<body>
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
</body>
</html>
<script>
$("#shankar").click(function () {
$("#shankar").datetimepicker('show').on('changeDate',function(ev) {
$('.datetimepicker').hide();
});
});
</script>
Set following properties for your datepicker (todayBtn:"linked").
$('#dateFieldId').datepicker({
todayBtn: "linked",
todayHighlight : true,
orientation: "left",
autoclose: true
});
Include jquery-ui javascript and css and add the code
refer : http://jqueryui.com/datepicker/#buttonbar
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
And to put Todays date in the panel:
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide');
});
Refer here: https://forum.jquery.com/topic/jquery-ui-datepicker-today-button
Try showButtonPanel: true
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
JSfiddle
If you mean this datetimepicker it would be as simple as that:
<html>
<body>
<input type="text" id="shankar" class="form-control" name="from_validity" placeholder="select to validity">
</body>
</html>
<script>
$(function() {
$("#shankar").datetimepicker({
showTodayButton: true,
format: 'YYYY-MM-DD hh:mm'
});
});
</script>

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.

Jquery UI Datepicker on an image

Greetings,
I want to pop up the Jquery Datepick as the image is clicked and displaying next to it. Once a date is clicked, I want to post my form.
Here how I try this:
The HTML:
<form id="myform">
<span class="quickgo">
Quick Go:
<select>
<option value="1">Discovery Channel</option>
<option value="2">History Channel</option>
</select>
<img class="calenderpick" src="/img/calender.png" />
</form>
And the javascript part:
<script type="text/javascript">
$(function() {
$(".calenderpick").click(function() {
$(this).datepicker();
alert("it is clicked!");
});
});
</script>
Once this image is clicked, I can get the "it is clicked warning" however not the date picker. I also have no clue about how to trigger the form posting event once a date is picked. In the end I want to post the selected channel and the picked date so that I can switch the page.
Thanks
Hellnar,
here's what i use regularly in my mvc apps:
<input class="date" id="StartDate" name="StartDate" value="" type="hidden" />
<script type="text/javascript">
$(document).ready(function() {
$("#StartDate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '/img/calender.png'
});
});
</script>
hope this helps (notice i use an id and not a class selector). also, check the spelling on calender - should be calendar :)
edit - if you wanted to submit the form on selecting the date, change the javascript code to:
<script type="text/javascript">
$(document).ready(function() {
$("#StartDate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '/img/calender.png',
onSelect: function(dateText, inst) { $("#myform").submit(); }
});
});
</script>
Why its not opening on clicking the image
Look into the source over here JQuery Datepicker Icon Trigger
How to post the form on selecting a date
Look into the source over here JQuery Datepicker Events - onSelect
in the onSelect event you can do something like $("#form").submit()
Hope this helps

Categories