When a form load I want it to already have the current date plus 5 days. So its 2/22/2011, When the page loads the text box the datepicker belongs to should show 3/1/2011. I know how to set default date to 5 days from the current date but I need it to be in the text box when the page loads.
There is actually a much easier way.
$("#datepicker").datepicker();
$("#datepicker").datepicker("setDate", "+5d");
Just figured it out.
I must be missing something, you would do something like:
$(function() {
//set your date picker
$('#test').datepicker();
//get the current date
var yourDate = new Date();
//set the current date to today + 5 days
yourDate.setDate(yourDate.getDate() + 5)
//format the date in the right format
formatDate = (yourDate.getMonth() + 1) + '/' + yourDate.getDate() + '/' + yourDate.getFullYear();
//set the input value
$('#test').val(formatDate);
});
Working sample here here...
Related
I have to display two bars in one chart, where first series (bar) is of year 2015, and second is of year 2016. But when the chart contains data for two years. Then I should need tooltip {series.name} to pick {point.key} and extract year from it lets says, 2016, then on run time change series.name to 2016 for first bar and second bar to be {2016 - 1} = 2015 on tooltip. So if data for bars is from 3-4 years, in order for first series, right now it's taking only series.name which I added, but how to make it dynamic for first series year wise that we can easily pick from {point.key}. I know highstock isn't meant to work like that, but this kind of trick I'm applying to be able to generate comparative reports for this year vs last year bars.
Note: In order to plot graph on one point, timestamps for both bars will remain same, but values will be from last year to be able to plot two bars together.
So I need to change Previous Year to 2010 and Current Year to 2011 on tooltip dynamically by picking year from headerText that is Week from Monday, Aug 9, 2011.
JS Fiddle: https://jsfiddle.net/sfwcqk1w/
You have full control what it is displayed in a tooltip via tooltip.formatter. You can make your own calculations there. In the tooltip you have access to all points from the series.
Adding additional properties for points with enabled data grouping will not work - in a tooltip you get grouped points - and those points do not have additional properties.
Your tooltip might look like this - it includes some default formatting:
formatter: function() {
var points = this.points;
var headerFormat = '<span style="font-size: 10px">' + Highcharts.dateFormat('Week from %A, %b %e, %Y', this.x) + '</span><br/>';
var pointFormat = '',
previousYear;
points.forEach(function(point) {
var name = point.series.name,
part;
if (name === 'Previous Year') {
previousYear = part = new Date(point.x).getFullYear();
} else if (name === 'Current Year') {
part = previousYear + 1
} else {
part = name;
}
pointFormat += '<span style="color:' + point.color + '">\u25CF</span> ' + part + ': <b>' + point.y + '</b><br/>';
});
return headerFormat + pointFormat;
}
example: https://jsfiddle.net/sfwcqk1w/3/
Am using AngularJS UI-Grid. Have a constant grid with 6 columns and 4 rows. In this grid i have a specific requirement where only one cell is a date picker, one cell is a dropdown, and few cells are number only. I know that for the entire column this can be applied. Is there a way to apply this for a particular cells individually?
Any sample would be of great help.
Thanks in advance.
one option is to use a template that decides what kind of cell its going to be in relation to some row-entity-property.
I created a Plunkr showcasing such a scenario.
The setup consists of a cellTemplate:
cellTemplate: "<button ng-if=\"!row.entity.datepicker\" ng-click=\"grid.appScope.delete(row)\">DELETE ROW</button><input type=\"date\" ng-if=\"row.entity.datepicker\">"
And for this example I created a datepicker:true/false property in my row-data.
for(var i = 0; i < 3; i++) {
editor.mySeasons.push({myDate: new Date(new Date().getTime() + Math.random().toFixed(12) * 100000000000), datepicker: false});
}
editor.mySeasons.push({myDate: new Date(new Date().getTime() + Math.random().toFixed(12) * 100000000000), datepicker: true});
Hope that helps.
I have a datetime chart to show daily data within 3 years in a series,
I set the x-Axis formatter to display month of a year in the general view
Screen Capture of General View
I set the 'zoomtype' to 'x', when it zoom to daily level,
the x-axis still show the month base on the formatter I set before
Screen Capture zoomto daily level
How can I change my x-axis formatter when detect zoom action?
formatter: function () { // Single digit month
var mth = Highcharts.dateFormat('%b', this.value).replace(/^[0]+/g, " ");
var year = Highcharts.dateFormat('%Y', this.value);
if (mth == 'Jan')
return mth + '<br>' + year;
else
return mth;
},
Some Method I have tried, but failed :
1) Make 3 different x-axis stand for 'day', 'month' and 'year', add/remove those axis when different zoom level is detected
2) use chart.update() in selection event
3) use chart.redraw() in selection event
Thanks!!
update
Thanks Pawel, I have tried below syntax inside the xAxis Formatter, but seems cannot return the getExtremes correctly,
please kindly advice, thanks!!
var extreme = this.getExtremes();
var extreme = this.xAxis[0].getExtremes();
I want to use jquery fullcalendar but I want to hide certain hours.
I want to show the calendar from 8.00am->11.00am and from 16:00pm->19:00pm
So the hours between 11:00am and 16:00pm must be 'hidden'.
I don't see an option to do this :
How can I force this ?
thx in advance
Kristof
You don't want to modify fullcalendar source because you want to be up to date with official branch.
Then the only way is to hide appropriate rows (hours) after fullcalendar initialization with javascript:
//hide rows with unused hours. Class names can be found in html source of
//rendered fullcalendar (fc-slotxx)
for(var i=0; i<gapshours.length; i++)
{
var gapclass = '.' + gapsclasses[i];
$(gapclass).hide()
}
//display hours for clipped borders
for(var i=0; i<sethourhours.length; i++)
{
var hourclass = '.' + sethourclasses[i] + ' th'
$(hourclass).text(sethourhours[i]);
}
After that you must remember of clipping and moving events' periods just for view purposes.
It would be very helpful to see your code; here's my best guess.
In your fullCalendar initialization code, I would use an event generating function (see event generating function)
events: function(start,end,callback){
//get your data from wherever you're getting it
var events = some_ajax_method(start, end);
//filter it down to the times you want to show
events = $.map(events, function(event){
if (event meets time criteria)
return event
else
return null;
});
callback(events);
}
I need a specific behavior of jQuery UI Datepicker:
By clicking on 'Prev/Next Month' current day of month must be automatically set in the previous/next month.
e.g.: default date was set to 8/25/2011, after clicking 'Next month' (or selecting September in dropdown), 9/25/2011 must be automatically selected (but not populated to input and datepicker itself must not disappear, so user can change this default day of month).
Thanks for advice.
You can make use of the beforeShowDay event.
var defaultDay = 15;
$('#datepicker').datepicker({
beforeShowDay: function(date) {
if (date.getDate() == defaultDay)
return [1, 'ui-state-highlight ui-state-active']; // can replace with a customised class
return [1, ''];
},
defaultDate: '07/' + defaultDay + '/2011'
});
You can assign a customised class yourself and style it to your heart's content.
Example: http://jsfiddle.net/william/nNmg2/
Note: you may need to take care of double-digit padding, if defaultDay is 1 to 9.