Inspiring

Answered

jQuery UI Datepicker and jQuery versions

Forum|Forum|4 years ago
March 22, 2021
3 replies
8170 views

Hi. If I use this datepicker is because I don’t find any other better option. DW gives it to me simply. I am a little worried about the versions of the jquery and jquery-ui files. I am using DW CC 2021, however, I don’t understand why the updatings didn’t consider at least any 3.x.x version of jquery, at least. (The current version is 3.6.0).

The included version is jquery 1.11.1 released on 2014. Of course, I can download the last version or call it through a CDN, like I do within the Bootstrap, but this kind of negligence or discare of not updating the libraries properly, desestabilizes me, and we talk a about a big and prestigious company like Adobe. This just confuses me, surprises me.

Well, I dragged the datepicker and also the related files, necessary, installed locally within the DW, as follows:

/jQueryAssets/jquery.ui.core.min.css"
/jQueryAssets/jquery.ui.theme.min.css"
/jQueryAssets/jquery.ui.datepicker.min.css"
<!--And also the JS files-->
/js/jquery-3.5.1.min.js" <!--replacing to the 1.11.1 version and works.-->
/jQueryAssets/jquery.ui-1.10.4.datepicker.min.js"

As you can see, as example, the jquery.ui is version 1.10.4, when the current version is 1.12.1 dated from 2016. The min.css files dated from 2014 and the version is 1.10.4. Actually, I downloaded locally also the jquery-ui.css version 1.12.1 (not included in DW), but it has lots lots of classes which I don’t really need.

I TRIED to find the same files on the jquery and jquery-ui websites, but a recent version of them, somthing like 1.12 but I didn’t find them. Not even the same version included in the DW. Are they files created by DW?

But I will use it because the datepicker is working. Any reflections, please. Thanks for your patience.

This topic has been closed for replies.

Correct answer BenPleysier

Try

<input id="text1" name="text1" type="date">

and Javascript

<script>
    function formatISOLocal(d) {
    let z = n => ('0' + n).slice(-2);
    return d.getFullYear() + '-' + z(d.getMonth()+1) + '-' + z(d.getDate());
    }

    window.onload = function() {
    let inp = document.querySelector('#text1');
    let d = new Date();
    d.setDate(d.getDate() + 2);
    inp.min = formatISOLocal(d);
    inp.defaultValue = inp.min;
    d.setMonth(d.getMonth() + 3);
    inp.max = formatISOLocal(d);
    }
</script>

BenPleysierCorrect answer

Adobe Expert

Try

<input id="text1" name="text1" type="date">

and Javascript

<script>
    function formatISOLocal(d) {
    let z = n => ('0' + n).slice(-2);
    return d.getFullYear() + '-' + z(d.getMonth()+1) + '-' + z(d.getDate());
    }

    window.onload = function() {
    let inp = document.querySelector('#text1');
    let d = new Date();
    d.setDate(d.getDate() + 2);
    inp.min = formatISOLocal(d);
    inp.defaultValue = inp.min;
    d.setMonth(d.getMonth() + 3);
    inp.max = formatISOLocal(d);
    }
</script>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

limakid2015Author

Inspiring

Thanks a lot, BEN! It’s exactly what I was trying to achieve. On my own I am going to play around with those values like (slice -2) or +2, +3. I wanna see what changes are made if I change those values, so I learn on the go. That widget-calendar is original from the HTML5, right? so you gave functionality to this.

Now, I’d like to know if is possible to give some styling to the widget (like we can do in jQuery), but if not possible, the functionality is already a lot. Roughly, I could think on CSS blendmodes, let‘s see if works.

Other thing I like is that is in spanish, so you think in the US computers the format will be changed to mm/dd/yyyy? Or you did in spanish on purpose? Thanks a lot again, you made my early morning.

BenPleysier

Adobe Expert

The language depends on the local setting. In my case I see the input in English.

For more info see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date or use Bing to search for the subject.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Nancy OShea

Adobe Expert

Hi @limakid2015,

I agree with @BenPleysier. That said, don't rely on Dreamweaver to get latest script updates for you. Get them yourself from the CDN.

https://code.jquery.com/

Example:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

Nancy O'Shea— Product User, Community Expert & Moderator

limakid2015Author

Inspiring

Thanks Nancy. I guess that’s a better way, so I don’t worry about local files. However, the local CSS allows me to change the look of the calendar itself, color for weekends for example, background color, or I can create a theme overthere, on the jquery-ui site remotely, or I may just have the CSS locally so can navigate deeply in order to know which specific class is affecting a particular element of the calendar: icons, numbers, etc. Thanks again.

Nancy OShea

Adobe Expert

Or use one of the prebuilt jQuery UI themes below:

base black-tie blitzer cupertino dark-hive dot-luv eggplant excite-bike flick hot-sneaks humanity le-frog mint-choc overcast pepper-grinder redmond smoothness south-street start sunny swanky-purse trontastic ui-darkness ui-lightness vader

Nancy O'Shea— Product User, Community Expert & Moderator

BenPleysier

Adobe Expert

jQuery is on its way out. Try to use HTML and CSS where possible. If not possible, use pure Javascript.

In your case, try

<input id="text1" name="text1" type="date">

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

limakid2015Author

Inspiring

Thanks Ben. Pure javascript might be because HTML does nolt allow me to work dinamically with the calendar. I want my users to be able to selcet only from two days after the current day; jQuery has a script for that: "min: 2" (for “after tomorrow”) and "max: 3M" (3 months in the range). I was really unable to find other option to give me this. Of course I want to learn javascript. Also, I want to make a photo gallery lightbox without jQuery but it seems that I can not. Everywhere on the web is jQuery, jQuery, Now, they released two weeks ago their version 3.6.0, so... you think are they anachronyc or time wasters?

B i r n o u

Adobe Expert

https://jsfiddle.net/dae4y126/

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded