I tried to set Datepicker, like this:
<script type="text/javascript">
$.datepicker.setDefaults($.datepicker.regional['nl']);
$(function () {
$("#tbDateDiagnostic").datepicker({
numberOfMonths: 2,
showButtonPanel: true,
ateFormat: 'dd/mm/yy'
});
$("#tbDateSend").datepicker({
numberOfMonths: 2,
showButtonPanel: true,
dateFormat : 'dd/mm/yy'
});
});
</script>
But all the time, the datepicker is in French and not in Dutch.
Did I do something wrong?
I'm guessing you forgot to include the localisation file:
<script src="https://jquery-ui.googlecode.com/svn-history/r3982/trunk/ui/i18n/jquery.ui.datepicker-nl.js"></script>
You may find other localisation files here:
https://github.com/jquery/jquery-ui/tree/master/ui/i18n
Here's a demo: http://jsfiddle.net/repw4/418/
keith-wood is a good site with detailed examples.
Try this:
$.localise('js/jquery.datepick', 'nl');
$('#tbDateSend').datepick('option', $.datepick.regional['nl']);
$.datepick.setDefaults($.datepick.regional['']);
Related
I implemented in my app a JQ Datepicker calendar on its default version, but I cannot understand how to show in the input field always the date the today date to be precise. Now when I open the page where is the datepicker, the input field is blank until I select the date I need.
What I would like to see is that the date is always visible on the input filed if that possible.
My Datepicker:
//Date Picker
$("*[data-behavior~=shipping-date-input]").datepicker({
onSelect: function() {
digest = cargoflux.generateUUID();
cargoflux.resetCalculatedFields();
clearTimeout(timeOut);
timeOut = setTimeout(function() {
if (cargoflux.validInput()) {
cargoflux.resetCalculatedFields();
cargoflux.getAvailableCarrierProducts();
}
}, 1500);
},
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
altField: "#recorded-at-alt",
dateFormat: "yy-mm-dd",
minDate: "-1Y",
maxDate: "+1Y"
});
Screenshot of what I mean as you see the input is blank in his initial state:
To populate the value of the text field, you can use $.datepicker.formatDate( format, date, options ) feature. here is an example:
$(function() {
var dtFt = "yy-mm-dd";
$("#datepicker").datepicker({
onSelect: function() {
/*digest = cargoflux.generateUUID();
cargoflux.resetCalculatedFields();
clearTimeout(timeOut);
timeOut = setTimeout(function() {
if (cargoflux.validInput()) {
cargoflux.resetCalculatedFields();
cargoflux.getAvailableCarrierProducts();
}
}, 1500);
*/
},
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
//altField: "#recorded-at-alt",
dateFormat: dtFt,
minDate: "-1Y",
maxDate: "+1Y"
}).val($.datepicker.formatDate(dtFt, new Date()));
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
As you can see, we populate the text field value, $("#datepicker").val();.
Hope that helps.
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
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"
});
I have a page where I use accordion widget. I need to be able to open a page and have an accordion expanded on a particular section. jQuery UI is providing an option for it: active, which is what I use. however when I open a page the accordion is collapsed. What am I missing?
My code looks like this when I view page source:
$("#accordion").accordion({
header: "h3",
active: 3,
collapsible: true,
autoHeight: true
});
I'm not sure, but I'll take a shot.
You have to wrap the code in a $(function() { }); block. Like this:
<script>
$(function() {
$("#accordion").accordion({
header: "h3",
active: 3,
collapsible: true,
autoHeight: true
});
});
</script>
I hope this helps.
it'd be great if you could post a jsFiddle... or just the page itself on the web.
i would say do this:
$(document).ready(function(){
$(function() {
$("#accordion").accordion({
header: "h3",
active: 3,
collapsible: true,
autoHeight: true
});
});
});
this makes your code run only when the document is fully loaded. Your problem might be that jQuery is trying to expand something that doesn't exist yet.
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.