I use the following code
<pre>Selected date is: <em>{{tournament.startDate | date:'fullDate' }}</em></pre>
<input name=startDate" id="startDate" type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="tournament.startDate" is-open="popup1.opened"
ng-required="true" close-text="Schließen""
datepicker-options="dateOptions" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
and my controller
$scope.tournament = Tournament.get({id: $routeParams.id});
$scope.dateOptions = {
dateDisabled: false,
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
};
The value of tournament.startDate is shown in the pre-Tag but not in the input field. The opened datepicker show the correct date.
It seems to be a synchronized problem, cause if I change the controller to
$scope.tournament = new Object();
$scope.tournament.startDate = new Date();
the date is shown in the input field.
Edit: The scope is filled with the correct date but the inputfield don not show the value.
Thanks for help
chokdee
Found it by mself, that the REST Service give back a String not a Date object, after converting it it's working fine.
But in my opinion angular-ui should raise an exception if the cannot convert the given object.
Related
I'm using AngularJs 1.6 with angular-ui-bootstrap 2.5.0 (bootstrap-ui-tpl.min.js)
On loading the page, the model value (dateOfBirth) is not getting pre-populated in the date picker textbox. It seems, many have reported similar issues for different versions of angular/bootstrap but nothing seems to work.
HTML:
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dateOfBirth" datepicker-options="dateOptions"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDobDatePicker()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
Javascript:
$scope.format = 'dd/MM/yyyy'
$scope.dateOfBirth = '05/12/2004'
$scope.dateOptions = {
maxDate: new Date(),
startingDay: 1,
showWeeks: false
}
Edit:
It seems angular provides uibDateParser to parse String to Date object. However, the following fails silently:
$scope.dateOfBirth = $uibDateParser.parse('05/12/2004', 'dd/MM/yyyy')
It's not getting populated because it's a string and not a valid Date. So, if you change it like,
$scope.dateOfBirth = new Date("05/12/2004");
..it would work! Also, note that new Date(..) will come with local timezone so in case you want to change timezone or anything regarding manipulation of dates, momentjs is a great library to handle those.
EDIT: If your format is dd/MM/yyyy, you can maybe do something like this to convert in valid date:
var parts ='05/12/2004'.split('/');
$scope.dateOfBirth = new Date(parts[2],parts[1]-1,parts[0]));
Using Angular 1.5.2, UI-Bootstrap 1.2.5, Bootstrap css 3.3.6
So my json data comes in with the date as a string (I can't help or change that).
"start": "2014-06-12"
I use moment to convert to a date.
//part of a larger object returned from an ajax call
$scope.item=data[0];
$scope.item.startM=moment($scope.item.start);
$scope.item.endM=moment($scope.item.end);
In the {{item}} I see visually on screen
"start":"2014-06-12"
"startM":"2014-06-12T04:00:00.000Z"
In the console I can display the
startM:o
_d:Thu Jun 12 2014 00:00:00 GMT-0400 (Eastern Daylight Time)
_f:"YYYY-MM-DD"
_i:"2014-06-12"
_isAMomentObject:true
_isUTC:false
_isValid:true
_locale:A
The input field is blank????
When I click on the calendar to see the date it's selected the correct date and will display properly in the input field if I select it.
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="item.end" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /><span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button> </span>
$scope.dateOptions = {
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
};
$scope.formats = ['yyyy-MM-dd','dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
I know I'm not providing much detail but I'm struggling to understand why the calendar knows the correct date but the input box doesn't...
You have minDate: new Date(). That is today, but then you are attempting to set the date to June 12, 2014 which is less than the minimum date you have specified. That's probably why it's blank.
The problem is that the uib-datepicker-popup appears to require a date generated by uibDateParser. You need to do something like this instead of using moment.js:
$scope.item.start = uibDateParser.parse($scope.item.start, "yyyy-MM-dd")
I can't tell you why it shows correctly in the popup but not in the text box, but it is what it is at this point I'm sure.
I have below code snippet in which datepicker control is there.
<input type="text" name="startDate" class="form-control input-sm" datepicker-popup="dd-MMMM-yyyy" ng-model="startDate" required />
Here, i have to disable the past dates in the datepicker control and below is what i have configured but its not working. Am I missing something here?
App.config(['datepickerConfig', 'datepickerPopupConfig', function (datepickerConfig, datepickerPopupConfig) {
datepickerConfig.startingDay = 1;
datepickerConfig.showWeeks = true;
datepickerPopupConfig.datepickerPopup = "dd-MMMM-yyyy";
datepickerPopupConfig.currentText = "Now";
datepickerPopupConfig.clearText = "Erase";
datepickerPopupConfig.closeText = "Close";
}]);
If you want to narrow the range of possible dates add min-date or max-date just as in the example.
Here's the relevant part of documentation:
max-date (Default: null) - Defines the maximum available date.
min-date (Default: null) - Defines the minimum available date.
Since angular ui-bootstrap version 1.1.0 you need to use an attribute called datepicker-options to configure a datepicker:
<input type="text" class="form-control" datepicker-options="dateOptions" datepicker-popup="dd-MMMM-yyyy" is-open="popup.opened"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
Now you only need to set the minDate property to the current date or any other date you like to be the minimum Date of the datepicker. Instead of writing the datepicker configuration in the .config block of your application, you should write it in a controller or a service:
$scope.dateOptions = {
minDate: new Date()
};
$scope.popup = {
opened: false
};
$scope.open = function() {
$scope.popup.opened = true;
};
For more information, please read the official documentation.
I have a form where I have a conditionally required datepicker element. I can not initiate this element with any value as the user has to enter it. Datepicker format is dd/mm/yyyy. Issue is that it was working fine until I added ng-required. After ng-required condition added to the element, when user clicks on calendar, calendar default date is Dec 31 1969. It's very inconvenient to the user bringing that date to current date. I tried setting default date to today in datepicker options but no luck.
<div class="form-group col-md-3 required" ng-show="decision==true">
<label class="control-label">Test Date</label>
<div class="input-group">
<input name="testDate" type="text" class="form-control" datepicker-popup="dd/MM/yyyy" ng-model="testDate" is-open="dpOpened.testDateTo"
close-text="Close" onfocus="this.blur();" datepicker-options="dateOptions" ng-required="decision==true" required/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="datepickerPopup($event, 'testDateTo')">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
</div>
--controller.js--
$scope.datepickerPopup = function($event, opened) {
$event.preventDefault();
$event.stopPropagation();
$scope.dpOpened[opened] = true;
}
$scope.dateOptions = {
showWeeks : false,
defaultDate : new Date()
};
$scope.dpOpened = {
testDateTo : false,
};
$scope.today = function() {
return new Date();
}
You have the ng-model set to testDate but I don't see where you have set that in your controller. Try setting testDate = new Date(). See this relevant pull request
I had the same issue.
You should NOT initialize the bsDatePicker field with new Date(). You must initialize with 'null' from formbuilder, even if it is a required field.
I have datepicker ,in which i want to configure initDate so that if model value is null then datepicker show default selected date.
Here is the HTML:
<span class="input-group">
<input type="text" id="input_empdob" ng-readonly="isEmployeeRelieved" readonly placeholder="mm/dd/yyyy" min="mindobDate" max="maxdobDate" ng-change="setYearOfPassing(); setJoiningDate();" class="form-control" datepicker-popup="{{format}}" ng-model="employee.dob" datepicker-options="dateOptions" is-open="emp_dob_opened" ng-required="true" close-text="Close" name="input_empdob"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event); emp_dob_opened = true;"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
and in controller i have configured datepicker-options like:
$scope.dateOptions = {
'init-date': new Date(1991,01,02)
};
at first time while loading it behaves fine, but when on save, when i clear model value then it does not show initDate properly as configured.
Thanks for any help.
I tried to use it too, didn't work.
so, i am using the initialization with the model.
in my controller i set it like:
$scope.initialDate: $filter('date')(new Date(), 'dd/MM/yyyy');