Set Date and Time Input to default to today

Bootstrap Studio Help
1

Hi all,

I’d like to use the “Date and Time Input” component in Bootstrap Studio, and have it default to showing today’s date and HH MM when the page loads, along with the picker option to change to some other date and HH MM.

I see the Lightpicker example here: Date Picker | Bootstrap Studio

However, I’d like to stay away from using an external control.

Can the above be done using Date and Time Input?

Thank you.

2

You will need a little javascript for that
Give your input type="datetime-local" an id=dateTime

If you don’t care about time zones, you can do it like this

document.querySelector('#dateTime').value = new Date(Date.now())
  .toJSON()
  .substring(0, 16);

If you care about time zones, you can do it like this

function getFormattedDateTime(date) {
  const options = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
  };

  const formatter = new Intl.DateTimeFormat(undefined, options);
  const formattedDateTime = formatter.format(date);

  return formattedDateTime.replace(
    /(\d+)\/(\d+)\/(\d+), (\d+):(\d+)/,
    '$3-$1-$2T$4:$5'
  );
}

const date = new Date(Date.now());
const formattedDateTime = getFormattedDateTime(date);
document.querySelector('#dateTime').value= formattedDateTime;
1 Like
3

Wow, thank you very much for the reply and information on how to accomplish this!

This is exactly what I was looking for.

I really appreciate your help and have found your answers to several other questions posted here by others to be very straight forward and informative. Very helpfull.

Many thanks!

1 Like
4

I made a Intl Formatter class, Copy the code below into a javascript file. Change the default timezone from ‘UTC’ to your timezone. You can format dateTime, numbers, currency, units and lists

Maybe you like it and think it’s useful

class IntlFormatter {
  constructor(timeZone = 'UTC') {
    this.timeZone = timeZone;
  }

  formatDateTime(date) {
    const options = {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false,
      timeZone: this.timeZone,
    };

    const formatter = new Intl.DateTimeFormat(undefined, options);
    const formattedDateTime = formatter.format(date);

    return formattedDateTime.replace(
      /(\d+)\/(\d+)\/(\d+), (\d+):(\d+)/,
      '$3-$1-$2T$4:$5'
    );
  }

  formatNumber(number) {
    const formatter = new Intl.NumberFormat(undefined);
    const formattedNumber = formatter.format(number);
    return formattedNumber;
  }

  formatCurrency(number, currency = 'USD') {
    const formatter = new Intl.NumberFormat(undefined, {
      style: 'currency',
      currency: currency,
    });
    const formattedCurrency = formatter.format(number);
    return formattedCurrency;
  }

  formatUnit(number, unit = 'kilometer-per-hour') {
    const formatter = new Intl.NumberFormat(undefined, {
      style: 'unit',
      unit: unit,
    });
    const formattedUnit = formatter.format(number);
    return formattedUnit;
  }

  formatConList(arr) {
    const formatter = new Intl.ListFormat(undefined, {
      style: 'long',
      type: 'conjunction',
    });
    const formattedList = formatter.format(arr);
    return formattedList;
  }

  formatDisList(arr) {
    const formatter = new Intl.ListFormat(undefined, {
      style: 'long',
      type: 'disjunction',
    });
    const formattedList = formatter.format(arr);
    return formattedList;
  }
  formatNarrowList(arr) {
    const formatter = new Intl.ListFormat(undefined, {
      style: 'narrow',
      type: 'unit',
    });
    const formattedList = formatter.format(arr);
    return formattedList;
  }
}

// how to use the class IntlFormatter
const formatter = new IntlFormatter();
const number = 123456.789;
const speedPerHour = 60;
const date = new Date(Date.now());
const vehicles = ['Motorcycle', 'Bus', 'Car'];
console.log(formatter.formatDateTime(date));
console.log(formatter.formatNumber(number));
console.log(formatter.formatCurrency(number, 'CHF'));
console.log(formatter.formatUnit(speedPerHour));
console.log(formatter.formatConList(vehicles));
console.log(formatter.formatDisList(vehicles));
console.log(formatter.formatNarrowList(vehicles));
5

Hello again.

Yes, this is quite useful indeed. Thank you for sharing this international formatter class. I can already envision this coming in handy.

cheers! :beers: