Only the datepicker?

[mfs-bldmghty]

Hello. I discovered this repo yesterday and "manually" pulled out the date picker (and the 4x.js). But is there a way to only get those and only those? I haven't looked but how much of the 4x is necessary for the date picker? Obviously, less payload is better :) Not that big of a deal but I wanted to ask.

Two additional bits of feedback that are unique to the project we're using the datepicker for, but worth mentioning since I'm here.

• We're using it for a scheduling application. That is, some days within a range are pickable, some are not. I found the disable method but there was no date-specific un-disable. That is, it would easier to disable a range (min to max) and then un-disable any days that are pickable. As it is, and maybe I got it wrong, I hard to create dates data from min to mix, loop over that, check against my pitchable dates, skip those, and otherwise disable. Felt like a lot of work for something so simple.

• As for the render() method. It would - again, in our case - be helpful to have a setting that opened the calendar and kept it open. Maybe that does exist, but I haven't seen it yet. Forgive me for asking if it's already there.

  Otherwise, so far so good. Thanks for sharing all this.

[accdc]

Hi, thanks for writing.

All of the module files pull from the core functionality within 4X, so you won't be able to use the module file alone without it. You can use a standard script tag to load both though, instead of using the $A.import() function for this like so:

    <script  src="4X/4X.js"></script>
    <script  src="4X/Standard/Modules/Datepicker.js"></script>

About the other questions for setting disabled dates and manual rendering, yes you should be able to do this with no problem. Both start with getting a reference to the Datepicker object that is returned from the $A.setDatepicker() function.

E.G.

var dc = $A.setDatepicker({
// Configuration key / value map
});

Afterwhich you can use any of the following methods to disable various dates.

dc.setDayDisabled(dc, dateObj, isDisabled)

dc.setMonthDisabled(dc, dateObj, isDisabled)

dc.setDayOfWeekDisabled(dc, dateObj, daysOfWeekArray, isDisabled)

dc.setWeekdaysDisabled(dc, dateObj, isDisabled)

dc.setWeekendsDisabled(dc, dateObj, isDisabled)

dc.clearAllDisabled(dc)

For example, you could create a for loop to go through your date range, and then use the dc.setDayDisabled() method to choose which dates are meant to be disabled within that range.

The isDisabled param is meant to set the disabled state for that date using a boolean, so you could use the same method call to set that date one way or the other as you wish.

for (var i = 0; i < dates.length; i++) {
dc.setDayDisabled(dc, dates[i], isMeantToBeDisabled ? true : false);
}

For manual rendering, yes this is simple to do. You should be able to open it using the render() method. :)

dc.render();

// Or

dc.render(function() {
// Do something after the calendar finishes rendering...
});

// And to manually close it...

dc.remove();

// Or

dc.remove(function() {
// Do something after the calendar finishes closing...
});

Does this help?

[mfs-bldmghty]

Hey @accdc - Wow! Thanks so much for the quick reply. I'm actually off for the holiday and will look at this in detail next week but...

if the *Disabled() methods are more like a toggle then that should be a big help. Thanks.

I'll look at the render() bit but I trust you know what you're doing. Thanks 2x

And again, thank you for sharing ALL this. TBH I don't know much about accessibility but I do know it matters. Finding the correct tools (e.g., this date picker) is a big help. Cheers.

[mfs-bldmghty]

Oops. One more thing. Is it possible to get the input and button wrapped in a div and not be siblings to the calendar? More or less for styling purposes. NBD but I wanted to ask.

[accdc]

Thanks, no problem. :)

Yes, of course, you can set the rendering DOM location wherever you wish.

Within the setup declaration, simply add the following properties.

var dc = $A.setDatepicker({
// Configuration key / value map
root: "body", // CSS selector or DOM node.
append: true // Rendering behavior.
});

You can read about these various properties amongst others within the help folder: Help/DC API/DC Object Configuration/Rendering

I'll close this issue for now, but please continue the dialog if you need help with anything else.