I use Bootstrap-datetimepicker in a apache cordova application.
<div class="col-sm-6 form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" readonly="readonly" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script>
$(function () {
$('#datetimepicker').datetimepicker({
ignoreReadonly: true
});
});
</script>
works perfectly on simulator but can't change date with picker on "ipad". The picker closes before changing date.
Related
I used a pop-over to show some details. I need a datepicker in that, but script is not working.
<div class="container" style="height:auto;">
<script type="text/ng-template" id="abc.html">
<div class="input-group date" id="datepicker">
<input class="form-control" name="startDate" ng-model="startDate" name="startDate"></input>
<span class="input-group-addon" >
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</script>
</div>
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
format:"dd-M-yyyy",
changeMonth: true,
changeYear: true,
buttonImage: "images/calendar.gif",
beforeShowDay: unavailable
});
});
</script>
I think there shouldn't be any tags in script tag. And the datepicket should be added to input. Try this.
<div class="container" style="height:auto;">
<script type="text/ng-template" id="abc.html"></script>
<div class="input-group date" >
<input class="form-control" id="datepicker" name="startDate" ng-model="startDate" name="startDate"></input>
<span class="input-group-addon" >
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
format:"dd-M-yyyy",
changeMonth: true,
changeYear: true,
buttonImage: "images/calendar.gif",
beforeShowDay: unavailable
});
});
</script>
I need to set these three inputs disable
<input type="text" class="col-md-6" ng-model="a.one" name=""/>
<input type="number" class="col-md-6" ng-model="a.two" name="" ng-disabled="cm" required="required"/>
<div class='input-group date' id='date'>
<input type='text' ng-model="a.three" name="toDate" class="form-control" style="height:30px;" ng-disabled="cm" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
when I select one value from below input:
<select class="col-md-6 dropdown-height" ng-model="a.select" name="" ng-options="ms for ms in section" required="required"></select>
the option values inside the select input are coming from an api
scope.mapping = function () {
ApiServices.getAllValues().then(
function (response) {
scope.map= response.data;
});
};
How should I do it?
<input ng-disabled="a.select==='your_value'">
Do this for the three inputs.
Two ways you can do it.
1. apply ng-disabled="a.select" to the element you want to disable.
2. This is much better if you want to apply to more input fields.
Wrap your html inside fieldset and apply ng-disabled. Below is the working code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.cm = true;
$scope.enable= function() {
$scope.cm = !$scope.cm;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<fieldset ng-disabled="cm">
<input type="text" class="col-md-6" ng-model="a.one" name=""/>
<input type="number" class="col-md-6" ng-model="a.two" name="" required="required"/>
<div class='input-group date' id='date'>
<input type='text' ng-model="a.three" name="toDate" class="form-control" style="height:30px;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</fieldset>
<button ng-click="enable()">enable fields</button>
</div>
I don't know how to make the minDate property of my uib-datepicker work.
Here is what I have done:
<div class="form-group">
<div class="col-md-6">
<label class="col-md-4 control-label" for="field_dateDebut">Date Début</label>
<div class="col-md-5">
<div class="input-group">
<input id="field_dateDebut" type="text" class="form-control" name="dateDebut" uib-datepicker-popup="{{dateformat}}" ng-model="vm.mission.dateDebut" is-open="vm.datePickerOpenStatus.dateDebut"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.openCalendar('dateDebut')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="col-md-6">
<label class="col-md-4 control-label" for="field_dateFinPrevisionnelle">Date Fin Prévisionnelle</label>
<div class="col-md-5">
<div class="input-group">
<input id="field_dateFinPrevisionnelle" type="text" class="form-control" name="dateFinPrevisionnelle" uib-datepicker-popup="{{dateformat}}" ng-model="vm.mission.dateFinPrevisionnelle" is-open="vm.datePickerOpenStatus.dateFinPrevisionnelle" minDate = "vm.mission.dateDebut"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.openCalendar('dateFinPrevisionnelle')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
</div>
When I click on the first date, I want to disable all the dates previous to this date in the second datepicker.
If anyone has any idea...
Thank you.
As jmoreno pointed out, minDate is a property of an object and that object you need to pass through datepicker-options attribute in the element.
vm.dateOptions2 = {
minDate: new Date()
};
<input id="field_dateFinPrevisionnelle" type="text" class="form-control" name="dateFinPrevisionnelle"
ng-model="vm.mission.dateFinPrevisionnelle"
uib-datepicker-popup="{{dateformat}}"
datepicker-options="vm.dateOptions2"
is-open="vm.datePickerOpenStatus.dateFinPrevisionnelle"/>
This is the basic. Now as you want to set the second datepicker's minDate to the first datepicker's selected date, you can use ng-change of the first datepicker element to change the minDate in vm.dateOptions2 object of the second datepicker.
<input id="field_dateDebut" type="text" class="form-control" name="dateDebut"
ng-model="vm.mission.dateDebut"
uib-datepicker-popup="{{dateformat}}"
ng-change="vm.setSecDatepickerMinDate()"
is-open="vm.datePickerOpenStatus.dateDebut" />
vm.setSecDatepickerMinDate = function() {
// to change the minDate of the second datepicker
vm.dateOptions2.minDate = vm.mission.dateDebut;
// updating the current vm.mission.dateFinPrevisionnelle date to vm.mission.dateDebut.
// I don't want any previous date keep setting in vm.mission.dateFinPrevisionnelle
vm.mission.dateFinPrevisionnelle = angular.copy(vm.mission.dateDebut);
}
This plunker will give you more clear idea.
As you can see on docs (https://angular-ui.github.io/bootstrap/#/datepicker) minDate is a property of a config Javascript object passed in datepicker-options to datepicker directive.
I'm using ui.bootstrap.datepickerPopup with angular forms, but i also want to use it with ASP.Net html forms. If i use an MVC EditorTemplate as below
//Date.cshtml
#{
var prop = ViewData.ModelMetadata.PropertyName;
var required = ViewData.ModelMetadata.IsRequired;
<p class="input-group" >
<input type="text" uib-datepicker-popup="dd/MM/yyyy" id="#prop" name="#prop" ng-model="#prop" #required class="form-control" ng-required="true" is-open="#(prop)Open" init-date="new Date()" value="#ViewData.Model"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="#(prop)Open = !#(prop)Open"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
}
I can select a date and it correctly posts. However when i try and edit a form with an existing Date value, i cannot get it to pre populate the date. Can the init-date be passed inline? I've tried to test this in a plunkr here. http://plnkr.co/edit/glVfsqNVst11IxRvF3tJ?p=preview
You have to set it through datepicker-options as shown below.
<input type="text" uib-datepicker-popup="dd/MM/yyyy" id="#prop" name="#prop" ng-
model="#prop" #required class="form-control" ng-required="true" is-
open="#(prop)Open" datepicker-options="{minDate:'#ViewData.DateOptions'}" value="#ViewData.Model"/>
try this instead ... bootstrap 3 datepicker version 4. You can set the default value as well
https://eonasdan.github.io/bootstrap-datetimepicker/
code snippets from the site ...
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
</div>
</div>
datepicker init has a bug... see this forum..
https://github.com/angular-ui/bootstrap/issues/2331
I am unable to validate required bootstrap date field in angularjs using ng-required. Here is my code.
<div class="form-group col-md-12">
<label class="control-label col-md-4" style="text-align: left;" for="Date">Date:<span style="color:red;">*</span></label>
<div class="col-md-8">
<div class='input-group date' id='assignWODate'>
<input type='text' class="form-control" ng-model="woAssignedDate" bs-datepicker ng-required="woAssignedDate" ng-readonly="true" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
You cannot do validation ng-required while it is readonly
see fiddle
<form>
<label class="control-label col-md-4" style="text-align: left;" for="Date">Date:<span style="color:red;">*</span></label>
<div class="col-md-8">
<div class='input-group date' id='assignWODate'>
<input type='text' class="form-control" ng-model="woAssignedDate" bs-datepicker ng-required="woAssignedDateIsRequired" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<input type="submit" value="submit">
</form>
I have solved the above issue by including a forceParse: false attribute in my script tag and making it readonly field. No need for any other validation.
$('#assignWODate').datepicker({
autoclose:true,
format: 'mm/dd/yyyy',
todayHighlight: true,
startDate: dt,
forceParse: false
});