How to bring kendo daterangepicker with a single field? there should not be 2 input fields like start and end date. once the ranges are selectedinput field should get the dates like 01-01-2019 - 20-09-2019enter image description here
You can use concatenation between start date and end date of DateTimePicker like
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD')); // assign this to your textbox
});
});
</script>
Related
I want to be able to change my column header dynamically triggered by year picker onChange, but I can't find the proper style to handle it.
I've tried to modify with a check on the inspect element, but it also didn't work.
And my code:
$("#monthpicker").kendoDatePicker({
start: "year",
depth: "year",
format: "yyyy",
dateInput: true,
change: function() {
var year = kendo.toString($("#monthpicker").data("kendoDatePicker").value(), 'yyyy');
$("#treelist").data("kendoTreeList").dataSource.read({start: year});
$(".k-grid-header th.k-header:first-child").text(year);
}
});
And it should be like this:
(just change on the column header above Month column)
is there anyone experienced with this? Thanks.
Your query .k-grid-header th.k-header:first-child is selecting the wrong headers.
I propose using a headerTemplate with a placeholder, for instance:
headerTemplate: function(x) {
return '<span class="year-goes-here"></span>'
}
And then set the year via:
$("#treelist").find(".year-goes-here").text(2018)
Working example: https://dojo.telerik.com/uXuwIDeK
I am a newbie to jqgrid, the challenge what I have now is label value.
My Jqgrid header structure look like the following :
StoreName | StoreTag | 12SaleTotal | 01SaleTarget | alert
what I wanna do is that I need to get a month from a table from a database then put it on the label. For example, the current month is January, so SaleTotal will be set to previous month which is 12, and SaleTarget will be the current month which is 01.
Could you tell me how to achieve this ?
Is any formatter that I can use to customize the label?
Here is the code
function confirm() {
//get month from controller
var settings = {
url: '${contextPath}/resource-transfer/transfer/getMonth.do',
success: function (data) {
debugger;
var a = data[0].value;
var current = a.slice(-2);
var previousMonth = parseInt(current) - 1;
var workerAqRevAdjust = previousMonth + "SaleResult";
var storeWorkerTargetAdjust = current + "SalePersonTarget";
var storeTargetAdjust = current + "SaleStoreTarget";
//$("#confirmTable").jqGrid("setLabel", "SaleResult", workerAqRevAdjust);
$("#confirmTable").jqGrid("setLabel", "SalePersonTarget", storeWorkerTargetAdjust);
$("#confirmTable").jqGrid("setLabel", "SaleStoreTarget", storeTargetAdjust);
//clear jqgrid data
$("#confirmTable").jqGrid("clearGridData");
$('#confirmTable').jqGrid('setGridParam', {
url: '${contextPath}/resource-transfer/transfer/confirm.do',
datatype: 'json'
}).trigger('reloadGrid');
$('#confirmModal').modal('show')
}
};
$.formAjax(settings);
}
thank you
You can use setLabel method for example to change the column header dynamically. For example,
$("#gridId").jqGrid("setLabel", "SaleTotal", "12 Sale Total");
will set the string "12 Sale Total" as the column header of the column "SaleTotal". By the way, you can use any HTML fragment as the value of label. For example, "<b>12</b> Sale Total" instead of "12 Sale Total".
I want to display only time series. but by default first label showing date. I want it to show "00:00"
https://i.stack.imgur.com/PdWuZ.png
You can set markPeriodChange to false in your categoryAxis to prevent the axis from bolding and using a different date format for the first date:
AmCharts.makeChart("chartdiv", {
// ...
categoryAxis: {
// ...
markPeriodChange: false,
// ...
}
});
I want to display past date in kendo datepicker input ,but want disable the past dates in the calender. For example , I am getting date value as 1st Oct from DB. SO I want to display the same in the date input but when user opens the kendo datepicker , i want to disable the past dates as part of validation. I tried with min: new Date() of kendo datepicker but in this case i am not able to display my data from DB
Can anyone help me on this.
Try below solution.
http://jsfiddle.net/vojtiik/ATmHG/4/
var todaysDate = new Date();
var pastDate = new Date(2013, 1, 1);
var dp = $("#datepicker").kendoDatePicker({
value: pastDate,
min: pastDate,
open: function(e) {
if ( dp.min() == pastDate) {
dp.value(todaysDate);
dp.min(todaysDate);
}
}
}).data("kendoDatePicker");
I have a jqgrid and on footer there are total values displaying. I want to convert the color of negative values to red. How can I do that?
If you use false as the last parameter of footerData the data will be not formatted by jqGrid. So you can use HTML fragments like <span style="color:red">...</span> to change the color of displayed data. Alternatively you can use jQuery CSS Framework classes like ui-state-error to hightlight the text (see the answer).
If you need still format the summary value you can use $.fmatter.util.NumberFormat (see the answer or this one) or use formatter method like in the demo
which uses
footerrow: true,
loadComplete: function () {
var $self = $(this),
sum = $self.jqGrid("getCol", "amount", false, "sum"),
i,
iCol = $("#" + $.jgrid.jqID(this.id) + "_" + "amount")[0].cellIndex, // get index of "amount" column
sumFormatted = this.formatter("", sum, iCol);
$self.jqGrid(
"footerData",
"set",
{
invdate: "Total:",
amount: sum < 0 ? "<span style='color:red'>" + sumFormatted + "</span>": sum
},
false
);
}