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"
});
Related
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
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);
}
}
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/.
The project I'm working on uses IE8, frames and absolute positioning. One of the frames is too small but I cannot change the size due to requirements of the project. I've included the jQuery UI datepicker but it appears directly over the field (no room above or below for it to appear).
I want to instead have the datepicker display off to the left hand side of the input. Is there a way I can do this? I've tried this code so far in a test page but still cannot get the position changed from below.
$(".date").datepicker({
changeYear: true,
dateFormat: 'mm/dd/yy',
constrainInput: true,
yearRange: 'c-125:c+125',
showAnim: "",
showOptions: { direction: "up" }
});
You can use isRTL property of datepicker something like:
$('#datepicker').datepicker({
isRTL: true,
...
});
More information can be found # http://api.jqueryui.com/datepicker/#option-isRTL
Wrap the datetime picker into a div/span/p with some id to it. Apply the direction property in css for the div >>
for ex:
HTML code:
<div id="dtPicker">Date:
<input type="text" id="datepicker"/>
</div>
CSS:
div#dtPicker {
direction: rtl;
}
JS:
$("#datepicker").datepicker({
showOn: "button",
buttonImage: "../../icon.png",
buttonImageOnly: true
});
The icon should appear on left of the input field. :)
Or in your custom css you can override the jQuery ui css for the image.
.ui-datepicker-trigger {
float: left;
}
Using jquery-ui datepicker
I would like to use altField and altFormat to 2 datepickers on the same page but I can't figure out how to add these 2 options which are specific to each datepicker along with my common set of options.
Code sample below. #dt1 does not work, but #dt2 works. How can I get #dt1 to work while using the datepickerOpts?
var datepickerOpts = {
minDate: -2,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd'
};
$('#dt1').datepicker(datepickerOpts,
{altField: '#alt1',
altFormat: 'mm-dd-yy'
});
$('#dt2').datepicker({
minDate: -2,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
altField: '#alt2',
altFormat: '#'
});
You passed in altField and altFormat as one array option in #dt1, but you did put them as 2 different options in #dt2 (which is the right way). What you have to do is make a copy of the opts(in case you add new elements in the future) for dt1 and dt2, append the altField altFormat as part of the datepickerOpts, and pass them as the only option to datepicker initialization.