清除DateBox或将DatePicker附加到TextBox - Google脚本 [英] Clear a DateBox or attach a DatePicker to a TextBox - Google Script

问题描述

是否可以在处理函数中清除DateBox的值？您可以使用简单的 app.getElementById（'id'）。setValue（''）; 来清除TextBox的值，并且您可以将ListBox的值设置为一个空值，包括 listBox.addItem（''），然后使用 app.getElementById（'id'）。将该ListBox设置为该项。setItemSelected （{item＃for blank item}，true）; 但我一直无法找出清除DateBox的方法。我们的目标是制作一个简单的表格，允许用户填写表格并用一个按钮提交表格，然后将表格自动重置，以便用户可以重新填写表格以提交新的提交。

或者，如果我怀疑它还不能清除DateBox（功能限制），那么我可以简单地使用一个TextBox。为了让事情看起来更好（并且帮助用户以脚本期望的格式输入日期），如果我可以将DatePicker添加到TextBox，但是我发现从旧的教程生成整个DatePicker函数我还没有找到一种简单的方法来将新的DatePicker GAS类附加到TextBox中。

GAS文档： https://developers.google.com/apps-script/reference/ui/date-box

日期选取器2教程 - https： //sites.google.com/site/appsscripttutorial/miscellaneous/date-picker-2

大量简化的示例代码，希望在不强迫任何人的情况下提供足够的信息阅读5页代码，以了解我想强调的内容。请特别注意 submitHandler（e）函数中的注释。此代码可以复制到空白（保存）的电子表格中进行测试，或者您可以替换电子表格特定的代码，直接返回应用程序，如果您更愿意这样做。

  //打开活动电子表格并选择第一张表格。 
 var ss = SpreadsheetApp.getActiveSpreadsheet（）; 
 var sheets = ss.getSheets（）; 
 var sheet = sheets [0]; 
 
