将 Google Sheets 中的日期格式化到 Webapp

将 google sheets 中的日期格式化到 webapp

本文旨在解决从 Google Sheets 中提取的日期数据在 Webapp 中显示格式不正确的问题。通过 Utilities.formatDate 函数或 getDisplayValue 方法,可以轻松地将日期格式化为所需的 “dd MMMM yyyy” 格式。此外,还介绍了使用 getValues 方法批量获取数据以提高脚本效率的最佳实践。

格式化 Google Sheets 日期到 Webapp 的两种方法

在使用 Google Apps Script 构建 Webapp 时,从 Google Sheets 获取的日期数据可能不会以你期望的格式显示。例如,你可能希望日期显示为 “dd MMMM yyyy”,但默认情况下,它可能显示为其他格式。以下介绍两种常用的方法来解决这个问题:

1. 使用 Utilities.formatDate 函数

Utilities.formatDate 函数可以将日期对象格式化为字符串,允许你指定所需的日期格式。

示例代码:

function submitDT(obj){  var ss = SpreadsheetApp.openById("google sheet url");  var sheet = ss.getSheetByName("mysheet");  var  flag  =  1 ;  var lr = sheet.getLastRow();      for(var i = 1;i <= lr;i++){  var vid = sheet.getRange(i, 2).getValue();      if(vid ==obj){      flag = 0;  var b1 = sheet.getRange(i, 1).getValue();        // 格式化日期  var b3 = sheet.getRange(i, 3).getValue();  if (b3 instanceof Date) {    b3 = Utilities.formatDate(b3, Session.getScriptTimeZone(), "dd MMMM yyyy");  }  var b4 = sheet.getRange(i, 4).getValue();  var b5 = sheet.getRange(i, 5).getValue();  var b6 = sheet.getRange(i, 6).getValue();  var b7 = sheet.getRange(i, 7).getValue();  // 格式化日期  var b8 = sheet.getRange(i, 8).getValue();  if (b8 instanceof Date) {    b8 = Utilities.formatDate(b8, Session.getScriptTimeZone(), "dd MMMM yyyy");  }  var data ="
Transaction Information.
Tracking No.:"+obj+"
Transaction Title"+b1+"
Date Accepted by Focal:"+b3+"
Name of Establishment:"+b4+"
Address:"+b5+"
Status:"+b6+"
Claimed by:"+b7+"
Date Claimed:"+b8+"
"; return data; } } if(flag==1){ var data ="Transaction not found. For other concerns, please contact us at **********"; return data; } };}

代码解释:

Utilities.formatDate(date, timeZone, format): 这个函数接受三个参数:date: 要格式化的日期对象。timeZone: 时区字符串。 Session.getScriptTimeZone() 返回脚本的时区。format: 日期格式字符串。 “dd MMMM yyyy” 表示日期格式为 “日 月 年”,其中 “dd” 是两位数的日,”MMMM” 是完整的月份名称,”yyyy” 是四位数的年份。if (b3 instanceof Date): 确保 b3 是一个 Date 对象,然后再进行格式化。

注意事项:

确保你的脚本具有正确的时区设置,以便日期格式化正确。Utilities.formatDate 函数返回的是字符串,因此你需要在使用它之前确保变量是 Date 对象。

2. 使用 getDisplayValue 方法

getDisplayValue 方法返回单元格中显示的字符串值,而不是实际的日期对象。如果 Google Sheets 中显示的日期格式与你想要的格式相同,则可以使用此方法。

示例代码:

function submitDT(obj){  var ss = SpreadsheetApp.openById("google sheet url");  var sheet = ss.getSheetByName("mysheet");  var  flag  =  1 ;  var lr = sheet.getLastRow();      for(var i = 1;i <= lr;i++){  var vid = sheet.getRange(i, 2).getValue();      if(vid ==obj){      flag = 0;  var b1 = sheet.getRange(i, 1).getValue();        // 获取显示值  var b3 = sheet.getRange(i, 3).getDisplayValue();  var b4 = sheet.getRange(i, 4).getValue();  var b5 = sheet.getRange(i, 5).getValue();  var b6 = sheet.getRange(i, 6).getValue();  var b7 = sheet.getRange(i, 7).getValue();  // 获取显示值  var b8 = sheet.getRange(i, 8).getDisplayValue();  var data ="
Transaction Information.
Tracking No.:"+obj+"
Transaction Title"+b1+"
Date Accepted by Focal:"+b3+"
Name of Establishment:"+b4+"
Address:"+b5+"
Status:"+b6+"
Claimed by:"+b7+"
Date Claimed:"+b8+"
"; return data; } } if(flag==1){ var data ="Transaction not found. For other concerns, please contact us at **********"; return data; } };}

代码解释:

sheet.getRange(i, 3).getDisplayValue(): 获取单元格 (i, 3) 中显示的字符串值。

注意事项:

getDisplayValue 方法返回的是字符串,因此你不需要进行额外的格式化。如果 Google Sheets 中显示的日期格式不正确,则此方法将无法解决问题。

提高脚本效率:使用 getValues 批量获取数据

为了提高脚本的效率,建议使用 getValues 方法批量获取数据,而不是一次获取一个单元格的值。

示例代码:

function submitDT(obj){  var ss = SpreadsheetApp.openById("google sheet url");  var sheet = ss.getSheetByName("mysheet");  var lr = sheet.getLastRow();  // 获取所有数据  var dataRange = sheet.getRange(1, 1, lr, 8);  var data = dataRange.getValues();  for(var i = 0; i < lr; i++){    var vid = data[i][1]; // Column B (index 1)    if(vid == obj){      var b1 = data[i][0]; // Column A (index 0)      var b3 = data[i][2]; // Column C (index 2)      if (b3 instanceof Date) {        b3 = Utilities.formatDate(b3, Session.getScriptTimeZone(), "dd MMMM yyyy");      }      var b4 = data[i][3]; // Column D (index 3)      var b5 = data[i][4]; // Column E (index 4)      var b6 = data[i][5]; // Column F (index 5)      var b7 = data[i][6]; // Column G (index 6)      var b8 = data[i][7]; // Column H (index 7)      if (b8 instanceof Date) {        b8 = Utilities.formatDate(b8, Session.getScriptTimeZone(), "dd MMMM yyyy");      }      var dataOutput = "
Transaction Information.
Tracking No.:" + obj + "
Transaction Title" + b1 + "
Date Accepted by Focal:" + b3 + "
Name of Establishment:" + b4 + "
Address:" + b5 + "
Status:" + b6 + "
Claimed by:" + b7 + "
Date Claimed:" + b8 + "
"; return dataOutput; } } var dataOutput = "Transaction not found. For other concerns, please contact us at **********"; return dataOutput;}

代码解释:

sheet.getRange(1, 1, lr, 8).getValues(): 获取从第一行第一列开始,到最后一行第八列的所有数据,并将数据存储在一个二维数组中。data[i][1] 访问第 i 行第二列的数据。

总结:

通过使用 Utilities.formatDate 函数或 getDisplayValue 方法,你可以轻松地将 Google Sheets 中的日期格式化为 Webapp 中所需的格式。此外,使用 getValues 方法批量获取数据可以提高脚本的效率。选择哪种方法取决于你的具体需求和 Google Sheets 中显示的日期格式。建议优先使用 Utilities.formatDate 函数,因为它提供了更大的灵活性和控制力。

以上就是将 Google Sheets 中的日期格式化到 Webapp的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1575727.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月22日 17:23:35
下一篇 2025年12月22日 17:23:50

相关推荐

  • Vue3 Datepicker日期格式化:自定义输出格式的实用指南

    本教程旨在指导Vue3 Datepicker用户如何将组件默认输出的完整日期时间字符串(如GMT格式)格式化为更简洁、自定义的显示格式,例如Thu, 23 Jun 2022。核心方法是利用inputFormat prop并配置相应的日期格式化字符串,从而实现灵活的日期显示控制。 在Vue 3应用中集…

    2025年12月22日
    000
  • 解决Vue.js移动端DOM加载后需点击才显示的问题:模拟点击与深度排查

    本文探讨Vue.js应用在移动端加载DOM后,内容不显示直至用户点击屏幕的常见问题。我们将提供一种使用JavaScript模拟点击的有效临时解决方案,并指导如何在Vue.js环境中实现。同时,文章强调这通常是深层渲染问题的表象,并建议进一步排查潜在的CSS、JavaScript执行或浏览器兼容性根源…

    2025年12月22日
    000
  • 实现网页平滑滚动效果:CSS scroll-behavior 详解

    本文详细介绍了如何利用CSS的scroll-behavior属性,为网页实现原生的平滑滚动效果。通过将scroll-behavior: smooth;应用于HTML或Body元素,开发者可以轻松优化用户体验,使页面在锚点跳转或脚本触发滚动时,呈现出流畅的动画过渡,而非生硬的瞬间跳跃。教程涵盖了其基本…

    2025年12月22日 好文分享
    000
  • CSS与JavaScript实现圆形头像周围的星级评分布局

    本文详细介绍了如何在圆形头像或图片周围优雅地布局星级评分图标。通过两种主要方法——结合CSS transform与JavaScript动态计算,以及纯JavaScript利用三角函数精确控制——我们能够实现图标的圆形排列。教程将提供详细的代码示例,并探讨两种方法的实现原理、优缺点及应用场景,帮助开发…

    2025年12月22日 好文分享
    000
  • Vue.js移动端页面加载后内容不显示:程序化触发DOM渲染的解决方案

    本文旨在解决Vue.js应用在移动端加载后,页面内容未显示、需用户点击屏幕后才出现的异常渲染问题。通过在组件挂载后,利用JavaScript程序化地触发一个点击事件,可以有效激活DOM的完整渲染,确保用户无需额外操作即可看到完整页面内容,提升用户体验。 在vue.js开发中,有时会遇到一个令人困惑的…

    2025年12月22日
    000
  • A-Frame VR中实现持久化HTML界面元素显示

    在A-Frame VR体验中,传统的HTML界面元素在进入VR模式后常会消失,导致用户交互受阻。本文将介绍如何利用aframe-htmblembed-component组件,将HTML及CSS元素无缝嵌入A-Frame的3D场景中,确保它们在VR模式下依然可见并可交互。通过示例代码,读者将学习如何创…

    2025年12月22日
    000
  • 使用 jQuery 验证 Bootstrap 表格中非文本输入框

    本文介绍了如何使用 jQuery 扩展现有的 Bootstrap 表格验证功能,使其能够正确地验证非文本输入框(如日期选择器和下拉菜单)。通过修改 jQuery 选择器,可以确保所有类型的输入框在提交时都经过验证,并提供相应的视觉反馈。 在 Bootstrap 表格中,经常需要验证用户输入的数据,确…

    2025年12月22日
    000
  • 基于 JavaScript 根据 Div 类名隐藏 DOM 元素

    本文旨在提供一个清晰的 JavaScript教程,讲解如何根据特定 div 元素的类名来动态地隐藏或显示 DOM 元素。通过检查目标 div 是否包含特定的类名,我们可以控制其他元素的可见性,从而实现更灵活的页面交互效果。本文将提供详细的代码示例和解释,帮助你理解并应用这一技术。 在前端开发中,经常…

    2025年12月22日
    000
  • 根据页面 overlay 的显示状态动态添加 DOM 元素

    本文介绍了如何使用 JavaScript 根据页面 overlay 元素的显示状态,动态地向 DOM 中添加新的元素。通过检查 overlay 元素是否包含特定的 class,可以判断其是否显示,从而决定是否创建并插入新的按钮元素。本文提供了详细的代码示例和步骤说明,帮助开发者实现这一功能。 动态添…

    2025年12月22日
    000
  • 使用 JavaScript 根据 DOM 元素的 Class 隐藏元素

    本文将介绍如何使用 JavaScript 检测特定 class 的 DOM 元素是否存在,并根据检测结果动态地控制另一个 DOM 元素的显示与隐藏。通过示例代码,你将学会如何有效地利用 `classList` 属性来判断元素是否具有特定的 class,并根据判断结果修改元素的 `display` 属…

    2025年12月22日
    000
  • 根据页面 Overlay 状态动态显示 DOM 元素

    本文旨在提供一种基于 JavaScript,根据页面 Overlay 元素是否显示,动态控制其他 DOM 元素显示与隐藏的实现方法。我们将通过检查特定 CSS 类名是否存在于 Overlay 元素上,来判断其可见性,并根据结果决定是否添加或隐藏目标 DOM 元素。本文提供详细的代码示例和注意事项,帮…

    2025年12月22日
    000
  • Prettier 格式化 HTML 时 Head 标签出现异常的解决方案

    Prettier 是一款流行的代码格式化工具,旨在通过统一的代码风格提高代码可读性和可维护性。然而,在某些情况下,Prettier 的默认配置可能无法满足所有需求,甚至可能产生不符合预期的格式化结果。例如,在使用 Prettier 2.6.2 格式化 HTML 代码时,可能会遇到 head 标签的闭…

    2025年12月22日
    000
  • Prettier格式化HTML时出现意外的空格调整:原因与解决方案

    Prettier是一款流行的代码格式化工具,它可以自动调整代码风格,使其保持一致。然而,在处理HTML代码时,有时Prettier会因为空格的缘故,做出一些不符合预期的调整,例如将闭合标签的>提前到与 htmlWhitespaceSensitivity配置项有关。 htmlWhitespace…

    2025年12月22日
    000
  • JavaScript 根据 DIV 类名隐藏 DOM 元素

    本文介绍了如何使用 JavaScript 根据特定 DIV 元素的类名来动态控制其他 DOM 元素的显示与隐藏。核心在于判断目标 DIV 是否包含特定的类名,并据此决定是否隐藏或显示其他元素。本文将提供详细的代码示例和解释,帮助开发者理解和应用这一技术。### 动态控制 DOM 元素的显示在 Web…

    2025年12月22日
    000
  • 解决 Prettier 2.6.2 对 HTML 代码的意外修改

    在本文中,我们将解决在使用 Prettier 2.6.2 版本格式化 HTML 代码时遇到的意外修改问题,重点介绍 htmlWhitespaceSensitivity 选项的作用,并提供通过命令行或配置文件设置该选项的详细步骤,从而避免不必要的代码格式化问题,确保 HTML 代码的稳定性和可读性。 …

    2025年12月22日
    000
  • Prettier 格式化 HTML 时 Head 标签闭合异常问题及解决方案

    Prettier 是一款流行的代码格式化工具,能够自动调整代码风格,提高代码一致性和可读性。然而,在处理 HTML 代码时,有时会出现一些意想不到的问题,例如 head 标签被提前闭合。 X 经过 Prettier 格式化后,可能变成: X 这种格式化错误会导致 HTML 结构混乱,影响页面渲染。 …

    2025年12月22日
    000
  • Prettier HTML 格式化异常:原因及解决方案

    正如本文摘要所述,Prettier 在格式化 HTML 代码时,有时会在不应该换行的地方插入换行符,例如在 标签内部。 这个问题通常与 Prettier 的默认 HTML 空格敏感度设置有关。 幸运的是,通过配置 htmlWhitespaceSensitivity 选项,可以轻松解决这个问题。 问题…

    2025年12月22日
    000
  • 使用 AJAX 和 C# 实现输入框值变更时动态更新页面

    本文旨在介绍如何利用 AJAX 技术,在用户更改输入框的值时,无需刷新整个页面即可调用 C# 方法,并将输入框的值作为参数传递给该方法。通过这种方式,可以实现动态地从服务器获取数据并更新页面内容,从而提升用户体验。本文将提供详细的代码示例和步骤,帮助开发者理解和应用这一技术。 实现步骤 要实现输入框…

    2025年12月22日
    000
  • 使用 AJAX 和 C# 实现文本框内容改变时动态更新页面

    本文介绍了如何利用 AJAX 技术在 HTML 文本框内容发生改变时,无需刷新整个页面即可调用 C# 方法,并将文本框的值作为参数传递给该方法。通过示例代码详细展示了前端 JavaScript 代码和后端 C# 代码的实现方式,帮助开发者实现动态更新页面的需求。 在 Web 开发中,经常会遇到需要在…

    2025年12月22日
    000
  • 解决 Socket.IO 客户端模块加载失败问题

    本文旨在解决在使用 Socket.IO 构建聊天应用时,客户端出现的 “Failed to resolve module specifier” 错误。该错误通常是由于模块加载方式不正确导致的。本文将提供详细的解决方案,并给出示例代码,帮助开发者快速解决该问题,成功构建基于 S…

    2025年12月22日
    000

发表回复

登录后才能评论
关注微信