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
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 have a problem with my angular bootstrap datepicker.
I am trying to disable dates dynamically but for some reason the dates doesn't get disabled when they should be.
Here are the options for my datepicker and disabled function.
$scope.dateOptions = {
minDate: new Date(),
startingDay: 1,
dateDisabled: disabled
};
function disabled(data) {
var mode = data.mode,
date = data.date;
if(mode === 'day'){
$scope.disabledDates.forEach(function(disabledRange){
var from = new Date(disabledRange.fromDate);
var to = new Date(disabledRange.toDate);
if(DateService.inRange(date, from, to)){
console.log("disabled");
return true;
}
});
}
}
I am using popup calendar, when I open it disabled function is being called for each day in the calendar as expected and it returns true for each date that should be disabled but for some reason it doesn't disable them in the calendar.
Can someone try to point me in the right direction, I've tried making directives and decorators to refresh the calendar view but they haven't worked either.
I am using fullcalendar on my project. My user will enter event information such as event name, date, and location. everything works but the date/time.
when the user enters date and time it appears like this: 06/28/2016 10:00 AM
FullCalendar reads the date but doesn't read the time.
What do i need to do so that it can read the time?
Here is my js for fullcalendar:
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
weekends: true,
events: 'http://www.familyevent.comli.com/events.php',
eventRender: function(event) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
eventClick: function(event) {
alert("event start " + moment(event.start).format('MM/DD/YYYY hh:mm a') + " event end " +
moment(event.end).format('MM/DD/YYYY hh:mm:ss'));
}
});
});
I put in eventClick to see what fullCalendar was reading. it gets the date but the time is always 12:00 AM
Use moment.js that is already bundled with fullCalendar to convert the date to a format that fullcalendar will understand.
event.start = moment("06/28/2016 10:00 AM");
If it still doesn't work even after removing space before AM, and if your date format is well-defined, you can create the moment object step-by step, by adding the hours and minutes manually:
var time = ("06/28/2016 10:00 AM").split(" ")[1].split[":"];
event.start = moment("06/28/2016 10:00 AM").hours(time[0]).minutes(time[1]); //also add AM/PM handling
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.