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.)
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}'`)
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
));
}
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:
DateFormat,
switch case, and
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:
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.
I can post in more detail later but you want to look into the Options section.
Define a boolean option with identifier e.g. style1, style2 for each action and then in the action set a requirements array e.g. ["option-style1=1"] on the corresponding action.
I looked at the Options section but can’t quite understand exactly how to create the options because there is neither an example of an options array in general nor one for exported actions in particular.
