Flower Docs
  • OpenFlower overview
    • The "Hello World" tutorial
  • Videos
    • OpenFlower in 100 seconds
  • 🆕Setup and run
    • Cloud & Private Cloud
    • Self-hosting
      • Access local database or API
      • Google Cloud Platform
      • Heroku
      • Migration from Openblocks
      • Update MongoDB Versions
      • OpenFlower Version Update
      • Traefik loadbalancer
      • SMTP Server
    • Security
  • 🏨Workspaces & Teamwork
    • Workspaces
    • Members and Groups
    • Permissions for Resources
    • OAuth
      • KeyCloak
      • Google
      • GitHub
      • Generic OAuth Provider
    • Query library
    • OpenFlower Marketplace
  • ✨Build Applications
    • Create a new App
      • Modules
      • Version and Release Management
    • App Editor
      • Visual Components
        • Common Component Settings
        • File upload
        • Charts and graphs
        • Image
        • Option lists
        • List View
        • Drawer
        • Google Maps
        • Table
        • Messages / Toast
        • Calendar
      • Date handling
      • Bulk Editing
      • Layers
      • Data selection & Javascript
      • Use Markdown
      • Keyboard shortcuts
    • App Navigation
    • App Interaction
      • Event handlers
    • Themes & Styling
      • Design an efficient and user-friendly form
      • Customize Styles
      • Component Styling Possibilities
  • 🚀Connect your Data
    • Data source basics
    • Data sources in OpenFlower
      • APIs as Datasource
        • REST API
        • GraphQL
        • Google Sheets
      • SQL Databases
        • MySQL
        • MariaDB
        • PostgreSQL
        • Microsoft SQL Server
        • Oracle
      • NoSQL Databases
        • MongoDB
        • CouchDB
        • DynamoDB
      • InMemory Databases
        • Redis
      • File Storages
        • S3 File Storage
      • BigData & OLAP
        • Big Query
        • Snowflake
        • ClickHouse
        • Elasticsearch
      • Websocket Datasource
    • Query basics
      • Bind Query Data to Components
      • Query library
  • 🪄Workflows
    • n8n Integration
  • 💫Business Logic in Apps
    • Write JavaScript
      • JavaScript query
      • Temporary state
      • Transformers
      • Data responder
      • Built-in JS functions
  • 🙌Publish Apps
    • Share an App
    • Publish an App
    • Embedd an App
      • Embed Apps in React
      • Native embed SDK
        • Build the SDK from Source
  • 🔥OpenFlower Extension
    • Opensource Contribution
      • Develop UI components for Apps
      • Develop Data Source Plugins
    • Use third-party libraries in Apps
      • Day.js Date handling
      • Import your own JavaScript Library
    • Custom component
    • OpenFlower Open REST API
Powered by GitBook
On this page
  • Day.js Plugins
  • A demo App with Day.js and Plugin usage.
  1. OpenFlower Extension
  2. Use third-party libraries in Apps

Day.js Date handling

PreviousUse third-party libraries in AppsNextImport your own JavaScript Library

Last updated 7 months ago

Day.js is a lightweight JavaScript library for parsing, validating, manipulating, and formatting dates and times, designed to be a simpler and smaller alternative to Moment.js.

Day.js is already included in OpenFlower, so you can directly begin using it to work with dates and times by creating Day.js objects using dayjs(). This function accepts various formats, including strings, Date objects, and UNIX timestamps, allowing for flexible date and time manipulation such as adding or subtracting time, formatting dates, and comparing dates.

You can read how to use Day.js in their excellent Documentation here:

Day.js Plugins

To enhance the functionality of Day.js, developers can utilize its plugin system, which allows for the inclusion of additional features not available in the core library. Plugins can be added by including their scripts in the project and then registering them with Day.js using dayjs.extend(). For instance, if a developer wants to use the advancedFormat plugin, they would include the plugin script and then call window.dayjs.extend(window.dayjs_plugin_advancedFormat) to make the advanced formatting options available.

// in your JavaScript for Page or Workspace Level first require the plugin
var advancedFormat = require('dayjs/plugin/advancedFormat');

// then you can extend Day.js by it.
window.dayjs.extend(window.dayjs_plugin_advancedFormat);

This modular approach allows you to keep your Apps lightweight by only including the needed features.

An overview of Day.js Plugins:

When using plugins, it's important to ensure plugins are loaded and extended after the Day.js library is initialized. We have seen cases when this is not automatically the case and so it can mean making use of an additional JavaScript Query to make sure the Plugin is loaded and instantiated.

Now you can use Day.js Plugins at all places in OpenFlower that support {{ }} Handlebar notation.

Quarter: {{dayjs().format('Q')}}

Day of Month with ordinal: {{dayjs().format('Do')}}

Week of year: {{dayjs().format('w')}}

{{dayjs('2013-11-18 11:55').tz('Asia/Taipei')}}

A demo App with Day.js and Plugin usage.

Day.js plugins on CDNjs:

🔥
https://cdnjs.com/libraries/dayjs
https://day.js.org/docs/en/get-set/get
https://day.js.org/docs/en/plugin/plugin
2KB
DayJs with Plugin.json