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

protractor unable to set the ng-model value

Im using materialize css for the date-picker and using protractor to test it as shown in
http://plnkr.co/edit/pSskRfOy3f1NKo6KYgWD?p=preview
When i tried to element(by.model('newPatReports.reportDate')).sendKeys('14 January, 2016'); Im unable to set value instead open up the date-picker- this happens on firefox only
But in chrome it says cannot focus element...What could be the possible way to bind with my model
I also tried to remove the custom attribute, but i didnot succeed
Any help is appriciated.......Thanks in advance

The idea is to remove the readonly attribute from the date input element, click it to trigger the date picker, hide the date picker and send keys to the input:
var EC = protractor.ExpectedConditions,
rptdate = element(by.name("rptdate"));
browser.wait(EC.visibilityOf(rptdate), 15000);
// remove the "readonly" attribute
browser.executeScript("arguments[0].removeAttribute('readonly');", rptdate.getWebElement());
// trigger the date picker
rptdate.click();
// hide the date picker
browser.executeScript("arguments[0].style.visibility = 'hidden';", $('.picker').getWebElement()).then(function () {
rptdate.sendKeys('14-12-2015');
});
Works for me.

AngularJS - date range picker - ng model being overridden

Im trying to use the Angular Bootstrap Daterange Picker , But every instance overrides the ng model to be textual.
This is the very simple code:
<input class="input-filter form-control" type="daterange" ng-model="test" ranges="ranges" />
{{test}}
Exactly like the 4th example that they provide HERE.
By overriding, I mean that from an object:
{"startDate":"2015-11-28T22:00:00.000Z","endDate":"2015-11-28T22:00:00.000Z"}
It turns to text:
11/11/2015 - 12/14/2015
THIS is a 10 seconds video showing this problem. (hope this helps)
And these are the things I load:
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.11/daterangepicker.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/moment.min.js
http://luisfarzati.github.io/ng-bs-daterangepicker/ng-bs-daterangepicker.js

I fall into the same issue. I think it caused by the mechanism of updating input value, it probably has been changed in the latest version of daterangepicker (i used v2.1.17 while demo is working with 1.3.17). New daterangepicker has an option autoUpdateInput, it might be helpful to set it to false in directive configuration code (https://github.com/luisfarzati/ng-bs-daterangepicker/blob/master/src/ng-bs-daterangepicker.js):
//...
options.locale = $attributes.locale && $parse($attributes.locale)($scope);
options.opens = $attributes.opens || $parse($attributes.opens)($scope);
options.autoUpdateInput = false; // Changed row
if ($attributes.enabletimepicker) {
options.timePicker = true;
angular.extend(options, $parse($attributes.enabletimepicker)($scope));
}
//...
It helps with incorrect model binding, but there is still a bug with rendering -- initial start/end dates do not rendered (input is blank). So in general it looks like someone just needs to move ng-bs-daterangepicker to the latest version of daterangepicker.

Try using this lightweight pure AngularJS DateRangePicker (no jQuery). https://github.com/tawani/taDateRangePicker

bootstrap datepicker not hiding

I am using bootstrap datepicker.js but after select the date the datepicker not hide.if i click in any other place it will hide?
what is the solution of this problem?
I have also tried this
$(".datepicker").on('changeDate', function(){
$(".datepicker dropdown-menu").css("display","none");
});
but this is also not working and datepicker.js returns an error(that date is not defined).

You need to use . to target class dropdown-menu:
$(".datepicker").on('changeDate', function(){
$(".datepicker .dropdown-menu").css("display","none");
});

It's not clear from the question which datepicker you are using, but if it is #eternicode's datepicker for boostrap, there is an autoclose option that does exactly what you want...

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