jQuery UI Datepicker and jQuery versions

[limakid2015]

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.

[BenPleysier]

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">

[limakid2015]

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]

https://jsfiddle.net/dae4y126/

[Nancy OShea]

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>

[limakid2015]

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]

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

[BenPleysier · Accepted solution]

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>

[limakid2015]

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]

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.

[limakid2015]

Hi Ben. I implemented the snippets above and it works perfectly in Firefox last version 87.0, because in this browser you can click on the label, on the input or anywhere inside this div element containing the date and the calendar pops up. Firefox does not show a calendar widget (icon) but it's easier to open show the calendar just clciking anywhere, as accessibility standards.

In Chrome, Opera and Edge, we have to click on the widget, which is shown, to show up the calendar and select dates. If I click in the input, in the label, the field just get :focussed but no calendar pops up. 
In Safari 14.03, no widget, no pops up for nothing, we have just to write the date in the input which shows the minimum date.

If it works perfectly fine in Firefox, why not with the other browsers? Maybe for this reason I was re-considering jQuery, but No. That means too much files, css, ui.css and stuffs. I like much better the code you gave me, but at the same time I look for UX facilities.

So, should I implement some code for browser compatibility? You know? I tried moving the '#text1' which is targeted to open the calendar, right? I tried to move it to a parent div which contains the label and the whole date input, but doesn’t work. 

Any ideas, suggestions? Sorry for being so peaky with the browser compatibility. Thanks a lot.

[BenPleysier]

Have a look at this article https://caniuse.com/input-datetime

The next version of Safari will accomodate input type date. Aside from that, users of Safari know that they are using an inferior browser as do users of IE. 

[Nancy OShea]

Welcome to browser variability.  Learn to live with it because variability never goes away entirely until all old browsers die off.   Refer to "Can I Use" below.

https://caniuse.com/?search=type%3D%22date%22