CODEWITHSUNDEEP
javascriptgoogle-apps-scriptgoogle-sheetsjquery-ui-datepicker
DebPokus
DebPokus

Reputation: 23

How to return a value using Date picker in HTMLService / Google Script / Sheet?

In a google sheet I have a button which open a Jquery datepicker, calling doGet function. I want to capture the date value given by the user. How can I do it? Here my .gs:

function doGet() {
  var output = HtmlService.createTemplateFromFile('DatePicker')
      .evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setHeight(250)
      .setWidth(200)
      .setTitle('Select date');
  
 SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(output, 'Date');
}


function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

and the html :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
   <?!= include('Style'); ?>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  
  <script>  
  $(function() {    
  $('#datepicker').datepicker({changeMonth: true, changeYear: true, showButtonPanel: true});
});

  </script>
  
</head>
<body>
<div id="myCalendar"> 
<p>Date: <input type="text" id="datepicker"></p>
</div>
 
</body>
</html>

Any comment will be helpful

Upvotes: 1

Views: 1338

Answers (2)

Diego
Diego

Reputation: 9571

A couple things you need to do:

  1. Read the HTML Service: Communicate with Server Functions article, which describes how to do this.
  2. You likely should rename your doGet() function as that's reserved for web apps, which shouldn't allow triggering the opening of a modal in your spreadsheet.
  3. Add a function in your server-side code to receive the date.
  4. Create an event handler in your client-side script to pick up date changes. You could create a button to trigger this, but I've gone with jQuery's .change() method.
  5. Use google.script.run to send the date value to the backend.
function showModal() {
  var output = HtmlService.createTemplateFromFile('DatePicker')
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setHeight(250)
    .setWidth(200)
    .setTitle('Select date');
  
  SpreadsheetApp.getUi().showModalDialog(output, 'Date');
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function receiveDate(dateStr) {
  console.log(dateStr);
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <?!= include('Style'); ?>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  
  <script>  
  $(function() {    
  $('#datepicker').datepicker({changeMonth: true, changeYear: true, showButtonPanel: true});
  $('#datepicker').change(function() {
    google.script.run.receiveDate(this.value);
  });
});

  </script>
  
</head>
<body>
<div id="myCalendar"> 
<p>Date: <input type="text" id="datepicker"></p>
</div>
 
</body>
</html>

Upvotes: 2

Wicket
Wicket

Reputation: 38254

Date objects can't be passed from client-side code to server-side code but you can pass the date as milliseconds or as a string then create a Date object on the server side.

Resources

Related

Upvotes: 2

Related Questions