Is it currently possible to use the jQuery library in a Google Doc or Google Sheet container bound Google Apps Script? If so, how?
4
-
Container-bound scripts might relate to Google Sheets, Docs, and Forms, or to Google Sites. I suspect the answers are different. Are you talking about Sites, or one of the others?T.J. Crowder– T.J. Crowder2014-06-22 13:43:01 +00:00Commented Jun 22, 2014 at 13:43
-
@T.J.Crowder - good point - I clarified the question.codekiln– codekiln2014-06-22 13:50:14 +00:00Commented Jun 22, 2014 at 13:50
-
Yes. Look at the docs for htmlAppZig Mandel– Zig Mandel2014-06-22 15:37:54 +00:00Commented Jun 22, 2014 at 15:37
-
@ P.Myer Nore -There is little chance that anyone notice your edit-refinement request...why not posting a new question? -btw, thx for accepting and up voting :-)Serge insas– Serge insas2014-06-22 18:19:17 +00:00Commented Jun 22, 2014 at 18:19
Add a comment
|
1 Answer
it works exactly the same way as UiApp in spreadsheet, just use
SpreadsheetApp.getActive().show(HtmlService.createTemplateFromFile('index').evaluate());
and create an HTML file with your code and library.
below is a full demo code, a screen capture and a link to a shared example (view only).
code :
function onOpen() {
var menuEntries = [ {name: "datePickerTest", functionName: "datePickerTest"}
];
SpreadsheetApp.getActiveSpreadsheet().addMenu("test",menuEntries);//
}
function datePickerTest(){
SpreadsheetApp.getActive().show(HtmlService.createTemplateFromFile('index').evaluate());
}
index.html
<div class="demo" >
<style type="text/css"> .demo { margin: 30px ; color : #AAA ; font-family : arial sans-serif ;font-size : 10pt }
p { color : red ; font-size : 8pt }
</style>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>
/* French initialisation for the jQuery UI date picker plugin. */
/* Written by Keith Wood (kbwood{at}iinet.com.au),
Stéphane Nahmani ([email protected]),
Stéphane Raimbault <[email protected]> */
jQuery(function($){
$.datepicker.regional['fr'] = {
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin',
'Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
dayNamesMin: ['D','L','M','M','J','V','S'],
weekHeader: 'Sem.',
dateFormat: 'dd/mm/yyyy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['fr']);
});
</script>
Welcome to some random page
<p>Please select a date below :</p>
click here : <input type="text" name="date" id="datepicker" />
<input type="text" id="alternate" size="30">
<script>
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy",
showWeek: false,
firstDay: 1,
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
Locale : 'fr'
});
</script>
</div>
