I want to disable future years in bootstarp datepicker calender.
I tried following code,
$('.dpd3').datepicker({
format: " yyyy",
viewMode: "years",
endDate: now(),
minViewMode: "years"
});
Thanks
Try this....
$(function(){
$('.datepicker').datepicker({
format: 'mm-dd-yyyy',
endDate: '+0d',
autoclose: true
});
});
http://jsfiddle.net/tjnicolaides/cjp7y/
$(function () {
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() + 1, 0, 0, 0, 0) ;
$('#Inputstartdatepkr').datetimepicker({
language: 'en',
pick12HourFormat: true,
pickSeconds: false,
startDate: today
});
});
Related
The ticks in my xAxis in my current chart are in the correct format, but the wrong language. For example: "22 July 21:00"
I would like them to be localized like "22 Heinäkuuta 21:00", but the "locale property" doesn't seem to change anything. Am i doing it wrong?
var config = { // my chart config
type: 'line',
data: { datasets: [] },
options: {
parsing: false,
normalized: true,
animation: false,
locale: "fi-FI", // my locale
scales: {
xAxis: {
type: 'time',
time: {
source: 'auto',
minUnit: 'hour',
displayFormats: {
minute: "dd MMMM HH:mm",
hour: "dd MMMM HH:mm",
day: "dd MMMM",
week: "dd MMMM",
month: "MMMM",
quarter: 'MMMM yyyy',
year: "yyyy",
}
}
},
},
}
}
I've read all of the document's i could find. but i can't make sense of this locale documentation
I needed to give the locale to my date library which is Luxon for me:
luxon.Settings.defaultLocale = "fi";
Moment does it in a similar way but i haven't tested this:
moment.locale("fi");
here is some more information on it
I have a formatted label displayed on the bars on my chart.
This value also gets formatted in the tooltip. Is there a way to show the unformatted, raw value on the tooltip, while keeping it formatted on the label?
https://jsfiddle.net/67u052kL/1/
var formatter = new google.visualization.NumberFormat({
pattern: 'short'
});
formatter.format(data, 1);
formatter.format(data, 3);
only format the annotation value.
to accomplish, use a custom function for the annotation role, instead of the 'stringify' function.
and you can use the formatter's formatValue method, to format a single value.
view.setColumns([0, 1, {
calc: function (dt, row) {
return formatter.formatValue(dt.getValue(row, 1));
},
type: 'string',
role: 'annotation'
}, 2, 3, {
calc: function (dt, row) {
return formatter.formatValue(dt.getValue(row, 3));
},
type: 'string',
role: 'annotation'
}]);
see following working snippet...
google.charts.load('50', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Team' , 'Actual', { role: 'style'}, 'Target'],
['Alpha' , 35976, 'color: #F6931D', 90000],
['Beta' , 40542, 'color: #FDCB2F', 104167],
['Gamma' , 111227, 'color: #8AC659', 205000],
['Delta' , 238356, 'color: #32A242', 205000],
['Epsilon', 170555, 'color: #3A81C2', 354167]
]);
var formatter = new google.visualization.NumberFormat({
pattern: 'short'
});
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return formatter.formatValue(dt.getValue(row, 1));
},
type: 'string',
role: 'annotation'
}, 2, 3, {
calc: function (dt, row) {
return formatter.formatValue(dt.getValue(row, 3));
},
type: 'string',
role: 'annotation'
}]);
var options = {
title: {position: 'none'},
orientation: 'vertical',
animation: {duration : 600, startup: 'true', easing:'out'},
annotations: {highContrast: 'true'},
legend: {position: 'none'},
// theme: 'material',
chartArea:{top:5, right: 25, width: '70%', height: '90%'},
hAxis: {format:'short'},
// vAxis: {textPosition:'in'},
// bar: {groupWidth: '90%'},
seriesType: 'bars',
series: {
1: {type: 'bars', color: 'lightgray'}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chartContentPane'));
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chartContentPane"></div>
I'm new to using the AlloyUI Scheduler. I have found how to display an alert if a item is saved, edited or deleted but I can't seem to find out how to show an alert if the item is moved, ie moved to another time or day. I would have thought that the 'edit' event would have handled this but apparently not. This is the code I have.
var eventRecorder = new Y.SchedulerEventRecorder({
on: {
save: function (event) {
alert('Save Event:');
},
edit: function (event) {
alert('Edit Event:');
},
delete: function (event) {
alert('Delete Event:');
}
}
});
var schedule = new Y.Scheduler(
{
boundingBox: '#myScheduler',
date: new Date(2018, 7, 25),
eventRecorder: eventRecorder,
items: events,
render: true,
views: [dayView, weekView, monthView, agendaView]
}
);
I did try :-
Moved: function (event) {alert('Moved');}
But it didn't work
For each view you'll need to listen to the after drag:end event for each view. Unfortunately, this event doesn't provide the dragged SchedulerEvent, so you'll need to obtain it in an appropriate way for each view:
function afterEventMoved(event, scheduler) {
var startDate;
var endDate;
// Obtain the new start and end dates in the month view.
if (event.currentTarget.originalDragNode) {
var eventNodeId = event.currentTarget.originalDragNode.get('id');
var eventsArray = scheduler.getEvents();
var movedEvent = null;
for (var i = 0; i < eventsArray.length; i++) {
if (eventNodeId === eventsArray[i].get('node').get('id')[0]) {
movedEvent = eventsArray[i];
break;
}
}
startDate = movedEvent.get('startDate');
endDate = movedEvent.get('endDate');
}
// Obtain the new start and end dates in the day and week views.
// Unfortunately, there seems to be a bug and the time of these dates
// seems to be incorrect (it seems to be the time before the event was dragged).
// The day, month, and year seem to be correct though.
else {
startDate = event.currentTarget.draggingEventStartDate;
endDate = event.currentTarget.draggingEventEndDate;
}
console.log(startDate);
console.log(endDate);
}
Just use a function like the one above during the after drag:end event for each view and you'll be able to obtain the new start and end dates of the dragged event.
YUI().use('aui-scheduler', function (Y) {
var scheduler = null;
var viewConfig = {
after: {
'drag:end': function(event) {
afterEventMoved(event, scheduler);
}
}
};
var agendaView = new Y.SchedulerAgendaView();
var dayView = new Y.SchedulerDayView(viewConfig);
var monthView = new Y.SchedulerMonthView(viewConfig);
var weekView = new Y.SchedulerWeekView(viewConfig);
var eventRecorder = new Y.SchedulerEventRecorder();
var events = [ /* ...your events here... */ ];
scheduler = new Y.Scheduler({
activeView: monthView,
boundingBox: '#myScheduler',
date: new Date(2013, 1, 4),
eventRecorder: eventRecorder,
items: events,
render: true,
views: [dayView, weekView, monthView, agendaView]
});
});
Runnable example:
<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<script type="text/javascript">
function afterEventMoved(event, scheduler) {
var startDate;
var endDate;
if (event.currentTarget.originalDragNode) {
var eventNodeId = event.currentTarget.originalDragNode.get('id');
var eventsArray = scheduler.getEvents();
var movedEvent = null;
for (var i = 0; i < eventsArray.length; i++) {
if (eventNodeId === eventsArray[i].get('node').get('id')[0]) {
movedEvent = eventsArray[i];
break;
}
}
startDate = movedEvent.get('startDate');
endDate = movedEvent.get('endDate');
}
else {
startDate = event.currentTarget.draggingEventStartDate;
endDate = event.currentTarget.draggingEventEndDate;
}
console.log(startDate);
console.log(endDate);
}
YUI().use('aui-scheduler', function (Y) {
var scheduler = null;
var viewConfig = {
after: {
'drag:end': function(event) {
afterEventMoved(event, scheduler);
}
}
};
var agendaView = new Y.SchedulerAgendaView();
var dayView = new Y.SchedulerDayView(viewConfig);
var monthView = new Y.SchedulerMonthView(viewConfig);
var weekView = new Y.SchedulerWeekView(viewConfig);
var eventRecorder = new Y.SchedulerEventRecorder();
var events = [{
content: 'AllDay',
endDate: new Date(2013, 1, 5, 23, 59),
startDate: new Date(2013, 1, 5, 0)
},
{
color: '#8D8',
content: 'Colorful',
endDate: new Date(2013, 1, 6, 6),
startDate: new Date(2013, 1, 6, 2)
},
{
content: 'MultipleDays',
endDate: new Date(2013, 1, 8),
startDate: new Date(2013, 1, 4)
},
{
content: 'Disabled',
disabled: true,
endDate: new Date(2013, 1, 8, 5),
startDate: new Date(2013, 1, 8, 1)
},
{
content: 'Meeting',
endDate: new Date(2013, 1, 7, 7),
meeting: true,
startDate: new Date(2013, 1, 7, 3)
},
{
color: '#88D',
content: 'Overlap',
endDate: new Date(2013, 1, 5, 4),
startDate: new Date(2013, 1, 5, 1)
},
{
content: 'Reminder',
endDate: new Date(2013, 1, 4, 4),
reminder: true,
startDate: new Date(2013, 1, 4, 0)
}
];
scheduler = new Y.Scheduler({
activeView: monthView,
boundingBox: '#myScheduler',
date: new Date(2013, 1, 4),
eventRecorder: eventRecorder,
items: events,
render: true,
views: [dayView, weekView, monthView, agendaView]
});
});
</script>
I am working on Kendo chart. I am trying to load date on the X axis and decimal value on Y.
I have generated 500 points using controller. Here is my controller.
List<jsonmodel> arrret = new List<jsonmodel>();
DateTime start = new DateTime(2015, 09, 14, 01, 20, 00);
Random rnd = new Random();
for (int i = 0; i < 500; i++)
{
decimal randomnumber = rnd.Next(10, 40);
DateTime secondsincreament = new DateTime();
secondsincreament = start;
arrret.Add(new jsonmodel()
{
close = randomnumber,
date = secondsincreament.ToString(),
});
start = start.AddSeconds(3);
}
return Json(arrret, JsonRequestBehavior.AllowGet);
I have started from 14/09/2015 01:20:00 and incremented 3 seconds with each loop for X axis and a random number for Y axis.
Using ajax in Jquery, I have created and array and pushed points to that array.
dataSource.push({ "x": new Date(data.date), "y": data.close });
And then, the Kendo chart goes as following.
$("#chart").kendoChart({
title: {
text: "time stamp chart"
},
dataSource: {
data: dataSource
},
series: [{
type: "scatterLine",
aggregate: "avg",
xField: "x",
yField: "y",
}],
xAxis: {
min: new Date("2015/09/14 01:18:00"),
max: new Date("2015/09/14 01:46:00"),
labels: {
template: "#= kendo.toString(value,'MM/dd/yyyy HH:mm:ss')#",
baseUnit: "seconds",
},
crosshair: {
visible: true,
tooltip: {
template: "#= kendo.toString(value,'MM/dd/yyyy HH:mm:ss')#",
visible: true,
},
},
},
yAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
},
},
},
autoBaseUnitSteps: {
seconds: [3]
}
});
Problem is, Data is loading properly on the chart but not all dates (with seconds generated from the controller) are displayed on X axis.
I cant figure how to set interval (steps) for seconds on scatterLine chart.
Can anyone please help me out?
Thanks
I have a function used on the datepicker to limit dates selected to the first of the month... I invoke it by setting a class and listener, such as:
$( ".datepickfom" ).datepicker(
{
beforeShowDay: fom,
showOn: "both",
buttonImage: "/images/calendar.png",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
dateFormat: "m/d/yy",
yearRange: "-25:+100",
constrainInput: true
}
);
the fom call:
function fom(date){
if (date.getDate() != 1) {
return [false, "", "Specify 1st of Month"];
}
return [true, ""];
}
This works great for regular forms.
I'm looking to extend this functionality to the HandsOnTable 'date' cell data types.
var $container_1 = $("#datatable_1");
var handsontable_1 = $container_1.data('handsontable');
$("#datatable_1").handsontable(
{ columns: [
{},
{},
{
type: 'date',
dateFormat: 'm/d/yy'
},
{},
{
type: 'dropdown',
source: ["","Y","N"]
},
{},
{}
]
});
This also works as it should, but the date lets me pick other dates besides the first.
Is there a way to attach the
beforeShowDay
option to the HOT cell call as well?
I figured this out... The parameters end up working their way in to the defaultOptions array.
type: 'date',
dateFormat: 'm/d/yy',
beforeShowDay: fom
is all it took, and of course a localization of my fom function.