I'm really just looking to assign additional information to dates. I am currently setting up datepicker with the following:
beforeShowDay: function(date){
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, ajaxDates) != -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
},
Where ajaxDates is an array containing a list of available dates such as:
var ajaxDates = [ "26-2-2015", "27-2-2015"];
It's for a booking system were I have another array containing the number of seats available for every date. I had seen a post that I can no longer find were someone was attaching additional information to the dates. If someone could point me in the right direction that would be great!
Edit: I have noticed that the a title is attached to each date which on hover shows the tooltip as "Available" or "Unavailable". Is there any easy method to access through the datepicker?
The solution that I was referring to was:
Add custom parameter to jQuery UI Datepicker
An example of how to set additional parameters is as followed:
var input = $("#datepicker");
var result = $("#result");
var courses = {
"02-09-2013" : "history",
"10-09-2013": "physics"
};
input.datepicker({
dateFormat: 'dd-mm-yy',
showWeek: true,
firstDay: 1,
numberOfMonths: 3,
onSelect: function(dateText, pickerObj){
result.attr("data-course-id", courses[dateText]);
course.innerHTML = courses[dateText];
},
altField: "#result"
});
http://jsfiddle.net/Seandeburca/qbLwD/
Related
I'm fetching the chart dynamically ..
This is chart of current month which ranges from 1-31
I want to have a range filter for example:
2012/01/1 to 2014/01/1
How can I do this labels will be too many?
Lets say I decide on doing it yearly but what if the user want to see from this year jan to nov i should make it monthly then how I can know? if its monthly or yearly or what is the best way to do this?
I think it would be the best to add two tabs with names monthly and yearly, so user can easy click on tab to change views. For example on monthly view, it will be too much to show all months in one chart(I think it will be mess with data), you should do this only with one month. Just add datetimepicker only with months(same for years), on change you can call function which will change chart also(see here how it works https://www.tutorialspoint.com/How-does-jQuery-Datepicker-onchange-event-work). Also you can set the range of years.
So, now when you have function which will change chart, just change data by getting selected month and your data for this month. There is an update function, which you can call when you have updated data and it will change chart(See docs: https://www.chartjs.org/docs/latest/developers/updates.html).
Here is an example of code for adding new dataset to existing chart by clicking button:
document.getElementById('addDataset').addEventListener('click', function() {
var colorName = colorNames[barChartData.datasets.length % colorNames.length];
var dsColor = window.chartColors[colorName];
var newDataset = {
label: 'Dataset ' + (barChartData.datasets.length + 1),
backgroundColor: color(dsColor).alpha(0.5).rgbString(),
borderColor: dsColor,
borderWidth: 1,
data: []
};
for (var index = 0; index < barChartData.labels.length; ++index) {
newDataset.data.push(randomScalingFactor());
}
barChartData.datasets.push(newDataset);
window.myBar.update();
});
Just in case anybody was searching and found this thread because they wanted dynamic units for their plotted points in Chart.js, then the below code will give you and idea of how to configure your options -> tooltips -> callbacks -> label
options: {
tooltips: {
callbacks: {
label: (item) => {
if (condition1 == true) {
return (item.yLabel / 1000000000).toFixed(2) + ' Gbps'
}
else if (condition2 == true) {
return (item.yLabel / 1000000).toFixed(2) + ' Mbps'
}
else if (condition3 == true) {
return (item.yLabel / 1000).toFixed(2) + ' Kbps'
}
else {
return item.yLabel.toFixed(2) + ' bps'
}
},
},
},
},
This is an example that converts bps to Kbps, Mbps, Gbps, etc. as necessary.
Is there any way to have a Calendar input for dat.GUI? I'd like to be able to use the UI to input dates if possible. My work around is currently to enter the dates as Text, but I would prefer to have some type of calendar. Thanks!
I know the question was asked sometime ago, but it hasn't been answered yet. Out of a similar need, I created this codepen that demonstrates the integration of jquery-simple-datetimepicker with dat.GUI. The pertinent section/logic follows:
$(function(){
//Create dat.gui instance
var gui = new dat.GUI({closeOnTop: true, width:450});
var calendarFolder = gui.addFolder("Calendar");
//Add calendarDate to dat.GUI
var dateController = calendarFolder.add({Date: ""}, "Date");
calendarFolder.open();
//Append Date Picker to calendarDate and show it.
var guiInput = $(calendarFolder.domElement).find("input").eq(0);
//Create event handler to update the dat.GUI input element when calendar is hidden
var datePickerOptions = {"onHide": function(handler){ fnSetGuiDate(); } };
//Add the calendar to the dat.GUI input element and immediately show it for demonstration
guiInput.appendDtpicker(datePickerOptions).handleDtpicker('show');
//Initialize the dat.GUI input value
fnSetGuiDate();
function fnSetGuiDate() {
var date = guiInput.handleDtpicker('getDate');
var strDate = date.getFullYear() + "-" +
fnFormat(date.getMonth() + 1) + "-" +
fnFormat(date.getDate()) + " " +
fnFormat(date.getHours()) + ":" +
fnFormat(date.getMinutes());
dateController.setValue(strDate);
function fnFormat(mnthOrDate) {
return mnthOrDate < 10 ? "0" + mnthOrDate : mnthOrDate;
}
}
});
I have a page in which I have a date field and a CKeditor textarea(which creates an iframe at the textarea place) . On date picker I have defined a blur function to check date validity, which works correctly.
However, the issue is when I click on a datepicker field the calendar popup gets generated then I enter a invalid date and then click on inside ckeditor , the calendar remains open however focus gets lost but still the blur function doesn't get called. Hence invalid date goes to server. (I need client side validation for this date field) .
$(function(){
$(".dateClass").datepicker({
changeMonth : true,
changeYear : true,
yearRange: "-10:+10",
dateFormat : "dd/mm/yy",
buttonText : "Choose",
showOtherMonths : true,
selectOtherMonths : true
});
$(".dateClass").blur(function(){
if(this.value!=undefined && this.value!=null && this.value.replace(/^\s+|\s+$/g, '')!=''){
if(!isDateValid(this.value) && calendarOpen==0){
alert('Please enter a valid date in dd/mm/yyyy format');
this.focus();
}
}
});
});
CKeditor is actually embedding an iframe in the page.
How do I call blur function when user clicks on date field and then on iframe ??
thnx I got it to work by doing a way around
document.onfocusout = function(e){ //for IE8 and lesser
if( e === undefined ){
//keeping validations here
}
}
$(window).blur( function(e){ //for other browsers –
if( e !== undefined ){
//keeping validations here
}
}
Use onSelect for your required situation as
$(".dateClass").datepicker({
changeMonth : true, changeYear : true,
yearRange: "-10:+10", dateFormat : "dd/mm/yy",
buttonText : "Choose", showOtherMonths : true,
selectOtherMonths : true ,
onSelect: function(dateText, inst) { var date = $(this).val(); var time = $('#time').val(); alert('on select triggered');
}
});
Sorry for unformated code.
Hope it will help
http://forum.jquery.com/topic/jquery-datepicker-onblur
This question is similar to knockoutjs databind with jquery-ui datepicker, but instead of the jQueryUI datepicker, I would like to use one of the Bootstrap datepickers.
The API for the Bootstrap datepicker is different from jquery-ui, and I am having some trouble wrapping my head around making it work with knockout.js. I have created a jsFiddle to try it out.
It seems like the Bootstrap datepicker could be much simpler to use because it does not independently store the date. However, I would like to know how whether the jsFiddle is the appropriate way to use the Bootstrap datepicker widget with knockout.js i.e.
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).datepicker("destroy");
});
},
update: function(element, valueAccessor) {
}
};
Here is a sample of how you could accomplish this with the datepicker that you are using:
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function(event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(event.date);
}
});
},
update: function(element, valueAccessor) {
var widget = $(element).data("datepicker");
//when the view model is updated, update the widget
if (widget) {
widget.date = ko.utils.unwrapObservable(valueAccessor());
if (widget.date) {
widget.setValue();
}
}
}
};
It did not look like there was any destroy functionality, so I removed that piece. This handles the widgets changeDate event to update the view model, when a user changes the date. The update function handles when the view model is changed to update the widget.
If you want to bind the value to a non-observable, then it would take a little more code. Let me know if that is something that you need to support.
http://jsfiddle.net/rniemeyer/KLpq7/
my current version is a mix between the already shown solutions:
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
var unwrap = ko.utils.unwrapObservable;
var dataSource = valueAccessor();
var binding = allBindingsAccessor();
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
$(element).datepicker('update', dataSource());
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function (event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(event.date);
}
});
},
update: function (element, valueAccessor) {
var widget = $(element).data("datepicker");
var value = ko.utils.unwrapObservable(valueAccessor());
//when the view model is updated, update the widget
if (widget) {
widget.date = value;
if (widget.date) {
widget.setValue();
$(element).datepicker('update', value)
}
}
}};
The accepted answer didn't work for me with the current version of the date picker. The input wasn't being initialized with the value of the observable. I made an updated binding, to which I added this:
$(element).datepicker('update', dataSource());
That seems to do the trick.
Here's an updated fiddle that uses the latest available date picker, Bootstrap, jQuery, and Knockout: http://jsfiddle.net/krainey/nxhqerxg/
Update:
I experienced some difficulty with the date picker not playing nicely with the observable when a user would edit the value in the text field manually. The tool would immediately parse the date, and plug the result into the input field.
If the user tried to edit 10/07/2014, for example, and used the backspace or delete to remove a number (10/0/2014), the resulting value would be parsed immediately and inserted into the text input. If the value was, for a moment, 10/0/2014, the picker would shift the calendar to 09/30/2014, and plug that value into the text field. If I tried to edit the month, and the value was, for a moment, 1/7/2014, the picker would shift to January 7, 2014, and plug that value in to the text field.
You can see that behavior in this fiddle:
http://jsfiddle.net/krainey/nxhqerxg/10/
I had to update my binding with a special handler to detect focus, and bind a one-time blur event to get it to handle manual edits correctly.
$(element).on("changeDate", function (ev) {
var observable = valueAccessor();
if ($(element).is(':focus')) {
// Don't update while the user is in the field...
// Instead, handle focus loss
$(element).one('blur', function(ev){
var dateVal = $(element).datepicker("getDate");
observable(dateVal);
});
}
else {
observable(ev.date);
}
});
The fiddle referenced in the original answer has been updated to reflect this:
http://jsfiddle.net/krainey/nxhqerxg/
Here is what I Ended up
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = {
autoclose: true,
format: 'yyyy-mm-dd',
}
//var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function (event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
var myDate = event.date;
var month = myDate.getMonth() + 1;
var monthText = month;
if (month < 10)
monthText = "0" + month;
var day1 = parseInt(myDate.getDate());
var dayText = day1;
if (day1 < 10)
dayText = '0' + day1;
value(myDate.getFullYear() + '-' + monthText + '-' + dayText);
}
});
},
update: function (element, valueAccessor) {
var widget = $(element).data("datepicker");
//when the view model is updated, update the widget
if (widget) {
widget.date = ko.utils.unwrapObservable(valueAccessor());
widget.setValue(widget.date);
}
}};
There is a much simpler way to get bootstrap-datepicker.js and knockout.js working together. Typically the initialization of the datepicker inputs is invoked during/after the page load. However when knockout.js updates the value binding, the datepicker is not updated correctly with the new value and so when you focus on the datepicker input it defaults to 01-Jan-2001.
All you have to do is to destroy and reinitialise the datepicker inputs after any knockout.js value bindings are updated as per the ViewModel method below, which sets up a mapped object to be edited.
self.showEditOrderForm = function (data) {
ko.mapping.fromJS(data, self.entity);
self.mode('edit');
$('#edit-dateordered').datepicker('destroy');
$('#edit-dateordered').datepicker({
format: 'dd-M-yyyy',
title: 'Select Date',
weekStart: 1,
todayHighlight: true,
autoClose: true,
endDate: '0d'
});
};
I am using inline editing using Jeditable and datepicker. I have a column in my table which displays Date as a hyperlink. When I click on this it shows me the datepicker. And when a particular date is selected its updated in the backend and the cell now is updated with the changed value. However, am having problem with onblur event while changing month or years. This event gets triggered when I click on "Prev" or "Next" buttons on the datepicker control. This causes an exception when the date is selected. This works fine as long as the date selected is in the current month. I tried all possible solutions listed here:
stackoverflow.com/questions/2007205/jeditable-datepicker-causing-blur-when-changing-month
If settimeout the control does not change back to a normal hyperlink on closing the datepicker or on a true onblur event.
Here's my code,
$.editable.addInputType('datepicker', {
element : function(settings, original) {
var input = $('');
if (settings.width != 'none') { input.width(settings.width); }
if (settings.height != 'none') { input.height(settings.height); }
input.attr('autocomplete','off');
$(this).append(input);
return(input);
},
plugin : function(settings, original) {
var form = this;
settings.onblur = function(e) {
t = setTimeout(function() {
original.reset.apply(form, [settings, self]);
}, 100);
};
$(this).find('input').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-y',
closeAtTop: true,
onSelect: function(dateText) { $(this).hide(); $(form).trigger('submit'); }
});
},
submit : function(settings, original) { }
});
$(function() {
$('.edit_eta').editable('update_must_fix_eta.php', {
id: 'bugid',
name: 'eta',
type: 'datepicker',
event: 'click',
select : true,
width: '50px',
onblur:'cancel',
cssclass : 'editable',
indicator : 'Updating ETA, please wait.',
style : 'inherit',
submitdata:{version:'4.2(4)',tag:'REL_4_2_4',qstr:1}
});
});
I tried hacking jeditable.js as mentioned on this link: http://groups.google.com/group/jquery-dev/browse_thread/thread/265340ea692a2f47
Even this does not help.
Any help is appreciated.
Have you tried jeditable-datepicker plugin? It seems to do exactly what you need.
It enables jQuery UI Datepicker in Jeditable. Here's the demo.
Yes, I was using the same. I had to disable Prev and Next buttons which navigate to previous and next months respectively. I display 3 months calendar when the link is clicked and if the user wants to enter a date which does not fall in any of these 3 months I let him enter it manually by making the input text box editable. That solved my problem.