I have Date Range Picker inside zeppelin %pyspark interpreter like below:
print("""%angular
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input type="text" name="datetimes" />
<script>
$(function() {
$('input[name="datetimes"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
});
</script>
""")
I don't know how to get the value selected inside daterangepicker in %pyspark interpreter
Like already mentioned in the comments, it works currently only with the spark scala interpreter. I have used your code to get and set the value of your daterangepicker, but I have to admit that it wasn't stable (sometimes it worked and sometimes it didn't). I'm not sure if further changes to your daterangepicker are required to handle initial values, as I have no clue of angluar or if the zeppelin backend angular API is not yet ready for production. Maybe you or someone else can figure this out based on my approch.
One important thing you have to do is to bind the variable and add the ng-model attribute to the tag you want to bind.
z.angularBind("choice", "6/04 03:00 AM - 6/23 11:00 AM")
println("""%angular
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input type="text" name="datetimes" ng-model="choice"/>
<script>
$(function() {
$('input[name="datetimes"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
});
</script>
""")
You can fetch the values in another %spark paragraph with:
println(z.angular("choice"))
//6/04 03:00 AM - 6/25 12:00 AM
Related
I want to add year option in sharepoint list datepicker column, since it does not allow to pick year except to swap 12 months back can someone suggest somthing?
No option for this, use jQuery Datapicker instead.
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
})
Update:
Insert the script into your list form(new forum/edit form),update the "Time" as your field title.
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function () {
$('input[title="Time"]').datepicker({
changeMonth: true,
changeYear: true
})
$('input[title="Time"]').parent().siblings().hide();
});
</script>
Using:
SharePoint 2010
jQuery 1.7.2 (from master site, which I can't access)
DataTables 1.10.12
YADCF 0.8.9
select_type: select2
filter type: multi_select_custom_func
Select2 4.0.1
Chosen 1.5.1
YADCF filters work. But after a user selects a filter entry, the page gets stuck at the top. The scrollbar won't work. You can't move the page at all. If user selects a filter type and then refreshes the page, scrolling works with a filter type still in the box. Press clear and scrolling still works. Select a new filter entry and scrolling breaks.
This does not happen to the DataTables free text search box. It only happens when the YADCF filters are manipulated. So there must be a fix for the YADCF or Select2 code.
Alternatively, this might explain what's happening, but I can't access the master page. Wondering if this could be a work around but I don't know how to implement the sp.clientruntimecontext.executequeryasync call.
Any thoughts or ideas would be appreciated. Many thanks.
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/jquery.dataTables.yadcf.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/moment-with-locales.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/select2.full.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/jquery.dataTables.yadcf.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/select2.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/chosen.min.css">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead><th>Name</th><th>No.</th><th>Date</th><th>Memo</th><th>Classification</th><th>Class2</th><th>Class3</th> </thead>
</table>
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push(ExecuteOrDelayUntilScriptLoaded(AMDB, 'sp.ui.pub.ribbon.js'));
function AMDB(){
var call = $.ajax({
url: "https:/mysite/_vti_bin/listdata.svc/AM?$select=Title,Number,Date,Name,Classification/Classification,Class2/Class2,Class3/Class3&$expand=Classification,Class2,Class3",
async: "true",
type: "GET",
dataType: "json",
headers: {Accept: "application/json;odata=verbose"}
});//close ajax call
call.done(function (data,textStatus, jqXHR){
myData = data.d.results;
var dtTable = $('#example').DataTable({
responsive: true,
data: myData,
columns:[
{data:"Title"},
{data:"Number"},
{data:"Date","render": function (data, type, full, meta) {return moment.utc(data, "x").format('l');}},
{data:"Name","render":function(data, type, full, meta){return'Click here';}},
{data: "Classification.results[, ].Classification"},
{data: "Class2.results[, ].Class2"},
{data: "Class3.results[, ].Class3"}
],
stateSave: true
}); //close DataTable
The issue is caused by SharePoint element-ids having an invalid $-character that's then used for jQuery event-namespaces. Adding the eventhandler works but removing it fails as the eventhandler it's not found anymore. The $-character would need to be escaped or removed from the event-namespace.
I don't have a proper solution but a workaround that works in SharePoint 2013:
var initialSelect = $("#" + fieldSchema.Name + "_" + fieldSchema.Id + "_\\$LookupField");
initialSelect.select2();
// workaround for issue causing invalid-namespace in event-handlers - select2 uses use the container-element.id as event-namespace but sharepoint has $ in element-id that's not valid
initialSelect.on("select2:close", function (e) {
$("div#s4-workspace.ms-core-overlay").off('scroll.select2.select2-' + e.target.id.replace("$", "\\\$"));
});
i used mathjax in HTML page , it works. but a problem related to fontsize exist.
<html>
<head>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<title> mathsjax</title>
</head>
<body>
\(x={72^2-{\sqrt{53^2}}\over 25}\)
$$x={72^2-{\sqrt{53^2}}\over 25}$$
</body>
</html>
why in the first syntax[(x={72^2-{\sqrt{53^2}}\over 25})] , fontsize is very small. and what to do to increase its size.
In addition, what is the difference between the two syntax's
\(x={72^2-{\sqrt{53^2}}\over 25}\) .........1
$$x={72^2-{\sqrt{53^2}}\over 25}$$ .........2
You should use \( for inline math, and \[ as equivalent of $$.
<html>
<head>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<title> mathsjax</title>
</head>
<body>
This is part of the line: \(x={72^2-{\sqrt{53^2}}\over 25}\). Those are not:
\[x={72^2-{\sqrt{53^2}}\over 25}\]
$$x={72^2-{\sqrt{53^2}}\over 25}$$
</body>
</html>
EDIT
If it isn't enough you can also add \large or \huge.
In his comments OP says he is using HTML ckeditor, I suppose with the Mathematical Formulas widget. You can locate the demo of that widget in page linked and modify its source adding the following code:
<p><span class="math-tex">\( x={72^2-{\sqrt{53^2}}\over 25}\)</span></p>
<p><span class="math-tex">\[ x={72^2-{\sqrt{53^2}}\over 25}\]</span></p>
<p><span class="math-tex">\[ \large { x={72^2-{\sqrt{53^2}}\over 25} } \]</span></p>
<p><span class="math-tex">\[ \huge { x={72^2-{\sqrt{53^2}}\over 25} } \]</span></p>
This should be the result:
You can use {\displaystyle{...}} to force an expression or subexpression to use the sizes and spacing that would be used for a displayed equation. For fractions in particular, if you have the AMSmath extension loaded, you can use \dfrac{}{} in place of \frac{}{} to get a fraction in display style.
I just use Phaser and saw some example code like below. In the Rox.Boot.prototype function, the .load, .physics, etc, are all in game(Phaser.Game). How does this inheritance happen?
Rox = {
score: 0,
music: null,
orientated: false
};
Rox.Boot = function (game) {
};
Rox.Boot.prototype = {
preload: function () {
this.load.image('preloaderBar', 'images/preload.png');
},
create: function () {
this.physics.startSystem(Phaser.Physics.ARCADE);
this.input.maxPointers = 1;
this.state.start('Preloader');
},
};
To use Phaser, you have to have a phaser.min.js or phaser.js file which you can get here. I use the phaser.min.js file instead of the phaser.js file because I don't need the extra features that the phaser.js file has (debugging); phaser.min.js will have all the same methods, classes, properties, etc as phaser.js.
They tell you to download the whole GitHub repo, but really you just need the Phaser JS file.
After you add the phaser.min.js file to your project, make sure it's the first script you call in the head of your HTML file; you should be able to use Phaser in the following JS files after that.
Here is what my index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FILL_IN_GAME_NAME_HERE</title>
<script src="phaser.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Main.css">
<script src="Boot.js" type="text/javascript"></script>
<script src="Preloader.js" type="text/javascript"></script>
<script src="Menu.js" type="text/javascript"></script>
<script src="Game.js" type="text/javascript"></script>
<script src="GameOver.js" type="text/javascript"></script>
<script src="HighScores.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game', false, false);
game.state.add('Boot', Game.Boot);
game.state.add('Preloader', Game.Preloader);
game.state.add('Menu', Game.Menu);
game.state.add('Game', Game.Game);
game.state.add('GameOver', Game.GameOver);
game.state.add('HighScores', Game.HighScores);
game.state.start('Boot');
</script>
</body>
</html>
I am new to YUI. Just trying to get a most basic functioning example working on my site.
Here is the code:
<button id="mytest">test</button>
<script type="text/javascript">
var helloWorld = function(e) {
alert("Hello World!");
}
</script>
<script type="text/javascript">
alert('xx');
YAHOO.util.Event.addListener("mytest", "click", helloWorld);
alert('x2');
</script>
The xx alert shows, but the x2 alert never does. And, clicking on the button does not fire the HelloWorld function.
I have the necessary include files:
<!-- Required CSS -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/progressbar/assets/skins/sam/progressbar.css">
<!-- Dependency source file -->
<script src = "http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom.event.js" ></script>
<script src = "http://yui.yahooapis.com/2.8.1/build/element/element-min.js" ></script>
<!-- Optional dependency source file -->
<script src="http://yui.yahooapis.com/2.8.1/build/animation/animation-min.js" type="text/javascript"></script>
<!-- ProgressBar source file -->
<script src = "http://yui.yahooapis.com/2.8.1/build/progressbar/progressbar-min.js" ></script>
you should be sure the js files are included on you html files,the code your write is write!
Believe I found it. Or at least I was able to find other examples which worked. But in my case I believe the problem is the js files I was referencing in fact did not exist. Namely this file:
http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom.event.js
sure, it is yahoo dash dom DASH event, not yahoo dash dom DOT event