I want to use this daterange picker plugin to
http://www.daterangepicker.com/ open for two fields start date and end date. Right now it only opens for one field. Is there a way to achieve it on two fields.
Maybe something like this?
$("#date-range-picker").daterangepicker({}, function(start, end) {
$scope.startDate = start.format('MM/DD/YYYY');
$scope.endDate = end.format('MM/DD/YYYY');
$scope.$apply();
});
See the full fiddle.
Related
I have start date and end date picker in format of mm-dd-yyyy.End date should be with in 10 days range of start date and end date should not be before start date. How to validate using angular js.Any help is greatly appreciated
I advise you to use moment.js. Here's a basic tutorial and help to get started:
https://dzone.com/articles/getting-started-with-momentjs-intro-with-examples
Basically you would do:
function testDate(startDate, endDate){
var start = moment(startDate, 'mm-dd-yyyy');
var end = moment(endDate, 'mm-dd-yyyy');
if(endDate.isBefore(start)){
//start before end
}
if(startDate.add('days', 11).isAfter(endDate)){
//end not within 10 days range
}
//success!
}
It would be something like that. Hope it helps!
For simple pattern matching, you can use the ngPattern directive. For more complex validation (such as ensuring it's a valid date and within a certain range of another date), you will need to write your own validation directive or use the handy custom validation directive available from Angular-UI.
https://htmlpreview.github.io/?https://github.com/angular-ui/ui-validate/master/demo/index.html
Can you provide more details about this as in what library are you using for datepicker. It would help us answer.
Since you are using a datepicker you can restrict the date range in the fromDate field do not display any dates which are after a certain period (10 days from start date in you case).
jQuery datepicker allows this so does other datepickers.
EDIT:
In your controller do something like this.
var newDate = new Date($scope.startdate.getFullYear(), $scope.startdate.getMonth(), $scope.startdate.getDate()+10);
$scope.dateOptions = {
maxDate: newDate,
dateFormat: 'dd/mm/YYYY'
};
And now you can pass dateOptions to your input.
Note: Post a minimal plunkr for faster resolution of your issues.
I'm trying to use Bootstrap Datepicker from eternicode in combination with angularjs.
see jsfiddle
var app=angular.module('myApp', [])
.controller('dateCtrl', function($scope) {
// Case 1:
$scope.datepick = '';
// Case 2:
//$scope.datepick = '25.04.1986';
$scope.setFirstDate = function() {
$scope.datepick= '13.10.1960';
};
$scope.setAnotherDate = function() {
$scope.datepick = '20.02.1967';
};
});
$(document).ready(function(){
$('.datepicker').datepicker({
autoclose: true,
format: 'dd.mm.yyyy',
clearBtn: true,
todayBtn: 'linked',
todayHighlight: true,
weekStart: '1',
calendarWeeks: true,
keyboardNavigation: false
});
});
Essentially, it works fine. But when I change the date programmatically, BS Datepicker ignores it. This shows, when you initially load the fiddle and follow these steps:
1) Click on 'First me!'
2) Select the input field, without touching the datepicker
3) Tab out, press Esc, or click anywhere but the datepicker (close it without selecting a date)
You'll see, that the input field is now empty.
This does not happen because of an invalid date-format as suggested in this question: Uncomment line 6 in the fiddle and test case 2. Repeat above steps. The datefield now shows '25.04.1986'.
Also, in both cases you can test clicking the datepicker and then repeating steps 1-3. The input field will show the last date selected by the BS Datepicker.
{{datepick}}
shows, that the ng-model is always accurate, so this question is not a duplicate of this or this question. Seeing that angularjs is always aware of the actual date, I don't see how scope.apply would solve my problem.
This tells me: BS Datepicker is keeping track of his own and will only remember the initial date or the dates selected by the datepicker itself. And when closing without picking a new one, it will reset the input field to this remembered value.
So how can I prevent this from happening?
So, I found a workaround for this problem. To keep the Datepicker from resetting the input value, add:
forceParse: false
to your Datepicker options. See updated jsfiddle.
Even though this solves the problem at hand, keep in mind, that the Datepicker will no longer parse/check/correct any inputs.
I do believe this to be a bug and will create an issue at Github.
When using the Angular UI datepicker in the edit view of the form, until I change the date of the input box the date is not getting passed through Angular UI.
Eg : If the existing date value is 16-September-2014
If I just POST the data without clicking on the datepicker the value I get in javascript is
'16-September-2014'
But if I first select the datepicker and change the date the final value I get in javascript is
'2014-09-06 00:00:00'
This is library I am using
http://angular-ui.github.io/bootstrap/
Try this on your code.I am not sure, but it may solve your problem.
$scope.toDay = new Date();
$scope.date = $scope.toDay;
Now bind $scope.date in your HTML/Jade using ng-model.
data-ng-model="date"
I am using angular 1.0.8.
I want to use angular ui datepicker. I want to set minimum date to yesterday.
I had tried min-date option like "min-date='-1d'" but it's not working.
Does anyone have this issue? I need help in setting min-date option.
Thanks and regards,
Jay Patel
I am using angular.ui 0.10.0 version and it's having "min" instead of "min-date".
I changed "min-date" to "min" as per comment and it's working properly
In your Controller you can write ,Use the latest version of date picker from Angular UI it will work , its an example of date of Birth selection
min-date="'01/01/1901'" max-date="maxDate"
$scope.toggleMax = function() {
$scope.maxDate = $scope.maxDate ? null : new Date();
};
$scope.toggleMax();
i have a date field(creation date) in page properties, which i want to default to todays date.
How i can accomplish this, i am using a listener on render event
even though i can read the value back, i cannot see to see the date set in page properties.
seems to me i am missing something basic
function(dateField) {
console.log("in render");
var todaysDate=new Date().format('m/d/Y');
console.log(todaysDate);
dateField.setValue(todaysDate);
CQ.Ext.getCmp("dateCreated").setValue(todaysDate);
console.log( CQ.Ext.getCmp("dateCreated").getValue());
}
You can create a widget with xtype "datetime" and apply the value as "now", in order to initialize the date field with today's date in case the author hasn't selected any.
An example widget is shown below :
"date":{"fieldLabel":"datetime","xtype":"datetime","name":"./date","value":"now","jcr:primaryType":"cq:Widget"}
This would work for Pageproperties as well.
Datetime widgets API.