Date Control Format

Discussions about Forms Designer for SharePoint 2013 / 2016 and Office 365.
Locked
CW
Posts: 5
Joined: Fri Dec 14, 2018

01 Jan 2019

Hello. Pardon my naivety, I'm not very fluent in JS AT ALL. I've done a couple of alerts in my time but......... :oops:

From the attached image you can see I have a couple of date fields; date from date to. All I want is to display dates as "Tuesday, January 1, 2019" or even "2019-01-01" instead of the default date picker, which to me is not very intuitive.

I see the Javascript for my field being "

Code: Select all

fd.field(fieldName).control()._el().append("<p>Custom rendering</p>");
" but can't change it.

Would I just add

Code: Select all

fd.field(fieldName).control()._el().append("<p>yyyy/mm/dd</p>"
in the Javascript popup window? :?
Attachments
FD-DateFormat.png
FD-DateFormat.png (101.01 KiB) Viewed 2441 times

User avatar
AlexZver
Posts: 232
Joined: Mon Aug 27, 2018

04 Jan 2019

Hi!

We are working on your issue and soon will give you an answer.

User avatar
AlexZver
Posts: 232
Joined: Mon Aug 27, 2018

10 Jan 2019

Hi!

I'm sorry for a late reply. In fact, you do not need to use custom rendering, just format the output date.

There is a ready-made solution for your case. Try Moment.js.

To launch it on Sharepoint you should download two .js files from the site and upload them in the document library (Site Assets, for example).

A code will be like this:

Code: Select all

window.define = null;
$.getScript("/sites/YourSiteName/SiteAssets/moment-with-locales.min.js")
    .then(function () { return $.getScript("/sites/YourSiteName/SiteAssets/moment-with-locales.min.js") })
    .then(function () {
        
        function setDate() {
            window.date = fd.field("Date").control('getDate');
            var newFormatDate = moment(date).format('dddd, MMMM Do, YYYY');
            fd.field("Date").value(newFormatDate);
        }

        setDate();

        fd.field('Date').change(setDate);

        fd.onsubmit(function () {
            fd.field('Date').value(date);
            return true;
        });

    })
Please do not forget to specify a correct URLs for Moment.js files and replace 'Date' with the internal name of your date field.

Locked
  • Information
  • Who is online

    Users browsing this forum: No registered users and 10 guests