Develop Reference

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.

How to make the materialize date picker (in fact pickadate) editable?

I'm trying to make the materialize date picker editable. Here is the goal, the user can directly write the date in the input field or use the widget to pick a date.
I did something that is about to work on this jsfiddle. But there is a bug I'm trying to solve. When the user directly writes the date in the input, the picker needs to get the new value also (because I use a different format to submit the date and there is a an hidden input field to update). To accomplish that I tried to do
picker.set('select', $(this.val());
But it creates an infinite loop because the method set in materialize also triggers the event change on the input.
EDIT: oh i just found there is an issue open about that on github. Do you have any idea for a workaround?

Any specific reason you want to do it in the change method?
Why not something like this?
this.change(function(event) {
});
this.bind('blur keypress',function(e){
if (moment($(this).val(), "DD/MM/YYYY", true).isValid()) {
var inputFieldDate=getFmtDate($(this).val());
picker.set('select',inputFieldDate);
}
});
This is a utility function to parse the date in DD/MM/YYY format and get a javascript Date object
function getFmtDate(s){
var valx=new Array();
if(s!=null && s.length>0){
valx = s.split('/');
}
var d = new Date(valx[2],valx[1]-1,valx[0]);
return d;
}
This works for me.
Update:
Once you attach a widget to an html element, the usual event callback functions do not work the way you expect them to. Their functionality is overridden by the widget. You cannot use the functions the same way you are used to and have to find a workaround. In short you cannot use the change function to set or unset the date because set triggrers a change event.
In your case you want to address multiple issues which are very common problems. You should be able to get a lot of examples online to achieve each one of those. What I've done is just one way of doing it.
Populate the form in a non traditional way when the page loads.
Initialize various plugins with values from the form when the page loads
Initialize content from hidden fields when the form loads and update the hidden fields when submitting the form.
Fetch the values by name (of the hidden fields) and use them to initialize the widgets.
I've used blur keypress just to give you an idea that all your requirements can be handled without using change. You use the events that work for you. You can set the date by binding picker to calendar object with this keyword and access it from its instance as shown below.
(function($) {
$.fn.calendar = function(options) {
// Options du datepicker
var settings = $.extend({
editable: true,
format: 'dd/mm/yyyy',
formatSubmit: 'ddmmyyyy'
},
options
);
this.pickadate(settings);
//var picker = this.pickadate(''); will not work
this.picker = this.pickadate('picker');
this.change(function(event) {
});
this.bind('blur keypress',function(e){
if (moment($(this).val(), "DD/MM/YYYY", true).isValid()) {
var inputFieldDate=getFmtDate($(this).val());
picker.set('select',inputFieldDate);
}
});
var $triggerIcon = $('<div class="col s2 center-align"><a class="btn-floating btn-large waves-effect waves-light trigger-datepicker">Date</a></div>');
$triggerIcon.click(function(event) {
event.stopPropagation();
event.preventDefault();
picker.open();
});
this.parent().after($triggerIcon);
// Resolves picker opening for thing
this.next().unbind("focus.toOpen");
return this;
};
}(jQuery));
To set a date:
//This is how you set a date
var cal = $('.datepicker').calendar();
//You can access picker because we changed
//var picker to
//this.picker above in fn.calendar
cal.picker.set('select', getFmtDate($("[name=hiddenDate]").val()));
// The syntax is
//cal.picker.set('select', new Date());
$('#formulaireDate').validate();
You have to convert your date to Date(). The below function should give you an idea. You can also use plugins like jquery dateFormat plugin.
function getFmtDate(s){
var valx=new Array();
if(s!=null && s.length>0){
valx = s.split('/');
}
var d = new Date(valx[2],valx[1]-1,valx[0]);
return d;
}
This is your html.
<div class="row">
<div class="col s4">
<input type="text" class="datepicker" />
<input name="hiddenDate" type="hidden" value="12/12/2016">
</div>
</div>

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 deselect date (Bootstrap-datepicker sandbox)

I have a question about the bootstrap-datepicker.
When I select a random Date and then open the Popup again and click the same Date, the Input-Field clears. Is there any way to prevent this from happening?
I need this because in my case the Input-Field is not allowed to be empty.

I use Angular, and have a directive defined that inserts this little snip of hacky javascript... you might be able to do something similar:
.on('changeDate', function (ev) {
if (ev.dates && !ev.date && selectedDate)
{
// Fixes bug in bootstrap calendar without multiselect, where picking the same day unselects it
$(this).datepicker('setDate',selectedDate);
}
else if (ev.date && ev.date!=selectedDate) selectedDate = ev.date;
});
By having a variable named "selectedDate" somewhere before the constructor for your datepicker, this additional event handler will store valid dates and strip the bogus deselection. You'll notice the event object passed includes the array "dates" when incorrectly deselected, and only "date" when correctly selected.

bootstrap-datepicker.js and jquery.maskedinput.js don't play nice

I have to use bootstrap-datepicker.js for my project but it doesn't work well with mask.
problem 1:
It you you are tabbing through fields it will auto populate the date field with today's date. Ideally it won't populate it at all.
Problem 2:
It's difficult to blank-out a the date field once it's populated.
first name: <input type="text">
birthdate: <input type="text" class="date">
city: <input type="text">
js:
$(function() {
$(".date").mask("99/99/9999");
$('.date').datepicker({
format: 'mm/dd/yyyy'
});
});
The problem is all originates from the fact that mask is populating the field with example format characters( "_ _ / _ _ / _ _ _ _" ) during focus and when the focus leaves datepicker is attempting to parse the example characters BEFORE mask has a chance to remove them. datepicker can't parse these special characters into a date therefore it is selecting today's date.
I think that if I can figure out a way to remove the example characters before bootstrap-datepicker attempts to parse them my problem would be fixed.
I would provide a jsfiddler example but I can't figure out how to add bootstrap-datepicker.js and jquery.maskedinput.js on their site.
Thanks for your help.

I stumbles across this option:
$('.date').datepicker({
format: 'mm/dd/yyyy',
forceParse: false
});
Surprising that force parse is true by default. darn bootstrap. Problem fixed.

Late answer but this was the only one that worked for me after deconstructing the sequence of events handled by both plugins (as of this date).
var $date = $('.date');
$date.datepicker({
format: 'mm/dd/yyyy'
});
$date.mask("99/99/9999");
$date.on('keyup', function(){
if ($date.val() == '__/__/____'){
// this only happens when a key is released and no valid value is in the field. Eg. when tabbing into the field, we'll make sure the datepicker plugin does not get '__/__/____' as a date value
$date.val('');
}
});
Long Explanation
Turns out that the datepicker plugin calls an update function on keyup, which in this case is the keyup event triggered when you release the TAB key. This update function calls a DPGlobal.parseDate() function that roughly behaves like this:
DPGlobal.parseDate(''); // returns new Date(); aka. now
DPGlobal.parseDate('10/10/1983'); // returns a Date instance that points to 10/10/1983
DPGlobal.parseDate('__/__/____'); // is generated by the maskedinput plugin and is interpreted as an ilegal date, so the datepicker goes back to the origin of unix time, 1970
This could easily be fixed by changing the parseDate function on the datepicker lib but this is a big no no if you want to keep your code maintainable. We are left then with a hackish way to intercept the foul value and correct it before maskedinput hands it over to the datepicker.
Hope it helps!

Try use other class name to datepicker and mix in your html
$(function() {
$(".date").mask("99/99/9999");
$('.date2').datepicker({
format: 'mm/dd/yyyy'
});
});
birthdate: <input type="text" class="date date2">