I am using the Bootstrap Date Range Picker provided and explained In this page I added all the library using the cdn, I mean this:
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
But the thing is that I need all in spanish and I don´t see a piece of code to configurate it. How should I do it?
Include the locale option and edit the appropriate strings, like fromLabel or December :
$('#datePicker').daterangepicker({
"locale": {
"format": "MM/DD/YYYY",
"separator": " - ",
"applyLabel": "Apply",
"cancelLabel": "Cancel",
"fromLabel": "From",
"toLabel": "To",
"customRangeLabel": "Custom",
"daysOfWeek": [
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"
],
"monthNames": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"firstDay": 1
}
})
here is a demo with spanish month names -> http://jsfiddle.net/r21747qc/
You can use moment-with-locales.min.js instead of moment.min.js
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>
and set localization before initializing daterangepicker
moment.locale('es');
$('#datePicker').daterangepicker();
I made an 'pt-br' example based on #davidkonrad's comment
$('input[name="daterange"]').daterangepicker({
"locale": {
"format": "DD/MM/YYYY",
"separator": " - ",
"applyLabel": "Aplicar",
"cancelLabel": "Cancelar",
"fromLabel": "De",
"toLabel": "Até",
"customRangeLabel": "Custom",
"daysOfWeek": [
"Dom",
"Seg",
"Ter",
"Qua",
"Qui",
"Sex",
"Sáb"
],
"monthNames": [
"Janeiro",
"Fevereiro",
"Março",
"Abril",
"Maio",
"Junho",
"Julho",
"Agosto",
"Setembro",
"Outubro",
"Novembro",
"Dezembro"
],
"firstDay": 0
}});
https://jsfiddle.net/joaopedroraldi/d7bmppga/55
For those using Node
var moment = require('moment');
moment.locale('es');
require('daterangepicker/daterangepicker');
Then set the options names as month and days names will be translated
$('#datePicker').daterangepicker({
"locale": {
"format": "MM/DD/YYYY",
"separator": " - ",
"applyLabel": "Apply",
"cancelLabel": "Cancel",
"fromLabel": "From",
"toLabel": "To",
"customRangeLabel": "Custom",
}
});
$('input[name="fecha_rango"]').daterangepicker({
autoUpdateInput: false,
format: "DD/MM/YYYY",
"locale": {
"separator": " - ",
"applyLabel": "Aplicar",
"cancelLabel": "Cancelar",
"fromLabel": "DE",
"toLabel": "HASTA",
"customRangeLabel": "Custom",
"daysOfWeek": [
"Dom",
"Lun",
"Mar",
"Mie",
"Jue",
"Vie",
"Sáb"
],
"monthNames": [
"Enero",
"Febrero",
"Marzo",
"Abril",
"Mayo",
"Junio",
"Julio",
"Agosto",
"Septiembre",
"Octubre",
"Noviembre",
"Diciembre"
],
"firstDay": 1
}});
Related
I am working on vue js and vue client table. I have created a vue-client-table and populated some dummy data as static.
Now there is a column name STATUS which will have two value i.e Active or Inactive.
I want to change the font color of 'Inactive' to red.
(Which denotes that link is down)
I need help to understand it.
Below I have attached my code:
Headings : [ 'APPLICATION NAME', 'URL','LAST ACCESSED','STATUS'],
tableData: [
{
"APPLICATION NAME": "Pannier",
"URL": "http://boston.com/urna/ut/tellus/nulla/ut/erat/id.js?magna=blandit&ac=ultrices&consequat=enim&metus=lorem",
"LAST ACCESSED": "5:07 PM",
"STATUS": 'Inactive'
},{
"APPLICATION NAME": "Kanlam",
"URL": "http://archive.org/rutrum/nulla/nunc/purus.jpg?ac=ametttis&sit=nibh&amet=ligula",
"LAST ACCESSED": "7:02 AM",
"STATUS": 'active'
}
Below I have attached my image:
One simple way is to use Scoped slots, in order to add css class and the href attribute. Take a look at the official docs.
Here is an example.
Vue.use(VueTables.ClientTable);
new Vue({
el: "#app",
data: {
columns: ['APPLICATION NAME', 'URL', 'STATUS'],
tableData: [
{
"APPLICATION NAME": "Pannier",
"URL": "http://boston.com/urna/ut/tellus/nulla/ut/erat/id.js?magna=blandit&ac=ultrices&consequat=enim&metus=lorem",
"LAST ACCESSED": "5:07 PM",
"STATUS": 'Inactive'
},{
"APPLICATION NAME": "Kanlam",
"URL": "http://archive.org/rutrum/nulla/nunc/purus.jpg?ac=ametttis&sit=nibh&amet=ligula",
"LAST ACCESSED": "7:02 AM",
"STATUS": 'active'
}],
}
});
.Inactive {
color: red
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>
<h3>Vue Tables 2</h3>
<div id="app">
<v-client-table :columns="columns" :data="tableData">
<a :class="props.row.STATUS" :href="props.row.URL" slot="STATUS" slot-scope="props">{{props.row.STATUS}}</a>
</v-client-table>
</div>
You need to create a css class with name "Inactive", exactly the same with the "STATUS" value.
I have account with www.makemytrip.com and where 'from' field and 'to' field is already saved through cookies
Using extension, I would like to display the value present in 'from' field of that site. (whose id is 'hp-widget__sfrom')
On page load I am able to view the value but the same I can't achieve on click on my button defined in my extension
Below is the code: index.html
<html>
<head>
<title>My new extension</title>
</head>
<body>
<input type="button" id="save" value="Save Text">
</body>
</html>
manifest.json
{
"manifest_version": 2,
"name": "Test1",
"description": "TestDesc",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "index.html",
"default_title": "Test11"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["myContentScript.js"]
}
]
}
myContentScript.js
window.onload = function(){
alert("Hi by contentScript");
//alert(document.getElementById('hp-widget__sfrom').value); //this works!
//but the below doesn't work; onclick of button
document.getElementById('save').onclick = function(){
alert(document.getElementById('hp-widget__sfrom').value);
}
}
background.js
window.onload = function(){
alert("Hi by backgroundJS");
}
I appreciate any sort of help!
Just started with DOJO and Dgrid.
I've got this simple dgrid using a Memory store.
However the grid in the web page stay empty. Only the header is displayed.
....
#import "./dgrid/css/dgrid.css";
<script src="./dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true, isDebug: true">
</script>
<script language="javascript">
require
(
[
"dojo/_base/declare",
"dojo/_base/array",
"dgrid/List",
"dgrid/Grid",
"dgrid/Keyboard",
"dgrid/Editor",
"dgrid/extensions/ColumnResizer",
"dijit/form/NumberTextBox",
"dstore/Memory",
"dojo/parser",
"dojo/domReady!",
"dijit/TooltipDialog",
"dijit/form/DropDownButton",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane"
],
function(
declare, arrayUtil, List, Grid, Keyboard, Editor, ColumnResizer, NumberTextBox, Memory
){
var prevpds =[
{itemnu: "TEST", itemna: "", batchn: "", cqty: 5, sqty: 5, sz: 5},
{itemnu: "TEST 44", itemna: "", batchn: "", cqty: 1, sqty: 2, sz: 3}
];
var pdsstore = new Memory({data: prevpds});
var getColumns = [
{ label: "Item Number", id: "itemnu", field: "text", editor: "text" },
{ label: "Item name", id: "itemna", field: "text", editor: "text" },
{ label: "Batch number", id: "batchn", field: "text", editor: "text" },
{ label: "Concerned Qty", id: "cqty", field: "floatnumber", editor: "NumberTextBox" },
{ label: "Sold Qty", id: "sqty", field: "floatnumber", editor: "NumberTextBox" },
{ label: "Size/ Diameter", id: "sz", field: "floatnumber", editor: "NumberTextBox" }
];
var PdsGrid=declare([Grid, Keyboard, Editor, ColumnResizer]);
window.grid = new PdsGrid(
{
store: pdsstore,
columns: getColumns
}, "pdstable2"
);
}
);
</script>
You have at least two problems.
Firstly, assuming you're using dgrid 0.4 (which I assume since you're also using dstore), you should be setting collection instead of store.
Secondly, the base List and Grid modules do not read from stores; you will want to use either OnDemandGrid or the Pagination extension.
OnDemandList and OnDemandGrid docs
Pagination docs
I have code like below. I have attached 2 screenhots where in issue is clear. I just want Y-axis data to be hardcoded like 5,10,15,20,25 and data to be represented correctly in graph.
Trail 1: If i use addAxis for Y
1. Data shows properly
2. But y Axis ticks are not as required.
Trail 2: If i add addCategoryAxis for Y
1. Data does not show up properly
2. y Axis ticks are not as required. I need 5 interval between each ticks.
Is there a way to solve this problem? Am i missing anything?
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 800, 400);
var data = [
{
"Type": "Type1",
"Range": 128000,
"Price": 20
},
{
"Type": "Type1",
"Range": 128000,
"Price": 18
},
{
"Type": "Type1",
"Range": 145000,
"Price": 21
},
{
"Type": "Type2",
"Range": 129000,
"Price": 20
},
{
"Type": "Type2",
"Range": 145000,
"Price": 21
},
{
"Type": "Type2",
"Range": 195000,
"Price": 17
}
];
var chart = new dimple.chart(svg, data);
chart.setBounds(60,20,680,330);
var x = chart.addCategoryAxis("x", "Range");
var y1 = chart.addAxis("y", "Price");
y1.ticks = 5;
var lines = chart.addSeries("Type", dimple.plot.line, [x,y1]);
lines.lineMarkers = true;
x.addOrderRule("Tyre");
chart.addLegend(60, 5, 680, 10, "right", lines);
chart.draw();
</script>
</div>
</html>
Have you tried using the tickValues function?
You can use it to specify exact values for the ticks:
yAxis.tickValues(d3.range(0, 25, 5));
I am doing a ajax request to the server to get the data.When the array is empty, I want it to be displayed in a table row "emptyTable". I get message "emptyTable", if not used aoColumnDefs, but I'm getting warning "Requested unknown parameter ... " . I do not want to receive a warning!
var searchTable = $('#baseTasks').dataTable({
bFilter: false, bInfo: false, "bLengthChange": false,
scrollY:"600px",scrollCollapse: true, paging:false,
"aaData": tasks,
"aoColumns": [
{ "mData": "name"
},{"mData": "schoolClass"
},{"mData": "complexity"
},{"mData": "author"
}]
});
if I use aoColumnDefs, I do not get warning, but I get an empty table without message "emptyTable".
"aoColumnDefs": [
{
"mData": null,
"sDefaultContent": null,
"aTargets": [ -1 ]
}],
How do I get a table with a message "emptyTable", if the aaData is an empty array?
Your code is correct. Run the code below for demonstration.
var tasks = [
{
"name": "Tiger Nixon",
"schoolClass": "System Architect",
"complexity": "$320,800",
"author": "2011\/04\/25"
},
{
"name": "Garrett Winters",
"schoolClass": "Accountant",
"complexity": "$170,750",
"author": "2011\/07\/25"
}
];
var tasksEmpty = [];
$(document).ready( function () {
var table = $('#example').DataTable({
"data": tasksEmpty,
"columns": [
{ "data": "name"},
{ "data": "schoolClass" },
{ "data": "complexity"},
{ "data": "author" }
],
"searching": false,
"info": false,
"lengthChange": false,
"scrollY":"600px",
"scrollCollapse": true,
"paging":false,
});
});
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</thead>
</table>
Most likely cause of Requested unknown parameter error is that your data is not structured properly or some of the properties (name, schoolClass, complexity or author) are not found.
Your data should have the following structure. Make sure that every array item has all the properties required.
var tasks = [
{
"name": "Tiger Nixon",
"schoolClass": "System Architect",
"complexity": "$320,800",
"author": "2011\/04\/25"
},
{
"name": "Garrett Winters",
"schoolClass": "Accountant",
"complexity": "$170,750",
"author": "2011\/07\/25"
}
];
Also please note that your code uses parameters for different versions of DataTables. Although newer DataTables library is backward-compatible, I have updated your code to use initialization parameters for the most recent version. Please see this migration guide for more information.
Add the below line of code to your datatable with your message set to sEmptyTable.
oLanguage: {
"sEmptyTable": "No data found.",
}