I am using the No.uislider slider in a mortgage calculator. I ned to specify my maximum and minimum values using a variable, as these change dependant on options a person has selected previously.
This is what i have so far but my variable is not working?
my variables are:
value_min
value_max
<script>
// Loan Details
// Amount
$("#sliderBorrowAmt").noUiSlider({
start: [ value_min ],
range: {
'min': value_min,
'max': value_max
},
connect: "lower",
serialization: {
lower: [
new Link({
target: $("#value"),
method: "text"
}),
new Link({
target: $("#amount"),
format: {
decimals: 0,
thousand: ',',
prefix: '',
postfix: ''
}
})
],
// Default formatting options
format: {
decimals: 0,
thousand: ','
}
}
});
Here is the code:
<script>
var value_min = 20;//change as per your need
var value_max = 100;//change as per your need
// Loan Details
// Amount
$("#sliderBorrowAmt").noUiSlider({
start: [ value_min ],
range: {
'min': value_min,
'max': value_max
},
connect: "lower",
serialization: {
lower: [
new Link({
target: $("#value"),
method: "text"
}),
new Link({
target: $("#amount"),
format: {
decimals: 0,
thousand: ',',
prefix: '',
postfix: ''
}
})
],
// Default formatting options
format: {
decimals: 0,
thousand: ','
}
}
});
Related
I get the serverside data from controller, and get data using ajax. This is my datatable script.
// Data table
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
responsive: true,
ajax: "quotation",
dom: '<"top"fB>rt<"bottom"lip><"clear">',
columns: [{
data: 'quotation_no',
name: 'quotation_no'
},
{
data: 'remarks',
name: 'remarks'
},
{
data: 'quotation_date',
name: 'quotation_date'
},
{
data: 'quotation_category',
name: 'quotation_category'
},
{
data: 'quotation_status',
name: 'quotation_status'
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
},
],
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
});
default format for quotation_date is yyyy-mm-dd . How to make dd-mm-yyyy?
You can do something like this in the Model.
/**
* The attributes that should be cast.
*
* #var array
*/
protected $casts = [
'quotation_date' => 'datetime:d-m-Y',
];
Or, alternatively you can also use Carbon Date in the controller:
$quotationDate = Carbon::parse($item['quotation_date'])->format('d-m-Y');
Just add in your model $casts attr if you use eloquent for getting data from DB.
protected $casts = [
'quotation_date' => 'datetime:d-m-Y',
];
After it action your date format will be like dd-mm-yyyy
{ label: 'Update Time',
name: 'UPD_DT', formatter: 'date', formatoptions: {
srcformat: 'd-M-y H:i:s', newformat: 'd-M-Y h:i:s' }, width: 400 },
I have used this formatting options in my jqgrid in my pc I'm getting the correct format.
But in another server I'm getting the format as NaN-undefined-NaN 12:NaN:NaN
How can I handle it generically for all the servers having different date time format
Below is the code that do auto detection of date formats. There are some assumptions for this purpose.
We use moment.js library
You should define the expected date formats that come form the server.
The biggest problem for auto detection is format like 10/09/2000 or more worse 10/09/09. To overcome this it is needed to define a set of expected formats.
Working demo using Guriddo jqGrid here
See the comments in code.
If something is not clear, just ask.
Enjoy
$(document).ready(function () {
// define your expected formats from the server
var dateFormats = {
"iso_int" : "Y-m-d",
"short_date" : "d/m/Y",
"iso_date_time": "Y-m-dTH:m:s",
"iso_date_time_utc": "Y-m-dTH:m:sZ",
"my_format1" : "Y/m/d"
//define other well known formats if you want
};
// function uses moment.js to find the format
function getFormat(d){
for (var prop in dateFormats) {
if(moment(d, dateFormats[prop],true).isValid()){
return dateFormats[prop];
}
}
return null;
}
// gloabal array to store the columns with date fields
var datearr =[];
// jqgrid configuration
$("#jqGrid").jqGrid({
url: 'data.json',
mtype: "GET",
datatype: "json",
page: 1,
colModel: [
{ label: 'Order ID', name: 'OrderID', key: true, width: 75 },
{
label: 'Order Date',
name: 'OrderDate',
width: 150,
editable: true,
edittype:"text",
formatter : 'date',
formatoptions : {
newformat: "d/m/Y"
}
},
{
label: 'Customer ID',
name: 'CustomerID',
width: 150,
editable: true,
edittype: "select",
editoptions: {
value: "ALFKI:ALFKI;ANATR:ANATR;ANTON:ANTON;AROUT:AROUT;BERGS:BERGS;BLAUS:BLAUS;BLONP:BLONP;BOLID:BOLID;BONAP:BONAP;BOTTM:BOTTM;BSBEV:BSBEV;CACTU:CACTU;CENTC:CENTC;CHOPS:CHOPS;COMMI:COMMI;CONSH:CONSH;DRACD:DRACD;DUMON:DUMON;EASTC:EASTC;ERNSH:ERNSH;FAMIA:FAMIA;FISSA:FISSA;FOLIG:FOLIG;FOLKO:FOLKO;FRANK:FRANK;FRANR:FRANR;FRANS:FRANS;FURIB:FURIB;GALED:GALED;GODOS:GODOS;GOURL:GOURL;GREAL:GREAL;GROSR:GROSR;HANAR:HANAR;HILAA:HILAA;HUNGC:HUNGC;HUNGO:HUNGO;ISLAT:ISLAT;KOENE:KOENE;LACOR:LACOR;LAMAI:LAMAI;LAUGB:LAUGB;LAZYK:LAZYK;LEHMS:LEHMS;LETSS:LETSS;LILAS:LILAS;LINOD:LINOD;LONEP:LONEP;MAGAA:MAGAA;MAISD:MAISD;MEREP:MEREP;MORGK:MORGK;NORTS:NORTS;OCEAN:OCEAN;OLDWO:OLDWO;OTTIK:OTTIK;PARIS:PARIS;PERIC:PERIC;PICCO:PICCO;PRINI:PRINI;QUEDE:QUEDE;QUEEN:QUEEN;QUICK:QUICK;RANCH:RANCH;RATTC:RATTC;REGGC:REGGC;RICAR:RICAR;RICSU:RICSU;ROMEY:ROMEY;SANTG:SANTG;SAVEA:SAVEA;SEVES:SEVES;SIMOB:SIMOB;SPECD:SPECD;SPLIR:SPLIR;SUPRD:SUPRD;THEBI:THEBI;THECR:THECR;TOMSP:TOMSP;TORTU:TORTU;TRADH:TRADH;TRAIH:TRAIH;VAFFE:VAFFE;VICTE:VICTE;VINET:VINET;WANDK:WANDK;WARTH:WARTH;WELLI:WELLI;WHITC:WHITC;WILMK:WILMK;WOLZA:WOLZA"
}
},
{
label: 'Freigh',
name: 'Freight',
width: 150,
editable: true,
formatter: 'number',
formatoptions :{decimalSeparator: ',', decimalPlaces:2, thousandsSeparator :""}
},
{
label: 'Ship Name',
name: 'ShipName',
width: 150
//editable: true,
}
],
beforeProcessing : function( data, status, xhr) {
// get the columns that are dates
// and store it in global datearr
var i, cm = this.p.colModel;
if(datearr.length === 0 ) {
for( i=0; i<cm.length; i++) {
if(cm[i].formatter && cm[i].formatter === 'date') {
datearr.push({index:i, name: cm[i].name});
}
}
}
//get the first row to test the date formats
var testdata = data.rows[0], formatfound;
for(i=0; i<datearr.length;i++) {
var crd = datearr[i];
formatfound = getFormat( testdata[crd.name] );
// format found
if(formatfound !== null) {
if(cm[crd.index].formatoptions === undefined) {
cm[crd.index].formatoptions = {};
}
// set it in formatoptions
cm[crd.index].formatoptions.srcformat = formatfound;
}
}
return true;
},
loadonce : true,
viewrecords: true,
width: 780,
height: 250,
rowNum: 10,
pager: "#jqGridPager"
});
$("#jqGrid").navGrid("#jqGridPager",
{ edit: false, add: false, del: false, search: true, refresh: true, view: true, align: "left" },
{ closeAfterEdit: true, reloadAfterSubmit : false}
);
$("#chng").on('click', function(){
$("#jqGrid").jqGrid('setGridParam',{url:'data1.json', datatype:'json'}).trigger("reloadGrid");
});
});
There is a data table with export to PDF or Excel and print buttons.But pagination doesn't appear. When I have looked examples most of them same as my project; when they put button, pagination doesn't appear. How can I solve the problem?
js code of Data table is below;
var oTable = $('#datatables').dataTable({
destroy: true,
"bSort": false,
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
footer: true ,
exportOptions: {
columns: [0, 1, 2, 3, 4,5,6,7]
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [0, 1, 2, 3, 4, 5]
},
customize: function (doc) {
//Remove the title created by datatTables
doc.content.splice(0, 1);
//Create a date string that we use in the footer. Format is dd-mm-yyyy
var now = new Date();
var jsDate = now.getDate() + '-' + (now.getMonth() + 1) + '-' + now.getFullYear();
// doc.pageMargins = [20, 60, 20, 30];
// Set the font size fot the entire document
doc.defaultStyle.fontSize = 9;
// Set the fontsize for the table header
doc.styles.tableHeader.fontSize = 9;
// Create a header object with 3 columns
// Left side: Logo
// Middle: brandname
// Right side: A document title
doc['header'] = (function () {
return {
columns: [
{
alignment: 'left',
italics: true,
text: 'dataTables',
fontSize: 18,
margin: [10, 0]
},
{
alignment: 'right',
fontSize: 14,
text: $("#drpIller option:selected").text() + " " + $("#drpIlceler option:selected").text()
}
],
margin: 20
}
});
doc['footer'] = (function (page, pages) {
return {
columns: [
{
alignment: 'left',
text: ['Oluşturulma tarihi: ', { text: jsDate.toString() }]
},
{
alignment: 'right',
text: ['page ', { text: page.toString() }, ' / ', { text: pages.toString() }]
}
],
margin: 20
}
});
var objLayout = {};
objLayout['hLineWidth'] = function (i) { return .5; };
objLayout['vLineWidth'] = function (i) { return .5; };
objLayout['hLineColor'] = function (i) { return '#aaa'; };
objLayout['vLineColor'] = function (i) { return '#aaa'; };
objLayout['paddingLeft'] = function (i) { return 4; };
objLayout['paddingRight'] = function (i) { return 4; };
doc.content[0].layout = objLayout;
}
},
{
extend: 'print'
}
],
"responsive": true,
"data": data,
"columns": [
{ "data": "A", "autoWidth": true},
{ "data": "S", "autoWidth": true},
{ "data": "D", "autoWidth": true },
{ "data": "E", "autoWidth": true},
{ "data": "F", "autoWidth": true },
{ "data": "G", "autoWidth": true }
],
"bAutoWidth": false
}
});
thanks your valuable for helps.
I found answer at this link:
https://codepen.io/RedJokingInn/pen/XMVoXL
It is abouth dom options.
It is solved When I write
"dom": '<"dt-buttons"Bf><"clear">lirtp'
instead
dom: 'Bfrtip'
tutorial at the link also consists printing page numbers and printing same sentence top of every pages informations.
May be can help someone in the future.
In the 'Month' view of the fullcalendar.io I would like to display the current month only, with the current month events. However, currently what is being showed is a month counting from the current date.
E.g: If today's date was 2016-20-03...
- What fullcalendar display: From: 2016-20-03 To: 2016-19-04
- What I would like to display: From 2016-01-03 To: 2016-31-03
After reading the documentation and looking up around I couldn't find any variable or set up for the fullcalendar to achieve this so I thing that I will have to modify the fullcalendar.js
Has someone already done this?
View
$('#' + engineerId).fullCalendar({
header: false,
views: {
plainMonth: {
type: 'basic',
duration: { days: 31 },
buttonText: 'Month'
},
plainWeek: {
type: 'basic',
duration: { days: 7 },
buttonText: 'Week'
}
},
firstDay: 1,
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
defaultView: 'plainWeek',
theme: true,
viewRender: function (view, element) {
$('#CalendarViewObject').val(view.name);
viewName = view.name;
},
aspectRatio: ratio,
editable: true,
eventLimit: false, // allow "more" link when too many events
events: {
startEditable: false,
durationEditable: false,
url: window.location.href.toString().split(window.location.host)[1] + '/GetEmployeeEvents',
type: 'POST',
data: function () { // a function that returns an object
$("[id^=qtip-]").empty();
$("[id^=qtip-]").remove();
return {
serviceAreaId: serviceAreaId,
employeeId: engineerId,
calendarViewObject: $('#CalendarViewObject').val()
};
},
error: function () {
alert('there was an error while fetching events!');
}
},...
Controller
public JsonResult GetEmployeeEvents(DateTime start, DateTime end, string queueName, string employeeId, string calendarViewObject)
The 'start' and 'end' dates are set up by the fullcalendar.io, and those dates are the ones that I would like to change.
Thank you very much in advance,
Alvykun
After some more research in the fullcalendar documentation, I ended up by setting the following:
$(\'.calendarClass\').fullCalendar(\'gotoDate\',new Date(y, m, 1));
This did the trick and works!
I have problem with bind two sliders, here it is what i have:
View:
<div ion-range-slider range-options="onHourOptions"></div>
<p>The value so far is: <span>{{hourValue | number: 2}}$/h</span></p>
<div ion-range-slider range-options="onMonthOptions"></div>
<p>The value so far is: <span>{{monthValue| number: 2}}$</span></p>
Controller:
$scope.onHourOptions = {
min: 0,
max: 90,
type: 'single',
step: 0.1,
postfix: " $/h ",
prettify: true,
hasGrid: true,
onChange: function (data) {
$scope.hourValue = data.fromNumber;
$scope.monthValue = data.fromNumber*168;
$scope.$apply();
},
};
$scope.onMonthOptions = {
min: 1600,
max: 15000,
type: 'single',
step: 10,
postfix: " $ ",
prettify: false,
hasGrid: true,
onChange: function (data) {
$scope.monthValue = data.fromNumber;
$scope.hourValue = data.fromNumber/168;
$scope.$apply();
},
};
And my directive for slider:
function ionRangeSlider() {
return {
restrict: 'A',
scope: {
rangeOptions: '='
},
link: function (scope, elem, attrs) {
elem.ionRangeSlider(scope.rangeOptions);
}
}
}
Now i would like to have something like this: When user change the value of payment for month then automatically the value of payment for hour will be updated. I have no idea how can i achieve this. I was trying to add to event something like this $scope.onHourOptions.from = data.fromNumber/168; but nothing was happens.