Date converter snippet

By email (thanks, Steve!)

Could you consider a tool to put a date into a specified format … so that, for example, selecting text such as "January 29, 2024” could be transformed to an international day-month-year format, such as “29 January 2024” or “29 Jan 2024” or “29.01.2024”, etc. You’d have to allow for a slew of possible input formats but fewer, I think, output formats.

Here is a snippet for this:

// #popclip
// name: DateFormatConverter
// icon: 📅
// description: Convert dates to a specified format.
// language: javascript

// Example function to convert date to the desired format
function convertDateToFormat(inputText) {
  // Attempt to parse the date using built-in Date parsing
  const parsedDate = new Date(inputText);

  // Check if the date is valid
  if (!isNaN(parsedDate)) {
    // Define the output formats
    const options1 = { day: '2-digit', month: 'long', year: 'numeric' }; // "29 January 2024"
    const options2 = { day: '2-digit', month: 'short', year: 'numeric' }; // "29 Jan 2024"
    const options3 = { day: '2-digit', month: '2-digit', year: 'numeric' }; // "29.01.2024"

    // Choose the desired output format here by uncommenting one of the lines below
    const outputFormat = new Intl.DateTimeFormat('en-GB', options1).format(parsedDate); // for "29 January 2024"
    //const outputFormat = new Intl.DateTimeFormat('en-GB', options2).format(parsedDate); // for "29 Jan 2024"
    //const outputFormat = new Intl.DateTimeFormat('en-GB', options3).format(parsedDate).replace(/\//g, '.'); // for "29.01.2024"

    return outputFormat;
  } else {
    // If the date is not valid, return the input text
    return "Invalid date format";
  }
}

// Main PopClip action
popclip.pasteText(convertDateToFormat(popclip.input.text));

(The above block is an extension snippet — select it then click “Install Extension” in PopClip.)

1 Like

This is very useful, but I’d like a way to toggle two things:

  1. Source: Choose whether date is either (a) current (system) date or (b) selected text
  2. Format: Choose either (a) options2 (month as 3-character abbreviation) or (b) options3 (month as two digits)

Obviously I could hard code four separate extensions.

But is there a way to write a single extension so that these Source and Format selections are made interactively as the extension runs?

I modified your example into a snippet (below) that toggles between using the current date vs selected text based on whether the selected text is only whitespace.

Unfortunately, PopClip doesn’t activate if only whitespace is selected. Is there away to activate my snippet with a selection of whitespace? Alternatively, do you have a better idea for signaling to simply insert the current date?

Thank you.

// #popclip
// name: YYYY-MM-DD
// icon: symbol:calendar
// description: Convert date to YYYY-MM-DD.
// language: javascript

function convertDateFormat(inputText) {
	// function to convert format of date passed as inputText
	//
	// 
	var inputDate; // Date to convert to string formatted as YYY-MM-DD
	// Check if inputText might be a date
	if( inputText.trim().length === 0 ) {
		// inputText is empty or all whitespace so format today's date
		inputDate = new Date();
	}
	else {
	 // Attempt to parse inputText into a date
	 inputDate = new Date(inputText);
	}
	// Check if the inputDate is valid
	if (isNaN(inputDate)) {
		// Date is not valid, return the input text
		return "'" + inputText + "' is not a valid date format";
	} 
	else {
	// Define the output format options
	const option1 = { day: '2-digit', month: 'long', year: 'numeric' }; // "29 January 2024"
	const option2 = { day: '2-digit', month: 'short', year: 'numeric' }; // "29 Jan 2024"
	const option3 = { day: '2-digit', month: '2-digit', year: 'numeric' }; // "29 01 2024"
	// Choose the desired output format here by uncommenting only one of the lines below
	// const outputFormat = new Intl.DateTimeFormat('en-GB', option1).format( inputDate); // for "29 January 2024"
	// const outputFormat = new Intl.DateTimeFormat('en-GB', option2).format( inputDate).replace(/\//g, '-'); // for "29-Jan-2024"
	// const outputFormat = new Intl.DateTimeFormat('en-GB', option3).format( inputDate).replace(/\//g, '-'); // for "29-01-2024"
	const outputFormat = inputDate.toISOString().split('T')[0]; // for "2024-01-29"
	return outputFormat;	
	}
}
// Main PopClip action
popclip.pasteText(convertDateFormat(popclip.input.text));

PopClip won’t activate on a whitespace-only selection. However it will activate on an empty selection, by long pressing the mouse button (hold for 0.5 seconds). Alternatiely, Shift-click. Or use the PopClip keyboard shortcut to make it appear. Double-click will work in some text areas too.

In the extension config you’ll need to set requirements: [] to tell PopClip to show the extension’s actions when there is no selected text.

example

// #popclip - appear with "Paste" only (no selected text needed)
// name: paster
// requirements: []
// language: javascript
popclip.pasteText(`input text is '${popclip.input.text}'`)

CleanShot 2024-04-11 at 08.26.48

1 Like

One way to do this is to have more than one action in the extension. This can be done by making the extension module-based and exporting more than one action. See example below.

Another way is to react to a modifier key – Option is the bets choice – by checking popclip.modifiers.option.

I’ll write up an example with everything in.

