sap.ui.commons.DatePicker has a property "locale" to set language of datepicker.But I dont find any property as such in "sap.m.DatePicker" to change the locale.Is there any possible way this can be done?
There is no direct property for locale in DatePicker. However, there is a somewhat clumsy trick to overcome this, and unfortunately it uses private attribute "_oDisplayFormat", which stores an instance of sap.ui.core.format.DateFormat. The snippet demonstrating this is below:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="UI5 DatePicker with non-default locale"/>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>UI5 DatePicker Example with different Locales</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m,sap.ui.core'>
</script>
<script>
var oVBox = new sap.m.VBox({ width: "50%"});
var oFrenchFormat;
var oEnglishFormat;
var oDatePicker = new sap.m.DatePicker({ dateFormat: "long" });
oDatePicker.setValue(new Date());
oVBox.addItem(oDatePicker);
oVBox.addItem(new sap.m.Button({
text: "Set French locale",
press: function(oEvent) {
if (!oFrenchFormat) {
oFrenchFormat = sap.ui.core.format.DateFormat.getDateInstance({ style: "full"}, new sap.ui.core.Locale("fr_FR"));
}
var oDate = oDatePicker.getValue();
oDatePicker._oDisplayFormat = oFrenchFormat;
oDatePicker.setDisplayFormat("long");
oDatePicker.setValue(oDate);
}
}));
oVBox.addItem(new sap.m.Button({
text: "Set US locale",
press: function(oEvent) {
if (!oEnglishFormat) {
oEnglishFormat = sap.ui.core.format.DateFormat.getDateInstance({ style: "full"}, new sap.ui.core.Locale("en_US"));
}
var oDate = oDatePicker.getValue();
oDatePicker._oDisplayFormat = oEnglishFormat;
oDatePicker.setDisplayFormat("long");
oDatePicker.setValue(oDate);
}
}));
oVBox.placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Related
I am working on an dynamic HTML document that has to change its styling based on Google Sheets entries. So far it loads the JSON data just fine. I have been looking for a way to style the CSS so I can change it on the fly. Is there anyone that can point me in the right direction?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Sheets</title>
<style>
</style>
<script type="text/javascript">
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://spreadsheets.google.com/feeds/cells/1d3z-eJz2X_rFhq3a1kQ6TRlxJqHvstLQ/1/public/full?alt=json')
ourRequest.onload = function () {
var ourData = JSON.parse(ourRequest.responseText);
var adTekst = ourData.feed.entry[6].gs$cell.inputValue;
var achtergrondKleur = ourData.feed.entry[7].gs$cell.inputValue;
var tekstKleur = ourData.feed.entry[8].gs$cell.inputValue;
console.log(adTekst);
console.log(achtergrondKleur);
console.log(tekstKleur);
document.getElementById('testoutput').innerHTML = adTekst + " " + achtergrondKleur + " " + tekstKleur;
};
ourRequest.send();
</script>
</head>
<body>
<div id="testoutput"></div>
</body>
</html>
You can do that by toggling classes using javascript.
document.getElementById('testoutput').classList.toggle('myClass');
Other way is to change individual CSS properties
document.getElementById('testoutput').style.backgroundColor = 'RED';
Yes you can, you also give specific css to all columns with using html tags. See snippet below
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Sheets</title>
<style>
</style>
<script type="text/javascript">
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://spreadsheets.google.com/feeds/cells/1dLbBxSuyGxbG3z-eJz2X_rFhq3a1kQ6TRlxJqHvstLQ/1/public/full?alt=json')
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
var adTekst = ourData.feed.entry[6].gs$cell.inputValue;
var achtergrondKleur = ourData.feed.entry[7].gs$cell.inputValue;
var tekstKleur = ourData.feed.entry[8].gs$cell.inputValue;
console.log(adTekst);
console.log(achtergrondKleur);
console.log(tekstKleur);
document.getElementById('testoutput').innerHTML ='<span>'+adTekst+'</span>'+ " " + '<span>'+achtergrondKleur+'</span>' + " " + tekstKleur;
};
ourRequest.send();
</script>
</head>
<style>
div#testoutput { color: red;}
div#testoutput span { color: blue;}
div#testoutput span:first-child {color: aqua;}
</style>
<body>
<div id="testoutput"></div>
</body>
</html>
You can give color or design as per your requirement.
When we are initializing the map, we set the baselayer to "reduced.day".
We are currently facing a problem, when the user changes the map type from "map-view" to "satellite" and back to "map-view", the tile changed to the standard and not "reduced.day".
I have looked up the docs, but can´t find any hint on how to prevent that problem.
So my question is, how to set with the UI controls the map-view tiles to reduced day.
Thanks a lot.
I finally could achieve the solution for my problem.
The solution was to pass a custom object with the requested map style for each map type.
See below the complete code for editing the map controls.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Here Custom Controlls</title>
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"
></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"
></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"
></script>
<link rel="stylesheet" type="text/css" href="http://js.api.here.com/v3/3.0/mapsjs-ui.css"
/>
</head>
<body>
<div id="map" style="height: 800px; width: 800px;"></div>
<script type="text/javascript" charset="utf-8">
//Initialize the Platform object:
const platform = new H.service.Platform({
app_id: {YOUR_APP_ID},
app_code: {YOUR_APP_CODE}
});
// Get the default map types from the Platform object:
const defaultLayers = platform.createDefaultLayers();
// Instantiate the map:
const map = new H.Map(
document.getElementById("map"),
defaultLayers.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
}
);
const mapTileService = platform.getMapTileService({ type: "base" });
var reduce = mapTileService.createTileLayer(
"maptile",
"reduced.day",
256,
"png8"
);
map.setBaseLayer(reduce);
// Create the custom UI:
const ui = H.ui.UI.createDefault(
map,
{
...defaultLayers,
normal: {
map: reduce
}
},
"de-DE"
);
</script>
</body>
</html>
Please see two javascript functions codes.
SatelliteLayer will work with type : 'aerial'.
ReducedLayer will work with type : 'base'.
/**
*
* #param {H.Map}
* #param {H.service.Platform}
*/
function setAerialSatelliteLayer(map, platform){
var mapTileService = platform.getMapTileService({
type: 'aerial'
});
var parameters = {};
var tileLayer = mapTileService.createTileLayer(
'maptile',
'satellite.day',
256,
'png8',
parameters
);
map.setBaseLayer(tileLayer);
}
/**
*
* #param {H.Map}
* #param {H.service.Platform}
*/
function setBaseReducedLayer(map, platform){
var mapTileService = platform.getMapTileService({
type: 'base'
});
var parameters = {};
var tileLayer = mapTileService.createTileLayer(
'maptile',
'reduced.day',
256,
'png8',
parameters
);
map.setBaseLayer(tileLayer);
}
I would like to do the equivalent of the following Python in stand-alone BokehJS
color_mapper = bokeh.models.mappers.LogColorMapper('Viridis256',low=vmin,high=vmax)
How do I do it? Where are the color mappers located in the javascript CDN files?
They don't seem to be here, for example:
https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.7.js
and not here either:
https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.7.js
I am trying to follow examples like these:
https://docs.bokeh.org/en/latest/docs/user_guide/bokehjs.html#minimal-complete-example
Thanks in advance
After reading Bokeh docs and js source this seems to work with version 0.12.5
var color_mapper = new Bokeh.LogColorMapper({palette:'Viridis256', low:0, high:16});
I did try to get some sane result in example below but without much success. Maybe you can improve this code further. This is based on python source from Updating color mapper in a bokeh plot with taptool
Try to click on button "Add some data!" many times, more then 10.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.5.min.css" type="text/css"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.5.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.5.min.js"></script>
<title> by bokeh</title>
</head>
<body>
<div>
<div id="myplot" />
</div>
<button onclick="addPoint()">Add some data!</button>
<script type='text/javascript'>//<![CDATA[
// arrays to hold data
var source = new Bokeh.ColumnDataSource({
data: { x: [Math.random() * 10.0], y: [Math.random() * 10.0], humidity: [0, 10.0] }
});
var color_mapper = new Bokeh.LogColorMapper({palette:'Viridis256', low:0, high:16});
// make the plot and add some tools
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";
var plot = Bokeh.Plotting.figure({title:'Example of Random data', tools: tools, height: 300, width: 300});
var pglyph = plot.patches({ field: "x" }, { field: "y" },
{ fill_color: { field: "humidity", transform: color_mapper}},
{ source: source, alpha: 1, line_width: 4})
var scatterData = plot.line({ field: "x" }, { field: "y" },
{ source: source, line_width: 10 });
// Show the plot, appending it to the end of the current
// section of the document we are in.
Bokeh.Plotting.show(plot, document.getElementById('myplot'));
function addPoint() {
// The data can be added, but generally all fields must be the
// same length.
source.data.x.push(Math.random() * 10.0);
source.data.y.push(Math.random() * 10.0);
// Also, the DataSource object must be notified when it has changed.
source.trigger('change');
}
//]]>
</script>
</body>
</html>
Models are located inside the main JS file (at least, for Bokeh 0.12.9): https://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.js
You can get LogColorMapper in your code by using:
Bokeh.require('models/mappers/log_color_mapper').LogColorMapper
I am a newbie to JavaScript < 1 Week old
I wrote a very short HTML/JavaScript and got it to display on console.
Basically, I want to display the result of a function used as a variable inside the <p> tag of the HTML.
I got the script to display in the console.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script>
var kilo = function(pound) {
return pound/2.2;
}
kilo (220);
console.log (kilo(220));
</script>
<script>
var kilog = function(pounds) {
return pounds/2.2;
}
console.log (kilog(440));
</script>
<p id="Kilograms"><!--I want the result here--></p>
</body>
</html>
How do I get the result of the function as a variable i.e var kilo (pounds)... to display in the p tag with id Kilograms?
Script shold be after BODY code, or you should add document ready event listener. So, try this solution:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p id="Kilograms"><!--I want the result here--></p>
</body>
<script>
var kilo = function(pound) {
return pound/2.2;
}
kilo (220);
console.log (kilo(220));
var kilog = function(pounds) {
return pounds/2.2;
}
console.log (kilog(440));
document.getElementById("Kilograms").innerHTML = kilog(440);
</script>
</html>
Example in JSBin: https://jsbin.com/pacovasuve/edit?html,output
You can try this in your js code.
document.getElementById("Kilograms").innerHTML="write whatever you want here";
Try this
var p = document.getElementById('Kilograms');
p.innerHtml = 'any text';
// OR
p.innerHtml = kilog(440);
I have this script: JsBin
It allows to display the corresponding favicon to a certain url. As you can see the favicon is appended to the url, however I need it to append to the class="class" How can I do this? I don't see anything in the code that I can change in order to make this work.
I've modified the script to include in the "config" var a "target" property. This "target" is nothing more than a jQuery selector (such as .class, in this case) which defaults to "this".
So:
jQuery('#hello').favicons({insert: 'insertBefore', target: '.class' }); //aplies to $('.class')
//These 2 are the same
jQuery('#hello').favicons({insert: 'insertBefore', target: '#hello' }); //target is the same as "this"
jQuery('#hello').favicons({insert: 'insertBefore'});
I hope this works out for you!
This is the full working code:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<script type="text/javascript">
jQuery.fn.favicons = function (conf) {
var config = jQuery.extend({
insert: 'appendTo',
target: this
}, conf);
return this.each(function () {
jQuery('a[href^="http://"]', this).each(function () {
var link = jQuery(this);
var faviconURL = link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1') + '/favicon.ico';
var faviconIMG = jQuery('<img src="' + '" alt="" />')[config.insert]($(config.target));
var extImg = new Image();
extImg.src = faviconURL;
if (extImg.complete) {
faviconIMG.attr('src', faviconURL);
}
else {
extImg.onload = function () {
faviconIMG.attr('src', faviconURL);
};
}
});
});
};
$(function(){
jQuery('#hello').favicons({insert: 'insertBefore', target: '.class' });
});
</script>
</head>
<body>
<p id="hello">Google</p>
<p class="class">apend favicon over her instead</p>
</body>
</html>