How to dynamically set properties for AngularJS jQueryUI datepicker directive - jquery-ui

I have a need to set the min Date for one of my datepicker inputs to 5 days after today's date. I have setup the jQueryUI datepicker directive for AngularJS, and by itself, it works great. When I try to add any properties to the input for an individual datepicker, such as 'min' (Date), it does not appear to honor the property, and shows me all dates.
sorry for not having a jsfiddle or plunker
EDIT: Updated to show solution
index.html
<input id="requestDate" type="text" ng-model="requestDate" ss-datepicker min-date="5"/>
Datepicker.js
app.directive('ssDatepicker', function(){
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl){
$(function(){
element.datepicker({
dateFormat:'dd-M-yy',
showOn: 'both',
buttonImage: "/e/images/calendar-ui.gif",
buttonImageOnly: true,
buttonText:'Choose a Date',
beforeShow: function(element, datepicker){
if(attrs.minDate){
angular.element(element).datepicker("option", "minDate", attrs.minDate);
}
if(attrs.maxDate){
angular.element(element).datepicker("option", "maxDate", attrs.maxDate);
}
},
onSelect:function(date){
scope.$apply(function(){
ngModelCtrl.$setViewValue(date);
});
}
});
});
}
}
});
Thanks in advance!

Okay, thanks to Sebastian, I was able to figure it out. It doesn't, for some reason, like a date variable for the "min-date" attribute, but it will accept the offset, which, for my purposes, works exactly as needed. I am fairly sure that it is a formatting problem with the date that prevented it from working.
app.directive('ssDatepicker', function(){
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl){
$(function(){
element.datepicker({
dateFormat:'dd-M-yy',
showOn: 'both',
buttonImage: "/e/images/calendar-ui.gif",
buttonImageOnly: true,
buttonText:'Choose a Date',
beforeShow: function(element, datepicker){
if(attrs.minDate){
angular.element(element).datepicker("option", "minDate", attrs.minDate);
}
if(attrs.maxDate){
angular.element(element).datepicker("option", "maxDate", attrs.maxDate);
}
},
onSelect:function(date){
scope.$apply(function(){
ngModelCtrl.$setViewValue(date);
});
}
});
});
}
}
});

How do you thing the "min" value should led to some changes?
Your directive doesn't read this value, does it?
You can access it via attrs.min in your link function.
Have you got some documentation for what you are doing. I can't find something, that looks like your code.
Oh - you are not using Angular UI Bootstrap Datepicker but jQuery UI Datepicker.
So you have to set this value: http://api.jqueryui.com/datepicker/#option-minDate
...
dateFormat:'dd-M-yy',
showOn: 'both',
buttonImage: "/e/images/calendar-ui.gif",
buttonImageOnly: true,
buttonText:'Choose a Date',
minDate: attrs.min, // get the value of the "min" attribute - maybe you should take care that it is really a date
...
Just like: http://plnkr.co/edit/MyduNfrchgsuD9mAYOEU?p=preview

Related

Jqueryui datepicker change class onselect doesn´t work

