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?
Related
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">
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>
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',
});
});
I don't know how to use the function to set the selected date of the date input (Popup Datepicker), and set that date in the calendar below (Inline Datepicker). I have seen this function to set it: _setDate, or _setDateDatepicker, but I don't know how to implement it. Please, if someone could help me, I would appreciate it.
$.datepicker.setDefaults({
showOn: "both",
showWeek: true,
firstDay: 1,
dateFormat: 'dd/mm/yy',
maxDate: '+0',
selectOtherMonths: true,
regional: 'uk',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
<body>
<h2>Popup Datepicker</h2>
<div data-demo-html="true">
<input type="date" id="date_val" data-role="datebox" style="margin-top: 10px" data-options='{"mode": "calbox", "useNewStyle":true,"useFocus": true}'>
</div>
Evento:
<input type="text" id="event" name="event">
<input type="button" id="btn" value=" Enviar " onClick="myFunction()">
<h2>Inline Datepicker</h2>
<div data-demo-html="true">
<input type="text" id="cal" data-role="date" data-inline="true">
</div>
I think you can use the same functions as a regular datepicker.
Initialize the datepicker with the defaultDate option specified:
$( ".selector" ).datepicker({
defaultDate: +7
});
Get or set the defaultDate option, after initialization:
// Getter
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
// Setter
$( ".selector" ).datepicker( "option", "defaultDate", +7 );
Source
Update: Just found some methods that might be useful
$( ".selector" ).datepicker( "setDate", "10/12/2012" );
API reference
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.