My code is
jQuery(function() {
jQuery("#fromDatepicker").datepicker({
changeMonth : true,
changeYear : true,
dateFormat: 'mm/dd/yy'
});
});
jQuery(function() {
jQuery("#toDatepicker").datepicker({
changeMonth : true,
changeYear : true,
dateFormat: 'mm/dd/yy'
});
});
and input fields are
<input type="text" id="fromDatepicker" name="searchStartDate" size="20">
<input type="text" id="fromDatepicker" name="searchStartDate" size="20">
the calender is displaying but,
when I select a date on the calendar, the date is not selecting and not entering the date into the text field.
i am using
jquery-1.6.2.js
jquery-1.6.2.min.js
jquery.ui.core.js
jquery.ui.datepicker.js
jquery.ui.datepicker.css
You are including the same version of jQuery twice, jquery-1.6.2.js and jquery-1.6.2.min.js. Just load the latter and this should stop some of the issues you are having.
Additionally, you have unnecessarily put the code into 2 jQuery(); calls, they could be put into one like this
jQuery(function() {
jQuery("#fromDatepicker").datepicker({
changeMonth : true,
changeYear : true,
dateFormat: 'mm/dd/yy'
});
jQuery("#toDatepicker").datepicker({
changeMonth : true,
changeYear : true,
dateFormat: 'mm/dd/yy'
});
});
You can simplify this entire thing a bit:
<input type="text" id="fromDatepicker" size="20" />
<input type="text" id="toDatepicker" size="20" />
jQuery(function() {
jQuery("#fromDatepicker, #toDatepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy'
});
});
See it in action here: http://jsfiddle.net/MarkSchultheiss/jUsTr/
By putting the comma between the selectors they are two selectors.
Related
I implemented in my app a JQ Datepicker calendar on its default version, but I cannot understand how to show in the input field always the date the today date to be precise. Now when I open the page where is the datepicker, the input field is blank until I select the date I need.
What I would like to see is that the date is always visible on the input filed if that possible.
My Datepicker:
//Date Picker
$("*[data-behavior~=shipping-date-input]").datepicker({
onSelect: function() {
digest = cargoflux.generateUUID();
cargoflux.resetCalculatedFields();
clearTimeout(timeOut);
timeOut = setTimeout(function() {
if (cargoflux.validInput()) {
cargoflux.resetCalculatedFields();
cargoflux.getAvailableCarrierProducts();
}
}, 1500);
},
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
altField: "#recorded-at-alt",
dateFormat: "yy-mm-dd",
minDate: "-1Y",
maxDate: "+1Y"
});
Screenshot of what I mean as you see the input is blank in his initial state:
To populate the value of the text field, you can use $.datepicker.formatDate( format, date, options ) feature. here is an example:
$(function() {
var dtFt = "yy-mm-dd";
$("#datepicker").datepicker({
onSelect: function() {
/*digest = cargoflux.generateUUID();
cargoflux.resetCalculatedFields();
clearTimeout(timeOut);
timeOut = setTimeout(function() {
if (cargoflux.validInput()) {
cargoflux.resetCalculatedFields();
cargoflux.getAvailableCarrierProducts();
}
}, 1500);
*/
},
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
//altField: "#recorded-at-alt",
dateFormat: dtFt,
minDate: "-1Y",
maxDate: "+1Y"
}).val($.datepicker.formatDate(dtFt, new Date()));
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
As you can see, we populate the text field value, $("#datepicker").val();.
Hope that helps.
I'm using two datepickers in my project, start date and end date.
The first one open the second calendar with show method.
I notice the next button on the second calendar close and reopen the calendar.
I want to avoid this "open/reopen" issue.
What am i doing wrong ?
HTML
<input id="startDate" type="text" /><br />
<input id="endDate" type="text" /><br />
Javascript
$(function(){
$('#startDate').datepicker({
dateFormat: 'dd-mm-yy',
onClose: function (dateText, inst) {
$('#endDate').datepicker("show");
}
});
$('#endDate').datepicker({
dateFormat: 'dd-mm-yy'
});
});
Please check my code : http://jsfiddle.net/8w8v9/3078/
I have a dirty solution, I can only suppose what happen: you show the "endDate" datepicker before is totaly closed the first one and this creates some conflict.
The JSFiddle
$(function() {
$('#startDate').datepicker({
dateFormat: 'dd-mm-yy',
onClose: function(dateText, inst) {
setTimeout(function() {
$('#endDate').datepicker('show');
}, 50);
}
});
$('#endDate').datepicker({
dateFormat: 'dd-mm-yy'
});
});
Have the following code... (in a bootstrap environment)
<script>
$(document).ready(function(){
$( "#DateValidfrom" ).datepicker( {
showAnim: "clip",
minDate: +2,
maxDate: "+24M +1D",
dateFormat: "DD, d M yy",
altFormat: "yy-mm-dd",
altField: "#alt-date",
changeMonth: true,
changeYear: true,
onClose: function() {
var date2 = $('#DateValidfrom').datepicker('getDate');
date2.setDate(date2.getDate()+364)
$( "#DateValidTo" ).datepicker("setDate", date2);
}
});
$( "#DateValidTo" ).datepicker({dateFormat: "yy-mm-dd"});
});
</script>
All works good - no probs UNTIL I click out of the datepicker field say to go to fill out a another field, come back to the datepicker field, click, and get the error "Uncaught TypeError: Cannot read property 'setDate' of null(…)"
I refresh the page - all good again..
So, first click - works well, click out and come back again - no go - error as above.
This part of the code the problem?
onClose: function() {
var date2 = $('#DateValidfrom').datepicker('getDate');
date2.setDate(date2.getDate()+364)
$( "#DateValidTo" ).datepicker("setDate", date2);
}
The 3 fields are
<input type="text" id="DateValidfrom" name="DateValidfrom" readonly class="form-control" required>
<input type="hidden" id="alt-date" name="DateValidfrom" />
<input name="DateValidTo" type="hidden" id="DateValidTo">
Arrrgghhhh.... Surely it can't be this simple???
Changed
onClose: function() {
To
onSelect: function() {
Seems to work? Correct?
When I use the jquery datepicker, it almost always is configured as such:
$('#dateFld').datepicker({
dateFormat: 'mm/dd/yy',
showOn: 'button',
buttonText: 'Edit date value',
buttonImage: '<s:url includeParams="none" value="/images/calendar.gif"/>',
buttonImageOnly: true
});
...
<p>Date: <input type="text" id="dateFld" /></p>
The only thing that tends to change each time I define a field like this is the buttonText value. I would love to be able to use the input field's title attribute as the buttonText value so that I could configure all my datepickers using a .datepicker class selector instead. Something like this:
$('.datepicker').datepicker({
dateFormat: 'mm/dd/yy',
showOn: 'button',
buttonText: $(this).attr('title'),
buttonImage: '<s:url includeParams="none" value="/images/calendar.gif"/>',
buttonImageOnly: true
});
...
<p>Date: <input class="datepicker" type="text" id="dateFld" title="Edit date value" /></p>
This approach almost works, but I'm ending up with the title from the page, not the selected input field. Thoughts?
$('.datepicker').each(function() {
$currentDatepicker = $(this);
$currentDatepicker.datepicker({
dateFormat: 'mm/dd/yy',
showOn: 'button',
buttonText: $currentDatepicker.attr('title'),
buttonImage: '<s:url includeParams="none" value="/images/calendar.gif"/>',
buttonImageOnly: true
});
});
This should work !
I am using JQuery's UI datepicker: http://jqueryui.com/demos/datepicker/
implemented here:
http://www.clients.eirestudio.net/old/
I want to use a link as the trigger but I can't get it to work.
Here is my code:
// JQuery UI
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy'
});
<p class="clearfix hidden">
<input id="" class="input float datepicker" type="input" name="" value="" />
<a class="calendar ui-icon ui-icon-calendar">Date</a>
<span class="mid-info">To</span>
<input id="" class="input datepicker" type="input" name="" value="" />
<a class="calendar" href="#">Date</a>
</p>
Any ideas?
You could do something like I did in this fiddle
HTML:
Toggle
JS:
var $dp = $("<input type='text' />").hide().datepicker({
onSelect: function(dateText, inst) {
$("body").append("<div>Selected "+dateText+"</div>");
}
}).appendTo('body');
$("#toggleDP").button().click(function(e) {
if ($dp.datepicker('widget').is(':hidden')) {
$dp.show().datepicker('show').hide();
$dp.datepicker("widget").position({
my: "left top",
at: "right top",
of: this
});
} else {
$dp.hide();
}
//e.preventDefault();
});
I just solved this very easily in my app -- if you have your datepicker open with a text field, you can use this solution too. I added a $('#date_field').focus() link to the icon. Click the icon, the text field gets focus and that triggers the datepicker to open. Voila.
Try using:
Text here
<input type="hidden" id="inputID"/>
...
<script type="text/javascript">
$(document).ready(
function()
{
$('#inputID').datepicker();
}
);
</script>
This might help somebody else.
I ended up getting it to work with JQuery UI.
Code below:
$(".date-pick").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImage: 'http://www.example.com/elements/images/calendar.png',
buttonImageOnly: true
});
and I changed the datepicker id to date-pick class
Based on #camilokawerin answer, I did this and I find it the easieast and cleanest solution:
HTML:
Click <div id="datepicker" style="display:none"></div>
JS:
$("#datepicker").datepicker();
$('#selec').click(function(){
$('#datepicker').toggle();
});
From jqueryui, it seems like you should add showOn and maybe (don't know if it's required) buttonImage:
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImage: 'images/calendar.gif', // adapt this to your image
buttonImageOnly: true
});
With inline datepicker is pretty easier to do this. Check my JSFiddle.
HTML
Pick a date
JS
var dpToggler = $('a.datepicker').button(),
dp = $("<div />").css('position', 'absolute').hide().datepicker().appendTo(dpToggler);
dpToggler.on('click', function(e) {
e.preventDefault();
if (dp.is(':hidden')) {
dp.show().position({
my: 'left top',
at: 'right top',
of: this
});
} else {
dp.hide();
}
});