I am trying to save the value of selected date to db. But the ng-modal is not reflecting the selected date from the datepicker. Also none of the validation is working in this.
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.valid = false;
var today=new Date();
$scope.today = today.toISOString();
$scope.submit = function(){
$scope.valid = true;
}
$scope.close = function(){
$scope.valid = false;
}
addFlood =function(){
alert(JSON.stringify(addFlood));
}
});
//here is the html file for the datepicker
<!-- here is my html file -->
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>AngularJS Form Validation</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<style type="text/css">
.errortext {
color: red;
}
</style>
</head>
<body ng-controller="myController">
<div class="container-fluid">
<div class="row col-md-6 col-sm-6 col-xs-12">
<div class=" form-body">
<form role="form" name="myForm" novalidate>
<div class="form-group">
<label class="control-label "> Gate Open Date - Today:-> {{today | date:'yyyy-MM-dd'}} </label>
<div class="input-group date" date-picker>
<!-- <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="date"/>-->
<input type="text" id="date" name="gateOpenDate" class="form-control" placeholder="YYYY-MM-DD" [(ngModel)]="$parent.addFlood.gateOpenDate" min="{{today | date:'yyyy-MM-dd'}}" required autofocus date-picker-input/>
<div class="errortext" ng-show="myForm.gateOpenDate.$dirty && myForm.gateOpenDate.$invalid">
<span ng-show="myForm.gateOpenDate.$error.required">Gate Open Date is required</span>
<span ng-show="myForm.gateOpenDate.$error.date">Date Format Must Be MM-DD-YYYY</span>
<span ng-show="myForm.gateOpenDate.$error.min">Gate open Date should not be less than current date</span>
</div>
<div class="input-group-addon">
<i class="fa fa-calendar"> </i>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
ngModel :{{addFlood.gateOpenDate}}
<script src="angular.js"></script>
<script>
$(document).ready(function() {
var date_input = $('input[name="gateOpenDate"]'); //our date input has the name "date"
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'yyyy-mm-dd',
container: container,
todayHighlight: true,
autoclose: true,
startDate: new Date(),
})
})
function read() {
var value = element.find('input').val();
ngModel.$setViewValue(value);
}
</script>
</body>
</html>
ng-model $ - The date object. Must be a Javascript Date object. You may use the uibDateParser service to assist in string-to-object conversion.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am using bootstrap datepicker and I want to know is there a way to enable To Date Only after filling the From Date.Before that it will be disable. Both javascript or jQuery solutions are welcome.
my html
<div id="div2" style="display: none">
<div class="row m-t-5">
<div class="col-md-8">From Date </div>
<div class="col-md-4"><input type="text" class="form-control datepicker" id="leave_from" onblur="checkDate();" name="leave_from" placeholder="dd/mm/yyyy"></div>
</div>
<div class="row m-t-5">
<div class="col-md-8">To Date </div>
<div class="col-md-4"><input type="text" class="form-control datepicker" id="leave_to" onblur="checkDate();" name="leave_to" placeholder="dd/mm/yyyy"></div>
</div>
</div>
<script>
my javascript code
function checkDate(){
var error;
var $validator = $("#myform").validate();
var date1 = document.getElementById('leave_from').value;
var date = date1.substring(0, 2);
var month = date1.substring(3, 5);
var year = date1.substring(6, 10);
var FROM = new Date(year, month - 1, date);
var date2 = document.getElementById('leave_to').value;
var date1 = date2.substring(0, 2);
var month1 = date2.substring(3, 5);
var year1 = date2.substring(6, 10);
var TO = new Date(year1, month1 - 1, date1);
if(FROM > TO)
{
error = {leave_to:"Invalid Date!"};
$validator.showErrors(error);
$('#leave_to').val('');
}
}
Try with,
$(document).ready(function() {
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
}).on("changeDate", function (e) {
$('#datepicker2').prop('disabled',false);
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
});
$('#datepicker2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<div class="form-group">
<label for="datepicker1">Date</label>
<input type="text" class="form-control" id="datepicker1">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="datepicker2">Date2</label>
<input type="text" class="form-control" id="datepicker2">
</div>
</fieldset>
</div>
</div>
</div>
Hoe this will help you!! :)
Check this version of the code. Make sure that the first date must be set before heading to the second one. If someone is setting the first date, then the second and then delete the first, the second will also be cleared and disabled again.
$(document).ready(function() {
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
}).on("change", function (e) {
if($('#datepicker1').val() == ""){
$('#datepicker2').prop('disabled',true);
}else{
$('#datepicker2').val('');
$('#datepicker2').prop('disabled',false);
}
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
});
$('#datepicker2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<div class="form-group">
<label for="datepicker1">Date</label>
<input type="text" class="form-control" id="datepicker1">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="datepicker2">Date2</label>
<input type="text" class="form-control" id="datepicker2">
</div>
</fieldset>
</div>
</div>
</div>
The default value is given like this type="text" class="form-control" value="10:30AM" but it shows only 10:00 in clock.
here is the code:
this.form = $('<form><div class="row-form status-row-oth border-bottom-none"><div class="col-sm-2 day-month">'+ this.date+'</div><div class="col-sm-2 selectpicker-oth activity-list"><select id="activity_dd_'+this.row_id+'"></select></div><div class="col-sm-3"><input type="text" class="form-control" id="memo_'+this.row_id+'" name="memo" placeholder="Enter memo..."></div><div class="col-sm-3 start-time-oth"><div class="start-time"><label>Start Time</label><div class="input-group clockpicker"><input name="start_time" id="start_time_'+this.row_id+'" type="text" class="form-control" value="10:30AM"><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span></div></div><div class="start-time"><label>End Time</label><div class="input-group clockpicker"><input name="end_time" id="end_time_'+this.row_id+'" type="text" class="form-control" value="06:30PM"><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span></div></div></div><div class="col-sm-2 save-memo-btn save-btn" id="'+this.save_btn_id+'"> Save Memo</div></div></form>');
Anybody know the solution then please let me know. thanks
<html>
<head>
<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- ClockPicker Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.css" />
</head>
<body>
<!-- Or just a input -->
<input type="text" id="demo-input" class="form-control" value="10:30" />
<!-- jQuery and Bootstrap scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- ClockPicker script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.js"></script>
<script type="text/javascript">
$('#demo-input').clockpicker({
'default': DisplayTimeWithAMPM(),
donetext: 'Done',
twelvehour: true,
autoclose: false,
leadingZeroHours: false,
upperCaseAmPm: true,
leadingSpaceAmPm: true,
afterHourSelect: function() {
$('.clockpicker').clockpicker('realtimeDone');
},
afterMinuteSelect: function() {
$('.clockpicker').clockpicker('realtimeDone');
},
afterAmPmSelect: function() {
$('.clockpicker').clockpicker('realtimeDone');
}
});
function DisplayTimeWithAMPM() {
debugger;
time = $('#demo-input').val() + "AM";
debugger;
return time;
};
</script>
</body>
</html>
set
twelvehour: true
So that you can get AM and PM box in your timepicker.
Hope this will works for you! thank you
I have two text boxes which take date time value and the date time is setting from Bootstrap DateTimePicker. Now i want to subtract two date time values using JavaScript and save it in database?
Here is my code of date time pickers:
<script type="text/javascript">
$(function () {
$("#<%=datetimeCreated.ClientID %>").datetimepicker({
calendarWeeks: true,
useCurrent: false,
format: 'YYYY-MM-DD HH:mm:ss',
});
$("#datetimeCreated").on('dp.change', function (e) {
var date = $("#datetimeCreated").val();
});
});
$(function () {
$("#<%=datetimeClosed.ClientID%>").datetimepicker({
calendarWeeks: true,
format: 'YYYY-MM-DD HH:mm:ss',
});
$("#datetimeClosed").on('dp.change', function (e) {
var date = $("#datetimeClosed").val();
});
});
You can calculate the diff using moment.js (which is already required for datetimepicker) like this:
var diff = moment.duration(date1.diff(date2)).asDays();
Read more about .duration() and .diff() in the docs.
Read the code and let me know if something is not clear.
$(function () {
$('#datetimepicker1, #datetimepicker2').datetimepicker();
$('button').click(function(e) {
e.preventDefault();
var date1 = $('#datetimepicker1').data('DateTimePicker').date();
var date2 = $('#datetimepicker2').data('DateTimePicker').date();
var diff = moment.duration(date1.diff(date2)).asDays();
// here is what are you looking for:
console.log(diff);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.44/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<button class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>
I would like to disable key input and force the user to use the datepicker to add date to the input but I don't know how to do this.
In the current solution the user can select date but also type or erase the value directly in the input. I would like to disable the input, so the user can't type or erase anything, but still make the datepicker available.
Does angular ui-bootstrap already include this feature (checked the docs but didn't find any..) or do anyone have a solution for this?
This is a simpler version copy from the ui-bootstrap docs but its basically what I use in my site:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.dateOptions = {
formatYear: 'yy'
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.popup2 = {
opened: false
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerPopupDemoCtrl">
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</body>
</html>
Add a readonly attribute to the input and it will work as you expect :)
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.dateOptions = {
formatYear: 'yy'
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.popup2 = {
opened: false
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerPopupDemoCtrl">
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text"readonly class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</body>
</html>
Usually I use formName.inputName.$invalid to show error message input like this:
<input name="myInput" minlength="3" />
<span ng-show="myForm.myInput.$invalid">too short</span>
that won't be a problem.
But when I tried to validate checkbox,it seems difficult, there are the snippet at the end.
I want the effect that user should at least check one checkbox ,or you got the warning message.
How can I do that in a simple way at best?
// app.js
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$scope.formData = {};
$scope.formData.favoriteColors = [{
'id':'1',
'name':'red'
},{
'id':'2',
'name':'green'
},{
'id':'3',
'name':'blue'
}];
$scope.cList = [];
$scope.checkList = function(index){
if($scope.myForm.favoriteColors.$pristine){
$scope.cList.push($scope.formData.favoriteColors[index]);
}
else{
angular.forEach($scope.formData.favoriteColors,function(value,key){
if(value.checked){
$scope.cList.push(value.id);
}
});
}
console.log('cList:%o',$scope.cList);
};
});
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<!-- load up bootstrap and add some spacing -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body { padding-top:50px; }
form { margin-bottom:50px; }
</style>
<!-- JS -->
<!-- load up angular and our custom script -->
<script src="lib/angular/angular.min.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<h2>Angular Checkboxes and Radio Buttons</h2>
<form name="myForm">
<!-- NAME INPUT -->
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name">
</div>
<!-- MULTIPLE CHECKBOXES -->
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline" ng-repeat="color in formData.favoriteColors">
<input type="checkbox" name="favoriteColors" ng-model="color.checked" ng-click="checkList($index)" required>{{color.name}}
</label>
<span class="danger" ng-show="myForm.favoriteColors.$invalid">Please check one color at least</span>
</div>
<!-- SUBMIT BUTTON (DOESNT DO ANYTHING) -->
<button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
</form>
<!-- SHOW OFF OUR FORMDATA OBJECT -->
<h2>Sample Form Object</h2>
<pre>
dirty:{{ myForm.favoriteColors.$dirty }}
pristine:{{ myForm.favoriteColors.$pristine }}
valid:{{ myForm.favoriteColors.$valid }}
invalid:{{ myForm.favoriteColors.$invalid }}
error:{{ myForm.favoriteColors.$error }}
</pre>
</div>
</body>
</html>
Here is the live demo:http://jsbin.com/yigujoporu/1/
I use a count funtcion to update the number of checked checkbox.
Here is the live demo:http://jsbin.com/wowipi/4/edit?js,output
You can custom validation by another way
First, in your controller
$scope.cList = [];
$scope.checked = false;
$scope.checkList = function(index){
if($scope.myForm.favoriteColors.$pristine){
$scope.cList.push($scope.formData.favoriteColors[index]);
}
else{
if($scope.formData.favoriteColors[index].checked == true){
//checked
$scope.cList.push($scope.formData.favoriteColors[index]);
}else{
//uncheck
angular.forEach($scope.cList, function(value,key){
if($scope.formData.favoriteColors[index].id == value.id){
//remove it
$scope.cList.splice(key,1);
}
}
}
console.log('cList:%o',$scope.cList);
//new change
if($scope.cList.length >0) {
$scope.checked = true;
}else{
$scope.checked = false;
}
};
In your view
<div class="form-group">
<label class="checkbox-inline" ng-repeat="color in formData.favoriteColors">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors[$index].checked" ng-click="checkList($index)" required>{{color.name}}
</label>
<span class="danger" ng-show="!checked">Please check one color at least</span>
</div>