// #popclip
// name: DateFormatConverter
// icon: 📅
// description: Convert dates to a specified format.
// requirements: []
// language: javascript
// module: true

const dateOptions1 = { day: '2-digit', month: 'short', year: 'numeric' }; // "29 Jan 2024"
const dateOptions2 = { day: '2-digit', month: '2-digit', year: 'numeric' }; // "29/01/2024"

// Example function to convert date to the desired format
function convertDateToFormat(inputText, dateOptions) {
  // Attempt to parse the date using built-in Date parsing.
  // If no input text, use current date.
  const parsedDate = inputText.length > 0 ? new Date(inputText) : new Date();

  // Check if the date is valid
  if (!isNaN(parsedDate)) {
    return Intl.DateTimeFormat('en-GB', dateOptions).format(parsedDate);    
  } else {
    return "Invalid date format";
  }
}

// an action for each format
exports.actions = [{
  title: "DateFormat1",
  icon: "d1", // unimaginative icon for now
  code: () => popclip.pasteText(convertDateToFormat(popclip.input.text, dateOptions1))
},{
  title: "DateFormat2",
  icon: "d2",
  code: () => popclip.pasteText(convertDateToFormat(popclip.input.text, dateOptions2))
}];

Alternative using Option key to differentiate:

// ... rest as above

// choose format based on presence of option modifier.
// here we don't need to wrap the code in an object with title and icon,
// since we only have one action so we are happy to just inherit
// the extension's name and icon. (this is basically what happens under
// the hood when using a simple javascript action without `module: true`)
exports.action = () => {
  popclip.pasteText(convertDateToFormat(
    popclip.input.text,
    popclip.modifiers.option ? dateOptions2 : dateOptions1
  ));
}
1 Like

@nick

I combined your two comments for:

  1. Activate PopClip with no selection, and
  2. Multiple Actions. (I embellished your simple conditional statement by cribbing the examples in the developer documentation for Module-based extensions.)

My resulting Snippet (below) seems to work well. I’m very pleased with its coding structure because it can be easily extended to support more output formats simply by adding one of the following for each additional format:

  1. DateFormat,
  2. switch case, and
  3. exports.options item.

I struggled mightily to create icons that communicated the idea of formatting a date as either ISO (YYYY-MM-DD) or Short Month (DD-MMM-YYYY). Ideally, my icons would have consisted of two parts, an icon for a calendar followed by a modifier that conveyed the format. Ultimately, I settled on just the format because I couldn’t figure out how to combine an icon such as symbol:calendar with text representing the format.

However, I’m pleased to learn that mousing over an icon reveals the title, as you can see in this screenshot:

Please let me know if you have a better idea for either icon.

Thank you.

-nello

// #popclip
// name: Reformat Date
// icon: symbol:calendar
// description: Convert date to either DD-MMM-YYYY or YYYY-MM-DD.
// requirements: []
// language: javascript
// module: true
//
// Define the output format options
const DateFormat1 = { day: '2-digit', month: 'long', year: 'numeric' };    // "29 January 2024"
const DateFormat2 = { day: '2-digit', month: 'short', year: 'numeric' };   // "29 Jan 2024"
const DateFormat3 = { day: '2-digit', month: '2-digit', year: 'numeric' }; // "29/01/2024"
// 
var strTemp
//
function convertDateFormat( inputText, dateOption ) {
  // function to convert format of date passed as inputText
  //
  // If inputText is all whitespace then use today's date instead
  const inputDate = inputText.trim().length > 0 ? new Date( inputText.trim() ) : new Date();
  // Check if the inputDate is valid
  if ( isNaN( inputDate ) ) {
    // Date is not valid, return the input text
    return "'" + inputText + "' is not a valid date format";
  } 
  else {
    switch( dateOption ) {
      case DateFormat1:
        // 29 January 2024
        return Intl.DateTimeFormat( 'en-GB', DateFormat1 ).format( inputDate );  // "29 January 2024"
        break;
      case DateFormat2:
        // 29-Jan-2024
        return Intl.DateTimeFormat( 'en-GB', DateFormat2 ).format( inputDate ).replace(/\s+/g, '-');;  // "29-Jan-2024"
        break;
      case DateFormat3:
        // 2024-01-29
        strTemp = Intl.DateTimeFormat( 'en-GB', DateFormat3 ).format( inputDate );  // "29/01/2024"
        strTemp = strTemp.split("/")
        return strTemp[2] + "-" + strTemp[1] + "-" + strTemp[0];                    // "2024-01-29"
        break;
    }
  }
}
// An action for each format
exports.actions = [{
  title: "DD-MMM-YYYY",
  icon: "monospaced square filled MMM",
  code: () => {
    popclip.pasteText( convertDateFormat( popclip.input.text, DateFormat2 ) );  // "29-Jan-2024"
  }
},{
  title: "YYYY-MM-DD",
  icon: "monospaced square filled ISO",
  code: () => {
    popclip.pasteText( convertDateFormat( popclip.input.text, DateFormat3 ) );  "2024-01-29"
  }
}];

Nice job! Love to usee user success. Icons look great to me, the main thing is that they convey recognisable meaning. It’s not possible to combine text and and image in the same icon, though I can imagine that might be a useful option.

1 Like