My question is the same as the one here:
Highstock date input jquery ui datepicker position changes
But I'm using Bootstrap datepicker instead of jQuery. I noticed it has on("show", ... ), on("hide" ...) instead of beforeShow, onClose respectively. But then I don't really know how to change their bodies to work with my datepicker.
try this
setTimeout(function () {
$('input.highcharts-range-selector', $(chart.container).parent())
.datepicker({
format: "dd/mm/yyyy",
todayBtn: "linked",
orientation: "auto left",
autoclose: true,
todayHighlight: true
});
}, 0);
Related
On page load I initialized datetimepicker to this:
$('#txtdate').datetimepicker({
inline: true,
sideBySide: true,
maxDate: someDate,
minDate: curentDate,
enabledHours: HoursArray(CurrentDayOpenTime, CurrentDayCloseTime)
});
but on new date selection I want to update/overwrite enabledHours (because on new date enabledHours are different) using below function.
$(document).on('dp.change', manipulateTime);
//function////
function manipulateTime(td){
if (!td.date.isSame(td.oldDate, "day")) {
$('#txtdate').datetimepicker({
inline: true,
sideBySide: true,
maxDate: SomeCloseDate,
minDate: SelectedDayOpenTime,
enabledHours: HoursArray(SelectedDayOpenTime, SelectedDayCloseTime)
});
}
}
I couldn't able to overwrite the previous enabledHours. It always shows enabled hours which is generated on page load.
Can someone help me on this?
You can try the below code to change enabledHours:
$(document).on('dp.change', manipulateTime);
function manipulateTime(td){
//Your code....
$('#txtdate').data('DateTimePicker').enabledHours([21,22,23]); //change the array of enabled hours here
}
I am using this datepicker .
My issue is when I click on textbox on which datepicker is attached, it opens the calendar with today's date selected.
What I want is when a calendar opens first time it should not have any date selected until a user select a date.
Example:(Today's Date is 08/06/2014)
As in the second picture the calendar opens with today's date selected.
Below is my code for assigning datepicker to textbox
$("input[id*=txt_DateFrom]").datepicker({
beforeShowDay: function(date) {
if (pnlValue == 'none') {
return date.valueOf() >= now.valueOf();
}
},
daysOfWeekDisabled: [0, 6],
autoclose: true,
todayHighlight: false,
todayBtn: true
});
use set date function to set null date. try this its simple.
$("input[id*=txt_DateFrom]").datepicker("setDate" , null);
I found the solution
$("input[id*=txt_DateFrom]").datepicker({
beforeShowDay: function(date) {
if (pnlValue == 'none') {
return date.valueOf() >= now.valueOf();
}
},
daysOfWeekDisabled: [0, 6],
autoclose: true,
todayHighlight: false,
todayBtn: true
}).datepicker("setDate",null);
I Hope it might help someone..
The problem in selecting current date when using minDate : moment().
Solution: try using like below:
$('#datetimepicker6').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment().millisecond(0).second(0).minute(0).hour(0),
clear : false
});
I'm experiencing an issue using the JQUI datepicker where I have a from and to text field. Picking a from date, auto selects the next field using the onClose function.
When trying to change the month or year from the drop down boxes in the to text field the datepicker popup gets reset and the user has to re-select the month or year. This only appears to happen on the to field.
Am I doing something wrong in the code to cause this behaviour? I've noticed this in Chrome and Firefox on Windows.
JS FIDDLE DEMO
CODE
$('#sfd_start').datepicker({
inline: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
minDate: 0,
maxDate: "+2y",
dateFormat: "yy-mm-dd",
onClose: function (selectedDate) {
$('#sfd_end').datepicker('option', 'minDate', selectedDate);
$('#sfd_end').focus();
}
});
$('#sfd_end').datepicker({
inline: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
maxDate: "+2y"
});
EDIT: There doesn't seem to be an issue if the datepicker is not auto opened after selecting a from date if that helps narrow it down.
Seems to be a timing issue. Change your onClose function to:
onClose: function (selectedDate) {
$('#sfd_end').datepicker('option', 'minDate', selectedDate);
setTimeout(function () {
$('#sfd_end').focus();
}, 100);
}
jsFiddle example
i have added function for datepicker. but my date picker is not open on the first click.
here is my jsp code..
To
here is my query functions..
function addDate(idName) {
$(idName).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
}function addTime(idName) {
$(idName).timepicker({`
ampm: true,
timeFormat: "hh:mmtt"
});
}
please help me.. thanks.
DatePickers and TimePickers are assigned to focus events automatically. You do not need to call $(object).datepicker() every time, just at initialization and it will open properly when focused.
A good approach is to assign the .datepicker class to every object you want to have the DatePicker assigned and, then, assign the DatePicker to all elements of that class.
$(document).ready(function() {
$(".datepicker").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
});
Do the same thing with TimePickers.
Try this bellow and i don know what language your using?
#Html.TextBoxFor(model=> model.Filters.EndTime,new { #class = "date" })
$('.date').datepicker({ dateFormat: "yy/mm/dd", maxDate: '+0d', minDate: '-600d'});
above code is written in asp.net mvc
You need to call
addDate(idName)
on document ready like this
$(function() {
addDate(idName)
});
I have two jQueryUI datepickers on my page.
They're initialised as below:
jQuery("#departureDate").datepicker({
beforeShow: function() {
getDatesForCalendar("outbound");
},
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
hideIfNoPrevNext: true,
onSelect: function(dateText, inst) { jQuery('#returnDate').datepicker("show"); }
});
jQuery("#returnDate").datepicker({
beforeShow: function() {
getDatesForCalendar("return");
},
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
showOn: "focus",
hideIfNoPrevNext: true,
defaultDate: +1
});
Before they pop up they check which dates are available to them using getDatesForCalendar(), which contains no code that should hide or show the calendars.
My problem is that when the first calendar calls up the second (which is does onSelect), the second calendar flashes up for a second and then disappears. This is a FF/Chrome only issue, it doesn't appear to affect IE8.
I've tried a number of solutions including changing the tabindex (there is now none at all), disabling the show on focus functionality, and finally instead of manually calling datepicker("show") I've tried calling focus() on the field it's tied to. Nothing has worked!
Any advice would be greatly appreciated.
Many thanks,
Jack
Instead of showing the datepicker in the onSelect use the onClose event.
jQuery("#departureDate").datepicker({
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
hideIfNoPrevNext: true,
onClose:function()
{
jQuery('#returnDate').datepicker('show');
}
});
jQuery("#returnDate").datepicker({
numberOfMonths:3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
showOn: "focus",
hideIfNoPrevNext: true,
defaultDate: +1
});
Looks like you will have to roll back to jquery ui 1.7.3 (loaded under Manage Resources in jsfiddle)
http://jsfiddle.net/6haqv/3/
Possible bug in jquery ui 1.8
I wanted to pop up second datepicker only if a date is selected in first one. If I use onClose, the second datepicker will show up even if did not select any date.
As work around to this problem I tried following and it works.
var checkin = $('#dpd1').datepicker({
minDate:now,
numberOfMonths:2,
showOn: "button",
buttonImage: "img/calender.png",
buttonImageOnly: true,
onSelect: function( selectedDate ) {
var dateObject=new Date(selectedDate);
dateObject.setDate(dateObject.getDate()+1);
$( "#dpd2" ).datepicker( "option", "minDate", dateObject );
showSecond=true;
},
onClose: function( selectedDate ) {
if(showSecond===true){
$( "#dpd2" ).datepicker("show");
showSecond=false;
}
}
});
I just got the same bug in jQuery UI 1.11.0.
I found a workaround by calling a setTimeout in the onSelect datepicker method:
$('#arrival-date, #departure-date').datepicker({
showAnim: 'slideDown',
onSelect: function(dateText, inst){
if($('#arrival-date').val() != '' && $(this).is('#arrival-date'))
{
setTimeout(function() {
$('#departure-date').datepicker('show');
}, 100);
}
}
});
Im not sure is that solution is good, did you saw what happen if you click on the first calendar, but you dont select any day, just simple click outside, and then try again to open it?
I try it and you can open the first calendar the first time, the second time you cant, you need to open the second calendar, and then you can again click on the first calendar.