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'
});
});
Related
function init() {
$('.message-composition__footer')
.prepend('<input type="text" id="datepicker_1" placeholder="Select date" class="input input--pilled event-form__date-input u-hide-focus" readonly>');
let dp = $( "#datepicker_1" );
console.log(dp);
$(dp).datepicker({
showOn: 'both',
onSelect: function (dateText, inst) {
schedule_date = dateText;
$( dp ).val(dateText);
console.log("schedule_date - " + schedule_date);
}
});
};
document.addEventListener('turbolinks:load', () => {
console.log('turbolinks:load');
init();
});
(function($) {
console.log('new-message script loaded');
init();
})(jQuery);
'turbolinks:load' event fires successfully but datepicker does not work.
if I reload the page then it works. I'm stuck here for 2 days now, please help.
Datepicker after reloading page
Datepicker without reloading page (when 'turbolinks:load' event fires)
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?
In my project, I have a simple datePicker, and another option to select range-of-days and I display chart according to the selected date(s).
when the user select a date, all works well.
but when the user select range-of-days, I want to display in the datePicker-text-box "(manual selection)".
How can I display my text in the datepicker text-box ?
My code:
$( "#datepicker" ).datepicker({
minDate: new Date(2016, 2 - 1, 11),
maxDate: new Date(2016, 2 - 1, 19),
defaultDate: new Date(2016, 2 - 1, 13),
onSelect: function(dateText, inst) {
DispalyChart(dateText);
}
});
$( "#datepicker" ).datepicker( "setDate", new Date(2016, 2 - 1, 13));
Is it something like appending placeholder to textbox...? please refer below code:
<input type="text" class="datepicker" placeholder="Start date:" />
<script>
$(".datepicker").datepicker({
onSelect: function(arg) {
$(this).val($(this).attr("placeholder") + arg);
}
});
</script>
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.
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();
}
});