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
Related
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!
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 have following code and it's not working as expected. When I click on timer icon, nothing happens.
<ul class="dropdown-menu customScroll" role="menu" aria-labelledby="btn-append-to-body" ng-show="!myVm.showETA">
<li role="menuitem">
<a href="#">Start Time
<div class="input-group bootstrap-timepicker">
<input type="text" id="timepicker1" class="form-control input-small" placeholder="" aria-describedby="sizing-addon2"
ng-model=myVm.startTime"
ng-change="myVm.getETACount('startTime');myVm.applyFilterForResultCount()"
/>
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</a>
</li>
<li role="menuitem">
<a href="#">End Time
<div class="input-group bootstrap-timepicker timepicker">
<input type="text" id="timepicker2" class="form-control input-small" placeholder="" aria-describedby="sizing-addon2"
ng-model="myVm.endTime"
ng-change="myVm.getETACount('endTime');myVm.applyFilterForResultCount()"
/>
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</a>
</li>
<!--Clear div-->
<li role="menuitem" ng-click="myVm.clearTimePicker()">
<a href="#">
<p>
<span style="color:#40A8E2;">Clear</span>
<span style="color:#333333;"> – ETA</span>
</p>
</a>
</li>
<script type="text/javascript">
$('#timepicker1').timepicker();
$('#timepicker2').timepicker();
</script>
</ul>
Don't try to use the regular bootstrap.js file with angular unless you know how to write directives. When using angular if you need to do some DOM manipulation or extend the markup or behaviors (event handlers) for element you should use directives. For the timepicker you can just use the ui-bootstrap angular module https://angular-ui.github.io/bootstrap/#/timepicker you will need to include the regular bootstrap.css and ui-bootrap-tpls.js then include the ui-bootstrap module dependency and you can use the directive.
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