I am not sure what cause it to fire three times after selecting a date through date calendar. Here is the options set for rangeSelector
rangeSelector:{
enabled:true,
inputEnabled: true,
inputDateFormat: '%d/%m/%Y',
inputEditDateFormat: '%d/%m/%Y',
inputDateParser: function (value) {
value = value.split('/');
console.log(value);
return Date.UTC(
parseInt(value[0]),
parseInt(value[1]) - 1,
parseInt(value[2])
);
}
}
by using backbone.view jquery selector, here how i initiate the chart
this.$el.highcharts(Options, this.extra);
and extra as additional settings to trigger the date picker
highlightSer: function (chart){
setTimeout(function () {
$('input.highcharts-range-selector', $(chart.container).parent())
.datepicker({
format: "dd/mm/yyyy",
todayBtn: "linked",
autoclose: true,
todayHighlight: true,
orientation: "auto right"
});
}, 0);
}
is anyone experience this?
#seeARMS solution from this SO worked for me, with one modification:
Create a separate function for your event
One function has the datePicker method and your settings:
$('input_with_date_picker').datePicker({...});
A separate function controls your on changeDate event:
$(document).on('changeDate', 'input_with_date_picker', function({..do something..}));
or:
$('input_with_date_picker').on('changeDate', function({..do something..}));
Update:
The fiddle you provided in the comments is working as expected because of your added function:
$('input.highcharts-range-selector').on('changeDate', function(e) {
alert(e.date);
});
On page load, it executes twice because you have two elements that match. They seem to both be generated by this JS:
rangeSelector:{
enabled:true,
inputEnabled:true,
inputDateFormat:"%d/%m",
inputEditDateFormat:"%d/%m/%Y",
inputDateParser: function (value) {
value = value.split('/');
console.log(value);
return Date.UTC(
parseInt(value[0]),
parseInt(value[1]) - 1,
parseInt(value[2])
);
}
},
If you change the date on either of the elements, the function executes once, which is the goal of your post.
You may be indicating it's not working because the dates aren't updating when you select a new date from the datePicker. I'm not sure why this is, I'm not familiar with highcharts.
Related
I am using datetimepicker with a pair of linked selectors.
Upon the initial load the 'start_date' should show the current date and the 'expiry_date' should show the 'start_date + 30 days. This works as intended. However when a new 'start_date' is selected the expiry should always default to be 30 days ahead.
This is what I have:
$(function () {
function plusCalendarMonthToDate(e) {
return moment(e.date).add(30, 'days').millisecond(0).second(0).minute(0).hour(0)
}
defaultStartDate = new Date();
$('#datetimepicker-start').datetimepicker({
format: 'YYYY-MM-DD 00:00:00',
minDate: defaultStartDate,
defaultDate: defaultStartDate
});
$('#datetimepicker-expiry').datetimepicker({
useCurrent: false,
format: 'YYYY-MM-DD 00:00:00',
minDate: $('#datetimepicker-start').val(),
defaultDate: plusCalendarMonthToDate(defaultStartDate)
});
$("#datetimepicker-start").on("dp.change", function (e) {
$('#datetimepicker-expiry').data("DateTimePicker").minDate(e.date);
// when a start_date is selected, set the expiry to 30 days plus
plusCalendarMonth = plusCalendarMonthToDate(e);
$('#datetimepicker-expiry').data("DateTimePicker").defaultDate(plusCalendarMonth);
});
$("#datetimepicker-expiry").on("dp.change", function (e) {
$('#datetimepicker-start').data("DateTimePicker").maxDate(e.date);
});
});
When I select a new start_date the expiry_date does not update. I think it is because I already set the 'defaultDate' in the initialisation, if I remove it then the feature works but when I lose my initial default value for the expiry_date. How can I over-write the initial defaultDate?
Seems the solution is to use 'date()' not 'defaultDate()':
$('#datetimepicker-expiry').data("DateTimePicker").date(plusCalendarMonth)
My current calendar looks like this :
full-calendar design
What I'm trying to do is change calendar date when I click a date in datepicker ( which is already done using .fullCalendar('gotoDate',date ) ) , the thing is , to get the resources and events I need to re-send the query to the server with the new value of 'date' , otherwise the calendar won't reload the data.
Here's the url I'm using to get the resources :
resources:
{
url: '/general?handler=AllResources',
data: function () {
return {
// must return the new date to display in calendar
};
}
}
'AllResources' method only get a few records depending on the date specificied
as parameter.
BTW : I'm rendering fullCalendar in document.ready , then I have the following function to give my datepicker the 'changeDate' functionality :
$('.fc-center h2').datepicker({
format: "dd/mm/yyyy",
language: "es",
dateFormat: "dd/mm/yyyy",
todayHighlight: true
}).on("changeDate", function (e) {
var date = moment(e.date);
$("#calendar").fullCalendar('gotoDate', date);
});
Im not sure if i unserstand your problem.
So if you change the date, the resources don't get updated?
Have a look at refetchResourcesOnNavigate
[edit]
Try this:
$('.fc-center h2').datepicker({
format: "dd/mm/yyyy",
language: "es",
dateFormat: "dd/mm/yyyy",
todayHighlight: true
}).change(function (e) {
var mydate =moment($(this).val(),'DD/MM/YYYY').format('YYYY-MM-DD');
$("#calendar").fullCalendar('gotoDate', mydate);
});
And then when initializing the calender set 'refetchResourcesOnNavigate: true' to make sure whenever the calendar changes the resources get loaded again
I am using jquery steps for wizard. But inside if I use datepicker or qtip functionality not working. I switched .js references still the issue the same.
Why datepicker event not working inside steps? console not throwing any error.
#Html.TextBoxFor(model => model.BirthDate, null, new {#class = "SPE-Formcontrol section_detail-font-14 calendar", #style = "display: inline", #readonly = "readonly", Name = "BirthDate", id = "BirthDate"})
<script src="~/Scripts/join.js"></script>
<script src="~/Scripts/jquery.steps.js"></script>
join.js
$("#BirthDate").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-110:-17',
showOn: "button",
buttonImage:"image",
buttonImageOnly: true,
beforeShow: function () {
$('#ui-datepicker-div').css('z-index', 9999);
},
dateFormat: 'mm/dd/yy',
maxDate: '-17Y'
});
$('.tip').qtip({
style: {
classes: 'myTipClass tipShadow qtip-rounded'
}
});
You need to initialize jquery steps first and then other plugin initialization
$(function () {
//intilize steps first
$("#wizard").steps({
bodyTag: "fieldset",
headerTag: "h4"
});
//intilize other plugins later
$("#BirthDate").datepicker();
});
Hopefully, this resolves your issue
Problem is that datepicker puts triggers on elements and the class 'hasDatepicker' saying that this element has been initialized. Jquery steps moves elements around, triggers are lost.
But the datepicker elements still have the class after moving, thus won't be triggered again if you call datepicker once more. So if you want to reinitialize datepicker you should add this in jquery steps definition:
onInit: function (event, currentIndex, newIndex) {
// Remove hasDatepicker class from initialized elements and remove the button next to datepicker input
$('.hasDatepicker').removeClass('hasDatepicker').siblings('.ui-datepicker-trigger').remove();
// reinitialize datepicker, offcourse replace .datepickerfields with your specific datepicker identifier
$('.datepickerfields').datepicker();
},
Same problem here
It works fine OUTSIDE the wizard, but once the input is set inside, the parent div of the datepicker does appear in the DOM, but it's empty...
No datepicker will appear
tried to declare the
$(".datepicker").datepicker();
BEFORE or AFTER the steps() function, nothing change.
I tried to use the onInit() feature of the steps() function, it still doesn't work
form.steps({
...
onInit : function (event, currentIndex) { $(".datepicker").datepicker(); },
...
});
In this fiddle inside the view appointments tab,there is add timing button.When I click on the button then a new row gets added.Now when I click on the calender icon then a pop comes up which shows the current hour and minutes.But I want it to show 00:00. Can any body please tell me how to do?
I have tried to modify the setDate method inside the bootstrap date time picker source code
setLocalDate: function (localDate) {
if (!localDate)
this.setValue(null);
else
this.setValue(Date.UTC(localDate.getFullYear(), localDate.getMonth(), localDate.getDate(), localDate.getHours(), localDate.getMinutes(), localDate.getSeconds(), localDate.getMilliseconds()))
},
to
setLocalDate: function (localDate) {
if (!localDate)
this.setValue(null);
else
this.setValue(00, 00, 00, 00,00, 00, 00))
},
but it did not work.Please anybody tell me what else do I have to change
As #RobG already said, you can simply set the value in the initialization routine
ko.bindingHandlers.datepicker1 = {
init: function (element, valueAccessor, allBindingsAccessor) {
$(function () {
$(element).parent().datetimepicker({
pickDate: false,
pickSeconds: false,
minuteStep: 10
});
$(element).parent().datetimepicker('setValue', '00:00');
});
// ...
See updated JSFiddle
Update:
If you want 00:00 as default value only, you must pick the value from the valueAccessor first and set 00:00, if the value is undefined
init: function (element, valueAccessor, allBindingsAccessor) {
$(function () {
$(element).parent().datetimepicker({
pickDate: false,
pickSeconds: false,
minuteStep: 10
});
var accessor = valueAccessor();
var val = ko.unwrap(accessor) || '00:00';
$(element).parent().datetimepicker('setValue', val);
});
// ...
See JSFiddle
Update:
Unfortunately, I cannot find any documentation about version 2.2.0.
Testing, if the accessor is a function, seems to work
var val = valueAccessor();
if (typeof(val) == 'function')
val = val();
$(element).parent().datetimepicker('setValue', val || '00:00');
Updated JSFiddle
I'm using Trent Richardson's great Datetimepicker. However, I'm running into a specific issue in which the plugin does not act like the traditional jQuery UI Datepicker.
When you start with a blank date, then press next or previous to change the month, in Datetimepicker it automatically inserts a date and time, where jQuery UI does not. The fact that it adds that is causing issues in my application, and I would just like it not to do that in the first place.
Here's my initialization:
function datepickerAdd() {
$('input[name=valueTextField]').addClass('datepicker');
$( ".datepicker" ).datetimepicker({
dateFormat: 'm/d/yy ',
timeText: '<spring:message code='customMetaData.datetimepicker.time'/>',
controlType: 'select',
timeFormat: "h:mm TT",
ampm: true
});
$('input[name=valueTextField]').attr('onPaste', 'return false')
}
Does anyone have anywhere to start with this?
There's no such option for Date, like alwaysSetTime for Time in this Datetimepicker. So you have to implement it by yourself. Just add these lines in your datetimepicker call:
onChangeMonthYear: function(year, month, dpInst, tpInst) {
if(!tpInst.timeDefined && !dpInst.dateDefined) {
this.value = '';
dpInst.dateDefined = null;
}
},
onSelect: function(date, dpInst) {
dpInst.dateDefined = true;
}
Check working JSFiddle here