I try to change the class of the selected Datepicker Field, but ist doesn´t work.
Here you find a fiddle with the code
https://jsfiddle.net/ztj6rd5m/
<div id="Kalender"></div>
/* <![CDATA[ */
$(document).ready(function() {
$("#Kalender").datepicker({
numberOfMonths: 1,
showButtonPanel: true,
dateFormat: "yy-mm-dd",
onSelect: function(date, inst) {
$(".ui-datepicker-calendar .ui-datepicker-current-day")
.removeClass("ui-datepicker-current-day")
.children()
.removeClass("ui-state-active");
$(".ui-datepicker-calendar TBODY A").each(function() {
if ($(this).text() == inst.selectedDay) {
$(this).parent().addClass("pickerActive");
return;
}
});
}
});
});
/* ]]> */
.pickerActive {
background: yellow;
}
I tried different cases, but the addClass doesn´t fire.
Can anyone helm me?
Thanx!
Ok. Finally, as promised, i have found the solution. Check the fiddle here.
As i have mentioned in the comment, the datepicker reconstructs itself at some point, that's why your code doesn't work. You can use a timeout function to apply your code.
$(document).ready(function() {
$("#Kalender").datepicker({
numberOfMonths: 1,
showButtonPanel: true,
dateFormat: "yy-mm-dd",
onSelect: function(date, inst) {
$(".ui-datepicker-calendar .ui-datepicker-current-day")
.removeClass("ui-datepicker-current-day")
.children()
.removeClass("ui-state-active");
setTimeout(function() {
inst.dpDiv.find('.ui-datepicker-current-day a').addClass("pickerActive");
}, 50);
return;
}
});
});
I have modified your code a bit. I have removed the following condition check code
$(".ui-datepicker-calendar TBODY A").each(function() {
if ($(this).text() == inst.selectedDay) {
to inst.dpDiv.find('.ui-datepicker-current-day') because you get the selected date instance from the onSelect function parameter.
In your css, you have to add !important to the background color as the background color from Datepicker Ui overrides your style.

jqgrid and datepicker control giving error for new records

i binded by jqgrid with json returned from ajax. json has date in following format
11/1/2013 12:00:00 AM
in the colmodel i have specified the following
{ name: 'datecol', index: 'SignDate', width: '200', jsonmap: 'cell.SignDate', editable: true, sorttype: 'date',
editable: true, formatter: 'date', formatoptions: {
srcformat: 'm-d-Y H:i:s',
newformat: 'Y-M-d'
},
editoptions: { dataInit: initDateEdit },
initDateEdit = function(elem) {
setTimeout(function() {
$(elem).datepicker({
formatter: 'date', formatoptions: {
srcformat: 'm-d-Y H:i:s',
newformat: 'yy-M-d'
}
autoSize: true,
showOn: 'button', // it dosn't work in searching dialog
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
//$(elem).focus();
},100);
}
This displays the date correctly in the grid as
2013-Nov-01
but when i hit addnew record, the popup comes and when i select the date and hit submit, in the grid, the new record is showing
NaN-undefined-NaN
in the date column. what is wrong here?
when I use the same code as given in this link
http://www.ok-soft-gmbh.com/jqGrid/LocalFormEditing.htm
edit works fine, but when i add new row, the date comes as NaN-undefined-NaN
please help.
I think that the reason of the problem which you described is wrong parameters of jQuery UI Datepicker which you use. You use formatter and formatoptions parameters of datepicker which not exists. Instead of that you should use dateFormat option which format described here.
UPDATED: The main reason of the problem which you describe is wrong date format which you use. It's important to understand that srcformat and newformat of formatoptions should have PHP date format, but jQuery UI Datepicker supports another format which described here for example. The input data 11/1/2013 12:00:00 AM contains both date and time. On the other side jQuery UI Datepicker support date only. Because you use newformat: 'yy-M-d' then I suppose that you want just ignore the time part of the date. In the case I would suggest you to use
formatter: 'date',
formatoptions: {
srcformat: 'm/d/Y',
newformat: 'Y-m-d'
}
instead of
formatter: 'date',
formatoptions: {
srcformat: 'm-d-Y H:i:s',
newformat: 'Y-m-d'
}
which you use currently. Next problem is the dateFormat option of jQuery UI Datepicker. You have to use format which corresponds srcformat, but which uses correct format (described here). In case of srcformat: 'm/d/Y' you should use dateFormat: 'm/d/yy' instead of dateFormat: 'yy-m-dd' which you use in your jsfiddle demo.
The modified demo works now correctly.

jqueryUI datePicker constructor

Can someone explain me how to create a jquery UI datepicker with both properties changeMonth and localization?
I have these two lines of code:
$('.datePicker').datepicker($.datepicker.regional['en']);
$('.datePicker').datepicker({ changeMonth: true });
I'd like to merge them into a single line, since the second one seems to fail if not called when and only when constructing the datepicker for the first time. Unfortunately, I can't do this since I don't know to which property assign the $.datepicker.regional['en'].
Thanks.
I've already tried this, with no success: jQueryUI datepicker: Month/Year Menus with Localization
var obj = $.extend($.datepicker.regional['en'], { changeMonth: true, other settings... })
$('.datePicker').datepicker(obj);
Using jquery $.extend, we can combine both the settings object and the localizator object.
You can set any number of properties after you initialize the datapicker as follows:-
$.datepicker.setDefaults({
showOn: "both",
buttonImageOnly: true,
buttonImage: "calendar.gif",
buttonText: "Calendar"
});

jQuery UI multiple Datepickers: set individual event by id after setting options by class

I have multiple datepickers in one page.
I user class name to set the option for things like appears.
$('.datepickers').datepicker({
dateFormat: "yy-mm-dd",
showButtonPanel: true,
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
showWeek: true
});
Then, I want to set onSelect event for two of them.
$('#to').datepicker({
onSelect: function(selectedDate) {
$('#from').datepicker("option", "minDate", selectedDate);
}
});
Similar onSelect event setting for others.
However, this would not work. Any suggestion for how to fix this, besides setting all options individually by id?
did you try the following syntax? You don't want to _init the datepicker widget again. You just want to change an option. This is the way to do that with jquery ui widgets.
$('#to').datepicker('option', 'onSelect', function(selectedDate) {
$('#from').datepicker("option", "minDate", selectedDate);
});
i created a functional demo here to show a possible solution:
click for the jsfiddle
you don't have to create multiple datepicker methods. just use the "onSelect" method to:
test whether the current datepicker has "#to"
if so, use the "dateText" value from this datepicker to intialize the "#from" datepicker
use the current "inst" value to traverse the dom to the "#from" datepicker and set it's value.
these were the key lines:
onSelect: function(dateText, inst) {
if(inst.id === 'to'){
$('.datepickers').filter($('input#from')).datepicker("option", "minDate", dateText);
}
}

jQuery datepicker loses focus after .("show")

I'm using the range date-picker of jQuery UI. When selecting the "from date", I want to open automatically the "to date" date-picker. So, I call the .datepicker("show"). The "to date" picker is showing for a second and immediately fade away. Surprisingly, if I go to another application and then come back and focus on the browser window, the "to date" picker is shown.
I also tried to add the $('#toDate').focus(); but it didn't help.
$( ".fromDatePicker" ).datepicker({
defaultDate: "+1w",
dateFormat: 'dd/mm/yy',
altFormat: 'yymmdd',
altField: "#fromDateFormatted",
numberOfMonths: 2,
showOn: "both",
buttonImage: "images/calender_icon_a1.jpg",
buttonText: "open calendar",
buttonImageOnly: true,
onSelect: function( selectedDate ) {
$('#toDate').datepicker( "option", "minDate", selectedDate );
$('#toDate').datepicker("show");
//$('#toDate').focus(); //commented cause it's not working
}
});
The reason for the flashing appearance is because show would be called before minDate finishes. This would confuse datepicker when triggering beforeShowDay event just before showing the picker.
One somewhat hacky workaround is to delay the call to show the datepicker. For example, something like the following would work:
onSelect: function( selectedDate ) {
$('#toDate').datepicker( "option", "minDate", selectedDate );
setTimeout(function() { $('#toDate').datepicker("show") }, 50);
}
See this in action: http://jsfiddle.net/william/PVuTC/2/.

Resources