nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Help with formatting labels on Time Slider?

NMWater

Hi all,

I was wondering if anyone knows how to format the date in the "daterange" of the Time Slider. I want it to state:

Month Year". My input data was formatted using YYYYMM. Currently, I just get years.

Thanks for all your help!

Find more posts tagged with

Accepted answers

TomSellsted

NM Water,

I use the dojo/date/locale module. That allows you to format the date the way you would like. here is an example:

                //add labels for every other time stop
                var labels = arrayUtil.map(timeSlider.timeStops, function(timeStop, i) {
                    if (i % 2 === 0) {
                        return locale.format(timeStop, {
                            datePattern: 'MMYY',
                            selector: 'date'
                        });
                    } else {
                        return "";
                    }
                });

Regards,

Tom

All comments

TomSellsted

Francisco,

I have not seen that problem before. I see that you are expressly setting your timeExtent too. Which version of the the JSAPI are you using?

Regards,

Tom

NMWater

Thanks Tom! This fixed the issue.

However, I have another one now:

My date range in my rest services indicate:

[1984/01/01 00:00:00 UTC, 2013/01/01 00:00:00 UTC]

However on my slider the first date being displayed is December of 1983 and the last date is November 2013. it's shifting the time intervals by one month. Have you ever encountered this before?

Best,

Francisco

TomSellsted

NM Water,

I use the dojo/date/locale module. That allows you to format the date the way you would like. here is an example:

                //add labels for every other time stop
                var labels = arrayUtil.map(timeSlider.timeStops, function(timeStop, i) {
                    if (i % 2 === 0) {
                        return locale.format(timeStop, {
                            datePattern: 'MMYY',
                            selector: 'date'
                        });
                    } else {
                        return "";
                    }
                });

Regards,

Tom

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.