After typing date in datepicker input we can see that date in calendar, but after we type that date and it shows in calendar, we select it from calendar but it deletes from input. I guess it is problem with same dates, so if you type some date and then select that same date from calendar it somehow repeal. Someone knows how to solve this problem? We need this date even if it is the same one from typing.
file.html
<dp-date-picker
id="search_dateFrom"
class="dp-date-picker"
theme="dp-material"
mode="day"
placeholder="DD.MM.GGGG."
[config]="this.config"
[(ngModel)]="datesArray['dateFrom']"
(onSelect)="checkValue($event)"
(ngModelChange)="onChangeSearch2($event)"
>
</dp-date-picker>
file.ts
onChangeSearch2(event)
{
console.log('event',event);
}
checkValue(event){
if (event.type == 'selection')
if(event.date._i)
{
this.datesArray['dateFrom']=event.date._i;
}
}
Might as well post a proper answer.
According to the docs it seems to be the default behavior that dates can be both selected and unselected. Fortunately, there is a property called unSelectOnClick which if set to false, prevents the user from unselecting dates.
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
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.
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>
I am using code snippet plugin in wordpress and I just disabled the previous dates in calendar on registration form.
Check pick up date on this form.
http://bdsbarcelona.com/request-service-form/
I have used following code to disable previous dates, now I want disable selected holidays from calendar. for example I am goind on holidays for 9 days so I want that 9 dates to be disabled in calendar.
add_action('frm_date_field_js', 'limit_my_date_field');
function limit_my_date_field($field_id){
if($field_id == 'field_3jztsi'){ //change FIELDKEY to the key of your date field
echo ',minDate:0,maxDate:+365';
}
if($field_id == 'field_3jztsi2'){ //change FIELDKEY to the key of your date field
echo ',minDate:0,maxDate:+365';
}
}