Develop Reference

jquery datepicker should not automatically change time value on update minDate or maxDate

I use the jquery datepicker in an Angular Application and I noticed a behavior that I would like to prevent.
The application consists of an input field for the date and a select box for a month selection.
If the months in the select box are changed, the minDate of the jquery date picker should be adjusted.
I tried the following example:
I set the date in the input field to the 24.04.2018
I chose October
The date of the input field is automatically set to 24.10.2018
I do not want the content of the Inputs field to be automatically adjusted.
Here is my git-hub project: https://github.com/annalen/jquery-datepicker
Many thanks for the help
Solution
I use the beforeShow and onClose date-picker functions
jQuery(yourElement).datepicker('option', 'beforeShow', function (date) {
return {
'minDate': yourMinDate,
'maxDate': yourMaxDate
};
});
jQuery(yourElement).datepicker('option', 'onClose', function (date) {
jQuery(this).datepicker('option', {
'minDate': null,
'maxDate': null
});
});

The datepicker updates the date only if the selected one is out of the range.
For example, if the current selected date is 24.04.2018 and you set the minDate to 20.04.2018, nothing will happen.
But if you set it to any date after 24.04.2018, it will get updated. I believe it's normal since its the purpose of setting a minDate.
You can always set yourself manually the input's value: $('#datepicker').val('20.04.2018') but I don't think it's a good idea to have something displayed different than the internal datepicker component state (the calendar that will popup will show a different date than the one in the input)
Regards,
Vincent

jquery datepicker defaultdate will not automatically set to next available date when graphical calendar is persistent on a page

The jquery datepicker defaultdate will not automatically set to next available date when the graphical calendar is persistent on a page. the initial date the calendar selects can be a date that i have disabled. Many suggestions on workaround work when the calendar is a popup to an input field, but do not work when the calendar is persistently shown as a div. doesn't matter if the dates disabled are by noWeekends, by the day of week, or individually set days, the initial date value can be a disabled and unclickable date. I am using the alternate1 input field (which i normally hide) to pass data onto a PHP page. What i have almost works, but the next available date shows as highlighted when minDate happens to land on an available date, but when minDate lands on an unselectible date, the highlight is hidden. The temporary fix i used of setDate null - clears the initial selection value regardless of the highlight, so a visitor may think the a date is already selected when it is not. My PHP page reports back to the visitor that they have to go back and actually select a date. My use of datepicker is geared toward mobile, so popup or flyout calendar to make use of well known workarounds is unfavorable, the calendar GUI needs to be persistent on the page. To recreate my issue for yourself, on the jsfiddle, comment out the last javascript line, disallow a date mid-week in the var selections, and then set the minDate so that it will land on the disallowed date. you'll notice the alternate1 input gets prefilled with the disallowed date.
html code:
<div id="dp1"></div>
<input type="text" id="alternate1" name="alternate1"/> <!-- style="display:none;" this is the field that passes on to php -->
javascript code:
var selections = [
"2017-07-29",
"2017-07-30",
"2017-08-05",
"2017-08-06",
"2017-08-12",
"2017-08-13",
"2017-08-19",
"2017-08-20",
"2017-08-26",
"2017-08-27",
"2017-09-02",
"2017-09-03",
"2017-09-04",
"2017-09-09",
"2017-09-10",
"2017-09-16",
"2017-09-17",
"2017-09-23",
"2017-09-24",
"2017-09-30",
"2017-10-01",
"2017-10-07",
"2017-10-08",
"2017-10-09",
"2017-10-14",
]
function bansingle(date) {
var excerpt = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ selections.indexOf(excerpt) == -1 ]
}
// somehow combine this function later.
//function bandow(date) {
// var day = date.getDay();
// return [(day != 0 && day != 6)];
// }
$('#dp1').datepicker({
beforeShowDay: bansingle,
altField:'#alternate1',
altFormat: 'm-d-yy',
fielddateFormat: 'm-d-yy',
minDate: "+0d",
//maxDate: "+1m", // set latest selectable date
});
$('#dp1').datepicker("setDate", null); //clears alternate1 input field value
Here is the jsfiddle it does contain more dates and a little CSS. I recommend opening it in a new tab, to be able to return to this page after editing code.

the progress of my other question here has negated the need for an answer to this question. pursuing multiple changes to input, styling, and options - will workaround this question's problem.

jQuery - Validate date on datetime picker click on SharePoint

I have developed a custom Web Part on SharePoint 2013.
I'm using the default date picker control. I also have an array with all the holidays in Italy, and I would like to "validate" the selected date just after the user clicks on the datetimepicker. Validate in my case should be print an alert message if the selected date is a holiday.
I've tried this code, but it is not firing:
$(".ms-picker-table a").on("click",function() {
console.log("ON CLICK DATEPICKER");
/* DATES CHECK */
[...]
});
ms-picker-table is the class of the date picker control.
a elements inside this table already contain code in href attribute:
javascript:ClickDay('01\u002f06\u002f2017')
I don't know if it can create problems.
Also parent td element of each link has this code:
onclick="javascript:ClickDay('01\u002f06\u002f2017')"
So is there a way to correct my code to check dates when a user select a value from datepicker?

onBlur event should do the job
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="dateField">
<script>
$("input[id*='dateField']").blur(function(){
var dateValue=$("input[id='dateField']").val();
console.log(dateValue);
// check array to see if the date is in the Array
});
</script>

jQuery datepicker does not update value properly

