In Suitelet, when designing a page that includes a date field, you may encounter a situation where the date field displays differently depending on whether you use an internal or external link. When using an internal link, the date field may display correctly with a calendar symbol. However, when using an external link, the date field may be displayed with a “Pick” date format instead of the calendar symbol.
To change the “Pick” option to a calendar format, you can insert a calendar image in place of the “Pick” option.
This can help improve the user experience and make the date field more intuitive to use.
/**
* @NApiVersion 2.1
* @NScriptType Suitelet
* REVISION HISTORY
*@version 1.0: MYNE-48: Script used to display the open Purchase Orders
*/
define(['N/record', 'N/search', 'N/ui/serverWidget','N/url', 'N/https',],
/**
* @param{url} url
* @param{https} https
* @param{record} record
* @param{search} search
* @param{serverWidget} serverWidget
*/
(record, search, serverWidget,https,url) => {
/**
* Defines the Suitelet script trigger point.
* @param {Object} scriptContext
* @param {ServerRequest} scriptContext.request - Incoming request
* @param {ServerResponse} scriptContext.response - Suitelet response
* @since 2015.2
*/
const onRequest = (scriptContext) => {
try {
if (scriptContext.request.method == 'GET') {
let form = serverWidget.createForm({
title: 'test form',
hideNavBar: true
});
form.clientScriptFileId =15187
form.addField({
id: 'custpage_date_field',
label: 'Date Field',
type: serverWidget.FieldType.DATE
});
scriptContext.response.writePage(form);
}
} catch (e) {
log.debug("Error@Onrequest", e.message)
}
}
return { onRequest }
});
/**
* @NApiVersion 2.x
* @NScriptType ClientScript
*/
define(['N/url'],
/**
* @param{url} url
*/
function( url) {
function pageInit(scriptContext) {
form = scriptContext.form;
jQuery("#custpage_date_field" + "_helper_calendar").css({
"background-size": "cover",
"background-image": "url(https://6714807-sb1.app.netsuite.com/core/media/media.nl?id=15199&c=6714807_SB1&h=pEjONonRxhElmqIb74FfzlTkYkkXPtzpie9_e5XUUx32jVx0)",
"width": "40px",
"height": "40px",
"display": "inline-block"
});
jQuery("#custpage_date_field" + "_helper_calendar").text("");
setTimeout(function(){
document.location = url.resolveScript({
scriptId: 'customscriptjj_sl_myne455',
deploymentId: 'customdeployjj_sl_myne_455',
});
}, 15000); // Delay in milliseconds (e.g., 500ms)
}
return {
pageInit: pageInit,
};
});