I've got this problem for quit some time now:
I'm using the AngularJs datetimepicker https://github.com/dalelotts/angular-bootstrap-datetimepicker. I've implemented it like this:
<div class="form-group">
<label >Einddatum: {{ employeeCtrl.employee.EndDate }}</label>
<div class="dropdown">
<a class="dropdown-toggle my-toggle-select" id="enddate" role="button" data-toggle="dropdown" data-target="#" href="">
<div class="input-append"><input type="text" class="input-large" data-ng-model="employeeCtrl.employee.EndDate"><span class="add-on"><i
class="icon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="employeeCtrl.employee.EndDate" data-datetimepicker-config="{ minView: 'day' }"></datetimepicker>
</ul>
</div>
</div>
But when the value is stored it saves the previous day. So if I select June 2 it puts June 1 in the database?
When I show the selected date like this:
<label >Einddatum: {{ employeeCtrl.employee.EndDate }}</label>
The date is correct! What could be wrong here? I need the timzone Amsterdam!
Related
How to block future date and time in angular bootstrap datepicker. I have found some example but it is block till before 4 hours
What exactly I want is to block till current hour and current minute
Is it possible to do that?
$scope.beforeRender = function($dates) {
/* disable future dates */
for (var i = 0; i < $dates.length; i++) {
if (new Date().getTime() < $dates[i].utcDateValue) {
$dates[i].selectable = false;
}
}
};
<div class="input-group">
<div class="dropdown">
<a class="dropdown-toggle" id="dropdown2" role="button" data-toggle="dropdown">
<div class="input-group">
<div class="form-control" id="selected_date">
{{ formData.dateInput | date:'yyyy-MM-dd HH:mm:ss' }}
</div>
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="formData.dateInput"
data-datetimepicker-config="{ dropdownSelector: '#dropdown2' " />
</ul>
</div>
</div>
Use end date option
<input type="text" class="form-control" data-date-end-date="0d">
http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#enddate
when i click on Deploy button it's upload both environment list, and category list Instead it opening both lists it should open just the environment list, then open the category list once an environment has been selected.
<div class="download-options">
<form class="form-inline" role="form">
<div class="dropdown" id="download-target-environment-dropdown" ng-show="!comparisonDeployment">
<label class="control-label">Target Environment:</label>
<input type="text" class="form-control dropdown-toggle" data-toggle="dropdown" role="button" data-target="#"
value="{{targetEnvironment.alias}}" readonly>
<ul class="dropdown-menu" role="menu" ng-class="{show: !targetEnvironment}">
<li ng-repeat="env in environments">
<a ng-click="setTargetEnvironment(env)">{{env.alias}}</a>
</li>
</ul>
</div>
<div class="dropdown" id="download-data-type-dropdown">
<label class="control-label">Categorie`enter code here`s:</label>
<input id="add_a_category" type="text" class="form-control dropdown-toggle" data-toggle="dropdown" role="button"
data-target="#"
value="Add a category" readonly/>
<ul class="dropdown-menu" role="menu" ng-class="{show: !type}">
<li ng-repeat="type in typesInfo" ng-class="{disabled: !hasRootFromType(type)}">
<a ng-click="setType(type)">{{type.alias}}</a>
</li>
</ul>
</div>
</form>
</div>
The following code not showing up pop up timepicker. Any idea how to fix?
Code:
<ul class="dropdown-menu custom-scroll dropDownLabel custom-width" role="menu" aria-labelledby="btn-append-to-body"
ng-show="!sr.timedisplay"
>
<li role="menuitem">
<a href="" ng-click="$event.stopPropagation()">Start Time
<p class="input-group">
<input type="text" class="form-control" timepicker-popup ng-model="sr.startTime" is-open="opened" timepicker-options="timeOptions" ng-required="true"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="sr.getTime('startTime')"><i class="glyphicon glyphicon-time"></i></button>
</span>
</p>
</a>
</li></ul>
There is no such thing as a timepicker-popup, at least not in the official documentation - the question is tagged as angular-ui-bootstrap?
But you can create one by yourself using the timepicker and a dropdown :
<span uib-dropdown auto-close="outsideClick">
<a href uib-dropdown-toggle>
{{ displayTime }}
</a>
<ul class="uib-dropdown-menu">
<li>
<uib-timepicker ng-model="mytime" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>
</li>
</ul>
</span>
the script is basically the same as from the timepicker docs, besides a displayTime used for the dropdown :
$scope.$watch('mytime', function(newValue, oldValue) {
var hour = $scope.mytime.getHours()-($scope.mytime.getHours() >= 12 ? 12 : 0),
hour = hour<10 ? '0'+hour : hour,
minutes = ($scope.mytime.getMinutes()<10 ? '0' :'') + $scope.mytime.getMinutes(),
period = $scope.mytime.getHours() >= 12 ? 'PM' : 'AM';
$scope.displayTime = hour+':'+minutes+' '+period
})
plnkr -> http://plnkr.co/edit/J4alKogyKuevSGdTkLFQ?p=preview
NB: The plnkr is in 0.14.3. If you are using Angular UI Bootstrap prior to 0.14.0 then of course skip the uib- prefixes and it will work.
button style with glyph :
<span class="btn btn-default" uib-dropdown auto-close="outsideClick" >
<a href uib-dropdown-toggle>
{{ displayTime }} <i class="glyphicon glyphicon-time"></i>
</a>
<ul class="uib-dropdown-menu">
<li>
<uib-timepicker ng-model="mytime" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>
</li>
</ul>
</span>
http://plnkr.co/edit/fyC6TfDsrJqsuGCqm11t?p=preview
This used to work:
<uib-timepicker></uib-timepicker>
Now you need to do this:
<div uib-timepicker></div>
based David's sample/input, here is a sample with input component in html, but no controller. And I tested it against Firefox and Chrome, it works well. BTW, I am using bootstrap v3.3.6 and Angular UI bootstrap v1.3.2.
<div class="row">
<div class="col-md-2" style="text-align: right">
<label>Time Picker Popup</label>
</div>
<div class="col-md-2">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn" uib-dropdown auto-close="outsideClick">
<button type="button" class="btn btn-default dropdown-toggle" uib-dropdown-toggle><i class="glyphicon glyphicon-time"></i></button>
<ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<li><uib-timepicker ng-model="mytime" hour-step="1" minute-step="15" show-meridian="false"></uib-timepicker>
</ul>
</div>
</div>
</div>
</div>
I am using angular-bootstrap-datetimepicker.
On clicking on date picker for selection of date & time.
The current state is removing from browser URL. How to resolve this?
HTML code
<div class="dropdown">
<a class="dropdown-toggle" id="startDate" role="button" data-toggle="dropdown" data-target="#" href="#">
<div class="input-group">
<input placeholder="{{'START_DATE' | translate}} *" required type="text" class="form-control" data-ng-model="startDate"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-on-set-time="onStartDateSet(newDate, oldDate)" date-disabled="disableViewFields" data-ng-model="startDate" data-datetimepicker-config="{ dropdownSelector: '#startDate', startView:'day', minView:'hour' }" />
</ul>
</div>
If I removed href='#' from a tag, working fine. Code follows
<div class="dropdown">
<a class="dropdown-toggle" id="startDate" role="button" data-toggle="dropdown" data-target="#">
<div class="input-group">
<input placeholder="{{'START_DATE' | translate}} *" required type="text" class="form-control" data-ng-model="startDate"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-on-set-time="onStartDateSet(newDate, oldDate)" date-disabled="disableViewFields" data-ng-model="startDate" data-datetimepicker-config="{ dropdownSelector: '#startDate', startView:'day', minView:'hour' }" />
</ul>
I'm using this datetimepicker for AngularJS. My requirement is that I'll have to have a date and a separate time input. This works fine so far.
The true issue now is that when a date and time is selected and I then change the date it overrides the time. So when my time was 12:05:00 it will be reset to 00:00:00 because the datetimepicker generates a date but obviously is ignoring the time, it simply skips that part because it thinks you only need year, month and day.
Plunker
<body ng-controller="TestController">
<div class="row">
<div class="col-md-6">
<label>Start Date</label>
<div class="dropdown">
<a class="dropdown-toggle" id="startDate" role="button"
data-toggle="dropdown" data-target="#" href="#">
<div class="input-group">
<input
restrict-input
date-parser="YYYY-MM-DD"
type="text"
class="form-control"
data-ng-model="task.start_date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker
data-ng-model="task.start_date"
data-datetimepicker-config="{startView: 'year', minView: 'day', dropdownSelector: '#startDate' }"
/>
</ul>
</div>
<label>Start Time</label>
<div class="dropdown">
<a class="dropdown-toggle" id="startTime" role="button"
data-toggle="dropdown" data-target="#" href="#">
<div class="input-group">
<input
date-parser="HH:mm:ss"
type="text"
class="form-control"
data-ng-model="task.start_date">
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker
data-on-set-time="onTimeSet(newDate, oldDate, 'start_date')"
data-ng-model="task.start_date"
data-datetimepicker-config="{startView: 'hour', dropdownSelector: '#startTime' }"
/>
</ul>
</div>
</div>
</div>
<pre>{{task | json}}</pre>
</body>
I'm pretty sure the issue is somewhere in dateFactory line 168. To be more specific, when you debug the date values around line 286 it seems like it gets lost there. Yes, in the "hour" function, not day as you expect. It seems to me like the directive is passing the state through and when it reaches hour it will detect that the maxView was day and set the time.
My issue is now simply that I couldn't figure out where exactly the issue is caused. Any help with that is appreciated.
It is possible to add something like this to your scope:
$scope.onSetDate = function(newDate, oldDate) {
if (typeof oldDate == 'string') {
oldDate = new Date(oldDate);
}
newDate.setHours(oldDate.getHours());
newDate.setMinutes(oldDate.getMinutes());
newDate.setSeconds(oldDate.getSeconds());
}
and in your html:
<datetimepicker
data-ng-model="task.start_date"
data-datetimepicker-config="{startView: 'year', minView: 'day', dropdownSelector: '#startDate' }"
on-set-time="onSetDate(newDate, oldDate)"
/>
http://plnkr.co/edit/TTVC9aBCoQY1Dcm0nryY?p=preview