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
Related
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 have a form named myform & I'm trying to set ng-disabled with this code:
ng-disabled="myForm.$invalid"
but both myForm.$invalid & myForm.$valid are undefined. What is the issue exactly? I checked in console & myForm is correctly set to the form.
UPDATE
<form id="commissionForm" name="myForm" class="form-horizontal">
<div class="form-group">
<div class="col-sm-8 col-md-8 col-lg-8 col-xs-8" />
<div class="col-sm-2 col-md-2 col-lg-2 col-xs-2" >
<button name="NextBtn" id="NextBtn"
ng-class="{disabled:commissionForm.$invalid}"
ng-disabled="myForm.$invalid"
ng-click="nextBtnClicked()" class="btn btn-primary"
>Next</button>
</div>
</div>
</form>
You need to change 'myForm' to 'commisionForm' to make it work. Also, your form needs to have at least one element that binds to the model, using ng-model. Otherwise, validation will not fire.
Working code sample:
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<form id="commissionForm" name="commissionForm" class="form-horizontal">
<div>form $valid: {{commissionForm.$valid}}</div>
<div>form $invalid: {{commissionForm.$invalid}}</div>
<div>An input box with max length 5, to make the form invalid:</div>
<input ng-maxlength="5" ng-model="somemodel"/>
<div class="form-group">
<div class="col-sm-8 col-md-8 col-lg-8 col-xs-8" />
<div class="col-sm-2 col-md-2 col-lg-2 col-xs-2">
<button name="NextBtn" id="NextBtn" ng-class="{disabled:commissionForm.$invalid}" ng-disabled="commissionForm.$invalid" ng-click="nextBtnClicked()" class="btn btn-primary">Next</button>
</div>
</div>
</form>
</div>
If you want to utilize angular's built in form validation check out angular's documentation on the form directive:
https://docs.angularjs.org/api/ng/directive/form
<form name="myForm" ng-controller="FormController" class="my-form">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
<code>userType = {{userType}}</code><br>
<code>myForm.input.$valid = {{myForm.input.$valid}}</code><br>
<code>myForm.input.$error = {{myForm.input.$error}}</code><br>
<code>myForm.$valid = {{myForm.$valid}}</code><br>
<code>myForm.$error.required = {{!!myForm.$error.required}}</code><br>
</form>
Take note that the form name attribute should map to the angular validation services. Looks like you didn't change that in your code.
myForm is undefined because according to your code the name of your form is commissionForm not myForm. From the code you provided.
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
});
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.