I am using ui-date directive (https://github.com/angular-ui/ui-date).
This UI Calendar component is getting Date by default. Can I get only month and year without dates.
How to get only month and year?
I don't know ui-date directive, but I had exactly the same need than you.
You can use eternicode's fork of bootstrap-datepicker and look for the min view mode parameter which will fit your need.
Following Code work for me. Thanks
$scope.expireDate = {
dateFormat: 'mm-yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function() {
function isDonePressed() {
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
};
$scope.setExpireDate = function() {
$(".ui-datepicker-calendar").hide();
$("button.ui-datepicker-current").css("display", "none");
};
Use minMode:'month' in the datepicker-options and it will work.
There is an angular version of the eternicode's bootstrap-datepicker here:
angular-bootstrap-datepicker
Related
I am using the datepicker of UI Bootstrap: (there is a Plunker there that disable the past dayswith a button).
Can anyone please help me to disable the future days without any button?
I tried change the function of the button like that, but it didn't worked:
$scope.toggleMin = function() {
$scope.options.minDate = $scope.options.minDate ? **new Date()** : **null** ;
};
And this is a button, I'd like to disable without a button.
Just set maxDate in options to the date you want to restrict to.
$scope.options = {
customClass: getDayClass,
maxDate: new Date(), // restrict maximum date to today
showWeeks: true
};
Otherwise, if you need to change it after the options are set you can just do:
$scope.options.maxDate = new Date(), // restrict maximum date to today
Here's the updated Plunker with days after today disabled: https://plnkr.co/edit/0iqNNEcATzv4t8h8n41X?p=preview
Set your datepicker class and Set endDate = new Date()
$('.date-datepicker').datepicker({
autoclose: true,
endDate: new Date()
});
I am working on a scheduling app using the Angular-Gantt.js module.
It is working fine --> except I'd like to customize the header to display "M,T,W,Th,F ..." for the columns in the day viewscale. Currently it displays like this demo version -->
https://www.angular-gantt.com/demo/
From the documentation for the module, there are events triggered after the headers are created and displayed and not when the header is being created. There is however a guide on how to write a plugin. I am wondering if anyone has tackled this issue and could point me in right direction.
Many Thanks,
Ravi
Yes, it is possible. Just add the headers-formats option on the gantt directive in the html and add the following code to your $scope.option:
In the html:
<div gantt
header-formats="options.headersFormats">
<div>
In the controller:
$scope.option: {
//other options
headersFormats: {
'year': 'YYYY',
'quarter': '[Q]Q YYYY',
month: 'MMMM YYYY',
week: function(column) {
return column.date.format('MMM D [-]') + column.endDate.format('[ ]MMM D');
},
day: 'ddd',
hour: 'H',
minute:'HH:mm'
},
}
Setting the 'day' property of the headersFormats to 'ddd' will make it to display the dates as 'Mon', 'Tue', 'Wed' e.t.c.
I have an api which return the date in this format "014-08-26T15:10:45.402Z" i am using angular kendo ui .The problem i am facing is the date is not getting bound to the kendo date picker.Could someone help me out .
<input kendo-date-picker ng-model="emp.datestart" k-format="MM/dd/yyyy" />
In order to have the Kendo DatePicker working with a string date value model you need:
1) Use k-ng-model instead of ng-model.
2) Tell the widget in which exact format the date will be parsed.
<input kendo-date-picker k-ng-model="emp.datestart" k-options="datePickerOptions" />
Then at your AngularJS controller you will specify the date parsing format, for example:
$scope.datePickerOptions = {
parseFormats: ["yyyy-MM-ddTHH:mm:ss"]
};
you can use something like this
<h4>Select date:</h4>
<input
kendo-date-time-picker
k-options="monthSelectorOptions"
data-k-ng-model="dateObject"
data-ng-model="dateString.startDate"
style="width: 100%;" />
var startDate = new Date();
$scope.monthSelectorOptions = {
value: startDate,
format: "dd/MM/yyyy h:mm tt",
parseFormats: ['ddd MMM dd yyyy'],
animation: {
close: {
effects: "fadeOut zoom:out",
duration: 300
},
open: {
effects: "fadeIn zoom:in",
duration: 300
}
},
culture: "de-DE",
};
And here is complete solution on kendo dojo
I have a problem with AngularUI datepicker when i want to use 2 calendar in range each other.
When i select date in first calendar, the min date of the second calendar need to be higher than first.
So far no problem !
But, when i open the second calendar, the first date is good, but i can't click on date or can't switch month! Nothing do...
Here is my code
HTML :
<div ng-controller="test">
From <input id="from" ng-model="from" ui-date="formatCalendar" ng-change="updateDate()">
To <input id="to" ng-model="to" ui-date="formatCalendar2">
</div>
Javascript :
function test($scope){
$scope.to = null;
$scope.from = null;
$scope.formatCalendar = {
minDate: 0,
maxDate: 365,
defaultDate: "+1w",
numberOfMonths: 2,
changeMonth: true,
dateFormat: 'dd/mm/yy'
};
$scope.formatCalendar2 = {
defaultDate: "+1w",
numberOfMonths: 2,
changeMonth: true,
dateFormat: 'dd/mm/yy'
};
$scope.updateDate = function(){
$scope.formatCalendar2.minDate = $scope.from;
};
}
You can see demon # http://plnkr.co/edit/4tTHEIUzVRyQJ7NOCIAs?p=preview
Thanks for help :)
By looking at the source of ui-date, it seems that it has a watch on the whole config object. That watch will only fire if your config object is replaced, and not if you only modify a property on it. Something like this might work:
$scope.updateDate = function(){
// Just a simple way to clone the object to trigger
// the watch in ui-date
$scope.formatCalendar2 = JSON.parse(JSON.stringify($scope.formatCalendar2));
$scope.formatCalendar2.minDate = $scope.from;
};
EDIT:
Misread the code, the watch does fire because getOptions() returns a new object every time. I was able to get your code running here: http://jsbin.com/yibehape/2/edit
It sets the min date for the To field when changing the From field. So I'm guessing that there's some logical error in your code that you haven't showed us. You seem to have removed your plunker, did you get it working?
var User = Backbone.Model.extend({
schema: {
date: {type: 'Date'}
}
});
var user = new User();
var form = new Backbone.Form({
model: user
}).render();
$('.bootstrap').append(form.el);
What type do I enter to use the included JQuery-UI datepicker? There is no documentation on this other than:
The old jQuery editors are still included but may be moved to another repository:
jqueryui.List
jqueryui.Date (uses the jQuery UI popup datepicker)
jqueryui.DateTime
The schema type is declared in quotes and I can't figure out what the string for jqueryui.Date would be - and that doesn't work for sure.
You want to create a custom editor that you'll name for example: 'DatePicker'.
All the editors are attached to Backbone.Form.editors. Because the DatePicker is rendered exactly like a text field, we can use the text field as a base and only override the behavior specific to the datepicker.
I often use moment.js for some date related work, so this example also includes this. Also it's based on Bootstrap DatePicker and not the jQuery one, but this would be almost 100% the same.
Backbone.Form.editors.DatePicker = Backbone.Form.editors.Text.extend({
render: function() {
// Call the parent's render method
Backbone.Form.editors.Text.prototype.render.call(this);
// Then make the editor's element a datepicker.
this.$el.datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
weekStart: 1
});
return this;
},
// The set value must correctl
setValue: function(value) {
this.$el.val(moment(value).format('YYYY-MM-DD'));
}
});
That's it, you can now use your date picker like this:
schema: {
birthday: { title: 'When were you born', type: 'DatePicker'}
}
Not sure it undestanding right your Question
but I think you can atach the Jquery date pickers in the initialize method of the view