On the website I'm currently working I have a form to add a event. This event needs a date which the user selects using a jQuery datepicker. A date can only have one event. So I want to check the date the user insert in the datepicker. I tried doing this by getting the value after the user has selected the date. The problem is however, the datepickers doesn't update his value right away.
I made a JSFiddle to show the problem. When you pick a date the span updates and shows the value of the datepicker. But as you can see the first time it is blank, and the second time it shows the previous selected date. So the datepickers does not update is value right away. How can I fix this?
I looked trough other similar questions here on stackoverflow but their solutions didn't work for me.
JSFiddle: http://jsfiddle.net/kmsfpgdk/
HTML:
<input type="text" id="datepicker" name="date" />
<span id="data"></span>
JS:
$('#datepicker').datepicker();
$('#datepicker').blur(function () {
var val = $(this).val();
$('#data').text(val);
});

Its better to use built in method onSelect:fn to use:
$('#datepicker').datepicker({
onSelect: function () {
$('#data').text(this.value);
}
});
Fiddle
As per documentation:
onSelect
Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.

change event happens before blur event.
Use .change() instead of .blur()
$('#datepicker').change(function() {
var val = $(this).val();
$('#data').text(val);
});
Updated jsFiddle Demo

If Google brought you here because your input does not seem to respond to various JQuery .on( events, most likely it's because you have another element on the same page with the same id.

prevent mobile default keyboard when focusing an <input> from showing

this is how i'm trying
<script type="text/javascript">
$(document).ready(function(){
$('#dateIn,#dateOut').click(function(e){
e.preventDefault();
});
});
</script>
but the input stills 'launching' iphone's keyboard
ps: i want to do this because i'm using datepicker plugin for date

By adding the attribute readonly (or readonly="readonly") to the input field you should prevent anyone typing anything in it, but still be able to launch a click event on it.
This is also usefull in non-mobile devices as you use a date/time picker

inputmode attribute
<input inputmode='none'>
The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. It can have the following values:
none -
No virtual keyboard. For when the page implements its own keyboard input control.
I am using this successfully (Tested on Chrome/Android)
CSS-Tricks: Everything You Ever Wanted to Know About inputmode

You can add a callback function to your DatePicker to tell it to blur the input field before showing the DatePicker.
$('.selector').datepicker({
beforeShow: function(){$('input').blur();}
});
Note: The iOS keyboard will appear for a fraction of a second and then hide.

Below code works for me:
<input id="myDatePicker" class="readonlyjm"/>
$('#myDatePicker').datepicker({
/* options */
});
$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});

I asked a similar question here and got a fantastic answer - use the iPhone native datepicker - it's great.
How to turn off iPhone keypad for a specified input field on web page
Synopsis / pseudo-code:
if small screen mobile device
set field type to "date" - e.g. document.getElementById('my_field').type = "date";
// input fields of type "date" invoke the iPhone datepicker.
else
init datepicker - e.g. $("#my_field").datepicker();
The reason for dynamically setting the field type to "date" is that Opera will pop up its own native datepicker otherwise, and I'm assuming you want to show the datepicker consistently on desktop browsers.

Since I can't comment on the top comment, I'm forced to submit an "answer."
The problem with the selected answer is that setting the field to readonly takes the field out of the tab order on the iPhone. So if you like entering forms by hitting "next", you'll skip right over the field.

Best way to solve this as per my opinion is Using "ignoreReadonly".
First make the input field readonly then add ignoreReadonly:true.
This will make sure that even if the text field is readonly , popup will show.
$('#txtStartDate').datetimepicker({
locale: "da",
format: "DD/MM/YYYY",
ignoreReadonly: true
});
$('#txtEndDate').datetimepicker({
locale: "da",
useCurrent: false,
format: "DD/MM/YYYY",
ignoreReadonly: true
});
});

So here is my solution (similar to John Vance's answer):
First go here and get a function to detect mobile browsers.
http://detectmobilebrowsers.com/
They have a lot of different ways to detect if you are on mobile, so find one that works with what you are using.
Your HTML page (pseudo code):
If Mobile Then
<input id="selling-date" type="date" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
else
<input id="selling-date" type="text" class="date-picker" readonly="readonly" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
JQuery:
$( ".date-picker" ).each(function() {
var min = $( this ).attr("min");
var max = $( this ).attr("max");
$( this ).datepicker({
dateFormat: "yy-mm-dd",
minDate: min,
maxDate: max
});
});
This way you can still use native date selectors in mobile while still setting the min and max dates either way.
The field for non mobile should be read only because if a mobile browser like chrome for ios "requests desktop version" then they can get around the mobile check and you still want to prevent the keyboard from showing up.
However if the field is read only it could look to a user like they cant change the field. You could fix this by changing the CSS to make it look like it isn't read only (ie change border-color to black) but unless you are changing the CSS for all input tags you will find it hard to keep the look consistent across browsers.
To get arround that I just add a calendar image button to the date picker. Just change your JQuery code a bit:
$( ".date-picker" ).each(function() {
var min = $( this ).attr("min");
var max = $( this ).attr("max");
$( this ).datepicker({
dateFormat: "yy-mm-dd",
minDate: min,
maxDate: max,
showOn: "both",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date"
});
});
Note: you will have to find a suitable image.

I have a little generic "no keyboard" script - works for me with Android and iPhone:
$('.readonlyJim').on('focus', function () {
$(this).trigger('blur')
})
Simply attach add class readonlyJim to the input tag and voila.
(*Sorry too much StarTrek here)