函数doGet（）{
 var app = UiApp.createApplication（）。setTitle（'Test Form'）; 
 //使用3x2网格托管标签和框的主面板。 
 var mainVP = app.createVerticalPanel（）; 
 var mainCP = app.createCaptionPanel（'Purchase Details'）; 
 var mainG = app.createGrid（3，2）; 
 var nameL = app.createLabel（'Name'）; 
 var nameT = app.createTextBox（）。setName（'name'）。setId（'name'）; 
 var dateL = app.createLabel（'Date'）; 
 var dateD = app.createDateBox（）。setName（'date'）。setId（'date'）; 
 var ownL = app.createLabel（'Own / Lease'）; 
 var ownC = app.createListBox（）。setName（'ownLease'）。setId（'ownLease'）; 
 //提交按钮和自动重置功能。 
 var subHP = app.createHorizo​​ntalPanel（）。setSize（'100％'，'40px'）; 
 var subL = app.createLabel（'Submitted'）。setId（'subL'）。setVisible（false）; 
 var subB = app.createButton（'Submit'）; 
 //处理按钮。 
 var subHandler = app.createServerHandler（'submitHandler'）; 
 subHandler.addCallbackElement（mainVP）; 
 subB.addClickHandler（subHandler）; 
 //向ListBox添加选项。 
 ownC.addItem（''）。addItem（'Own'）。addItem（'Lease'）; 
 //将小部件放置在网格上。 
 mainG.setWidget（0，0，nameL）.setWidget（0，1，nameT）
 .setWidget（1,0，dateL）.setWidget（1，1，dateD）
。 setWidget（2，0，ownL）.setWidget（2，1，ownC）; 
 //将提交按钮和标签对齐到右侧，并将它们添加到他们的HPanel。 
 subHP 
 .add（subL）.setCellHorizo​​ntalAlignment（subL，UiApp.Horizo​​ntalAlignment.RIGHT）
 .add（subB）.setCellHorizo​​ntalAlignment（subB，UiApp.Horizo​​ntalAlignment.RIGHT）; 
 //将东西添加到面板中，使其显示出来。 
 mainCP.add（mainG）; 
 mainVP.add（mainCP）; 
 mainVP.add（subHP）; 
 app.add（mainVP）; 
 var doc = SpreadsheetApp.getActive（）; 
 doc.show（app）; 
} 
 
 function submitHandler（e）{
 var app = UiApp.getActiveApplication（）; 
 //为购买详情CaptionPanel中的每个字段设置变量。 
 var name = e.parameter.name; 
 var date = e.parameter.date; 
 var ownLease = e.parameter.ownLease; 
 //我在这里使用了一个sheet.appendRow（）方法，但是出于这个问题的目的 -  
 //我们实际上并不需要数据，只需要清除它。 
 //清除表单中的数据以准备另一次提交。 
 app.getElementById（'name'）。setValue（''）; 
 //app.getElementById('date'）/ *这是我需要以某种方式清除的字段。 * / 
 app.getElementById（'ownLease'）。setItemSelected（0，true）; 
 //点击提交按钮时显示单词提交。 
 var label = app.getElementById（'subL'）; 
 label.setVisible（true）.setStyleAttribute（'color'，'blue'）; 
返回应用程序; 
 
 
 
 $ b总结：
 
  $ b  ol> 
 
有没有方法使用处理函数清除DateBox中的值，如果是这样，如何？
 
 
如果清除DateBox不可能，我将一个DatePicker添加到TextBox并将数据输入限制为特定格式（所以TextBox不会将blahblahblah作为有效日期）？
 
 
 
 
 
 
这里是一个测试，我在提交处理程序中执行替换，但我想它将被放置在一个单独的处理程序中，称为再次提交。 。（但这取决于你）：
 
 
 
我更改了提交确认以显示新的datePicker返回的日期（仅用于测试）
  // //打开活动电子表格并选择第一张表格。 
 var ss = SpreadsheetApp.getActiveSpreadsheet（）; 
 var sheets = ss.getSheets（）; 
 var sheet = sheets [0]; 
 var popAttributes = {'padding'：'10px'，'font-family'：'Arial，sans-serif'，'fontSize'：'10pt'，'color'：'＃000099'，'background' ：'＃ffffee'，'border-radius'：'10px'} 
 var btnAttributes = {'padding'：'3px'，'font-family'：Arial，sans-serif，'fontSize'： '10pt'，'border-radius'：'6px'} 
 
函数doGet（）{
 var app = UiApp.createApplication（）。setTitle（'Test Form'）; 
 //使用3x2网格托管标签和框的主面板。 
 var mainVP = app.createVerticalPanel（）; 
 var mainCP = app.createCaptionPanel（'Purchase Details'）。setStyleAttributes（popAttributes）; 
 var mainG = app.createGrid（3，2）.setId（'grid'）; 
 var nameL = app.createLabel（'Name'）; 
 var nameT = app.createTextBox（）。setName（'name'）。setId（'name'）; 
 var dateL = app.createLabel（'Date'）; 
 var dateD = app.createDateBox（）。setName（'date'）。setId（'date'）; 
 var ownL = app.createLabel（'Own / Lease'）; 
 var ownC = app.createListBox（）。setName（'ownLease'）。setId（'ownLease'）; 
 //提交按钮和自动重置功能。 
 var subHP = app.createHorizo​​ntalPanel（）。setSize（'100％'，'40px'）; 
 var subL = app.createLabel（'Submitted'）。setId（'subL'）。setVisible（false）; 
 var subB = app.createButton（'Submit'）。setStyleAttributes（btnAttributes）; 
 //处理按钮。 
 var subHandler = app.createServerHandler（'submitHandler'）; 
 subHandler.addCallbackElement（mainVP）; 
 subB.addClickHandler（subHandler）; 
 //向ListBox添加选项。 
 ownC.addItem（''）。addItem（'Own'）。addItem（'Lease'）; 
 //将小部件放置在网格上。 
 mainG.setWidget（0，0，nameL）.setWidget（0，1，nameT）
 .setWidget（1,0，dateL）.setWidget（1，1，dateD）
。 setWidget（2，0，ownL）.setWidget（2，1，ownC）; 
 //将提交按钮和标签对齐到右侧，并将它们添加到他们的HPanel。 
 subHP 
 .add（subL）.setCellHorizo​​ntalAlignment（subL，UiApp.Horizo​​ntalAlignment.RIGHT）
 .add（subB）.setCellHorizo​​ntalAlignment（subB，UiApp.Horizo​​ntalAlignment.RIGHT）; 
 //将东西添加到面板中，使其显示出来。 
 mainCP.add（mainG）; 
 mainVP.add（mainCP）; 
 mainVP.add（subHP）; 
 app.add（mainVP）; 
 var doc = SpreadsheetApp.getActive（）; 
 doc.show（app）; 
} 
 
 function submitHandler（e）{
 var app = UiApp.getActiveApplication（）; 
 //为购买详情CaptionPanel中的每个字段设置变量。 
 var name = e.parameter.name; 
 var date = e.parameter.date; 
 var ownLease = e.parameter.ownLease; 
 //我在这里使用了一个sheet.appendRow（）方法，但是出于这个问题的目的 -  
 //我们实际上并不需要数据，只需要清除它。 
 //清除表单中的数据以准备另一次提交。 
 app.getElementById（'grid'）。setWidget（1，1，app.createDateBox（）。setId（'date'）.setName（'date'））
 app.getElementById（'date' ）/ *这是我需要以某种方式清除的字段。 * / 
 app.getElementById（'ownLease'）。setItemSelected（0，true）; 
 //点击提交按钮时显示单词提交。 
 var label = app.getElementById（'subL'）; 
 label.setVisible（true）.setStyleAttribute（'color'，'blue'）。setText（e.parameter.date）; //测试返回的日期值
 return app; 
} 
  
 
Is it possible to clear the value of a DateBox within a handler function?  You can clear the value of a TextBox with just a simple app.getElementById('id').setValue(''); and you can set the value of a ListBox to a blank value by including listBox.addItem('') and then setting the ListBox to that item with app.getElementById('id').setItemSelected({item # for blank item}, true); but I have been unable to figure out a way to clear a DateBox.  The goal is to have a simple form that allows users to fill it out and submit the form with a button then have the form auto-reset so the user can fill it out again for a new submission.

Alternatively, if, as I suspect, it is not yet possible to clear a DateBox (feature limitation), then I could simply use a TextBox.  To make things look better (and to help users enter the date in the format the script expects), it would be nice if I could add a DatePicker to the TextBox but other than the old tutorial I found that generates the entire DatePicker function from scratch I haven't found a simple way to attach the new DatePicker GAS Class to a TextBox.

GAS Documentation: https://developers.google.com/apps-script/reference/ui/date-box

Date Picker 2 Tutorial - https://sites.google.com/site/appsscripttutorial/miscellaneous/date-picker-2

Much simplified sample code that hopefully provides enough information without forcing anyone to read 5 pages of code to get to what I'm trying to highlight.  Note the comments especially in the submitHandler(e) function.  This code can be copied into a blank (saved) spreadsheet for testing or you can replace the spreadsheet specific code to just return the app if you're more comfortable doing that.
//Opens the active spreadsheet and selects the first sheet.
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheets = ss.getSheets();
var sheet = sheets[0];

function doGet() {
var app = UiApp.createApplication().setTitle('Test Form');
//Main panel with a 3x2 grid hosting labels and boxes.
var mainVP = app.createVerticalPanel();
  var mainCP = app.createCaptionPanel('Purchase Details');
    var mainG = app.createGrid(3, 2);
      var nameL = app.createLabel('Name');
      var nameT = app.createTextBox().setName('name').setId('name');
      var dateL = app.createLabel('Date');
      var dateD = app.createDateBox().setName('date').setId('date');
      var ownL = app.createLabel('Own/Lease');
      var ownC = app.createListBox().setName('ownLease').setId('ownLease');
//Submit button with auto-reset functionality.
    var subHP = app.createHorizontalPanel().setSize('100%', '40px');
      var subL = app.createLabel('Submitted').setId('subL').setVisible(false);
      var subB = app.createButton('Submit');
//Handler for button.
var subHandler = app.createServerHandler('submitHandler');
subHandler.addCallbackElement(mainVP);
subB.addClickHandler(subHandler);
//Add options to ListBox.
ownC.addItem('').addItem('Own').addItem('Lease');
//Place widgets on Grid.
mainG.setWidget(0, 0, nameL).setWidget(0, 1, nameT)
  .setWidget(1, 0, dateL).setWidget(1, 1, dateD)
  .setWidget(2, 0, ownL).setWidget(2, 1, ownC);
//Aligns the submit Button and Label to the right and adds them to their HPanel.
subHP
  .add(subL).setCellHorizontalAlignment(subL, UiApp.HorizontalAlignment.RIGHT)
  .add(subB).setCellHorizontalAlignment(subB, UiApp.HorizontalAlignment.RIGHT);
//Adds stuff to panels so it shows up.
mainCP.add(mainG);
mainVP.add(mainCP);
mainVP.add(subHP);
app.add(mainVP);
var doc = SpreadsheetApp.getActive();
doc.show(app);
}

function submitHandler(e) {
var app = UiApp.getActiveApplication();
//Set variables for each field in the Purchase Details CaptionPanel.
var name = e.parameter.name;
var date = e.parameter.date;
var ownLease = e.parameter.ownLease;
  //I use a sheet.appendRow() method here but for the purposes of this question-
  //we don't actually need the data, just need to clear it.
//Clears data from form to prepare for another submission.
app.getElementById('name').setValue('');
//app.getElementById('date') /* This is the field I need to clear somehow. */
app.getElementById('ownLease').setItemSelected(0, true);
//Displays the word "Submitted" when the Submit Button is clicked.
var label = app.getElementById('subL');
label.setVisible(true).setStyleAttribute('color', 'blue');
return app;
}
In summary:

Is there a way to clear the value in a DateBox using a handler function and if so, how?
If clearing a DateBox is impossible, how could I add a DatePicker to a TextBox and limit data entry to a specific format (so the TextBox wouldn't take "blahblahblah" as a valid date)?

解决方案
Have you tried a third solution which would be to create a new datepicker widget and add it to your grid to replace the "filled one" ? 

here is a test where I do the "replace" in the submit handler but I guess it would be placed in a separate handler called 'submit again' for example...(but that is up to you) :

I changed your submit confirmation to show the date returned by the new datePicker (just to test)
//Opens the active spreadsheet and selects the first sheet.
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheets = ss.getSheets();
var sheet = sheets[0];
var popAttributes = {'padding':'10px','font-family':"Arial, sans-serif",'fontSize':'10pt','color':'#000099','background':'#ffffee','border-radius':'10px'}
var btnAttributes = {'padding':'3px','font-family':"Arial, sans-serif",'fontSize':'10pt','border-radius':'6px'}

function doGet() {
var app = UiApp.createApplication().setTitle('Test Form');
//Main panel with a 3x2 grid hosting labels and boxes.
var mainVP = app.createVerticalPanel();
  var mainCP = app.createCaptionPanel('Purchase Details').setStyleAttributes(popAttributes);
    var mainG = app.createGrid(3, 2).setId('grid');
      var nameL = app.createLabel('Name');
      var nameT = app.createTextBox().setName('name').setId('name');
      var dateL = app.createLabel('Date');
      var dateD = app.createDateBox().setName('date').setId('date');
      var ownL = app.createLabel('Own/Lease');
      var ownC = app.createListBox().setName('ownLease').setId('ownLease');
//Submit button with auto-reset functionality.
    var subHP = app.createHorizontalPanel().setSize('100%', '40px');
      var subL = app.createLabel('Submitted').setId('subL').setVisible(false);
      var subB = app.createButton('Submit').setStyleAttributes(btnAttributes);
//Handler for button.
var subHandler = app.createServerHandler('submitHandler');
subHandler.addCallbackElement(mainVP);
subB.addClickHandler(subHandler);
//Add options to ListBox.
ownC.addItem('').addItem('Own').addItem('Lease');
//Place widgets on Grid.
mainG.setWidget(0, 0, nameL).setWidget(0, 1, nameT)
  .setWidget(1, 0, dateL).setWidget(1, 1, dateD)
  .setWidget(2, 0, ownL).setWidget(2, 1, ownC);
//Aligns the submit Button and Label to the right and adds them to their HPanel.
subHP
  .add(subL).setCellHorizontalAlignment(subL, UiApp.HorizontalAlignment.RIGHT)
  .add(subB).setCellHorizontalAlignment(subB, UiApp.HorizontalAlignment.RIGHT);
//Adds stuff to panels so it shows up.
mainCP.add(mainG);
mainVP.add(mainCP);
mainVP.add(subHP);
app.add(mainVP);
var doc = SpreadsheetApp.getActive();
doc.show(app);
}

function submitHandler(e) {
var app = UiApp.getActiveApplication();
//Set variables for each field in the Purchase Details CaptionPanel.
var name = e.parameter.name;
var date = e.parameter.date;
var ownLease = e.parameter.ownLease;
  //I use a sheet.appendRow() method here but for the purposes of this question-
  //we don't actually need the data, just need to clear it.
//Clears data from form to prepare for another submission.
app.getElementById('grid').setWidget(1, 1, app.createDateBox().setId('date').setName('date'))
app.getElementById('date') /* This is the field I need to clear somehow. */
app.getElementById('ownLease').setItemSelected(0, true);
//Displays the word "Submitted" when the Submit Button is clicked.
var label = app.getElementById('subL');
label.setVisible(true).setStyleAttribute('color', 'blue').setText(e.parameter.date);// to test the returned date value
return app;
}


                        
这篇关于清除DateBox或将DatePicker附加到TextBox  -  Google脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！