I want end date should not be greater then start date. Eg: start date is 24/4/2017 and end date is 23/4/2017 in such scenario it should not allow to search it should be disable the calendar date 23/4/2017. Only End date 24/4/2017 onwards it should be enable
//this are the code in controller
$scope.formats = ['dd/MM/yyyy', 'dd-mm-yyyy', 'yyyy/mm/dd', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.dateOptions = {
datepickerMode: "'year'",
startingDay: 1
};
$scope.max_date = new Date();
//HTML code
<div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 5px;">
<p class="input-group margin_zero calGroup">
From<input type="text" class="form-control" name="dob" uib- datepicker-popup="{{format}}" ng-model="ordersearch.startDateFrom"
is-open="opened" ng-click="open()" datepicker-options="dateOptions" close-text="Close" max-date="{{max_date}}" required/>
<span class="input-group-btn newCalIcon">
<button type="button" class="btn btn-default calendarIcon" ng-click="open()" >
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-6" style="padding-left: 5px;">
<p class="input-group margin_zero calGroup">
To<input type="text" class="form-control" name="dob" uib-datepicker-popup="{{format}}" ng-model="ordersearch.startDateTo" is-open="opened1" ng-click="open1()" datepicker-options="dateOptions" close-text="Close" max-date="{{max_date}}" min-date="{{min_date}}"/>
<span class="input-group-btn newCalIcon">
<button type="button" class="btn btn-default calendarIcon" ng-click="open1()" >
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
This is the code. I need to validate end date
You should make use of max-date and min-date directive provided by bootstrap datepicker.
<input type="text" readonly="" uib-datepicker-popup="dd-MM-yyyy" min-date="minEndDate" max-date="maxEndDate" ng-model=""placeholder="DD-MM-YYYY"></input>
You can bind any dates from your $scope to these fields and the calendar automatically restricts the date after and before them respectively. For ex:
$scope.minDate = new Date(); //this restrict any older date from today
$scope.maxDate = new Date ( someFutureDateObject);
EDIT: If you are not concerned about max-date you can just skip it. Its not mandatory to have a max-date.
Hope this helps
Related
I am trying to display age on the text field when I change the date picker. When I choose a date the value doesn't show up on the age text field. How can I display the age when I pick a date? Is there a better way of doing this?
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-id-card-o"></i> </span>
</div>
<input name="age" class="form-control" placeholder="Age" type="text" id="age">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-birthday-cake"></i> </span>
</div>
<input name="birthDate" class="form-control" type="date" id="birthDate">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
$(document).ready(function() {
$(document).on('change', '.birthDate', function() {
var a = moment($(this).val(), "MM/DD/YYYY").month(0).from(moment().month(0));
$('#age').val(a);
});
})
You have a couple of issues. Firstly, the element has no birthDate class, it's an id. As such the selector needs to be #birthDate, not .birthDate.
Secondly, the format of the date will depend on the user's locale. For example, mine displays in YYYY-MM-DD format. As such your explicit instruction to momentJS to parse the date in DD/MM/YYYY format caused it to be read incorrectly. You're better off not specifying the format and letting momentJS determine for itself.
With those issues addressed, try this:
jQuery($ => {
$(document).on('change', '#birthDate', function() {
var a = moment($(this).val()).month(0).from(moment().month(0));
$('#age').val(a);
});
})
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-id-card-o"></i> </span>
</div>
<input name="age" class="form-control" placeholder="Age" type="text" id="age">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-birthday-cake"></i> </span>
</div>
<input name="birthDate" class="form-control" type="date" id="birthDate">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>
I am using angular with ng-bootstrap date component. Datepicker working well. But when I select today date shows as 2018-11-6.
I need change format like 2018-11-06 (leading zero). How can I change it?
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="mydate" [(ngModel)]="bankDetailDate" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary fa fa-calendar" (click)="d.toggle()" type="button"></button>
</div>
</div>
I'm using http://www.malot.fr/bootstrap-datetimepicker/ and I have this snippet:
<div class="input-group date form_datetime">
<input type="text" class="form-control" name="startDateTime" id="startDateTime">
<input type="hidden" id="startDateTime_mirror" name="startDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
Please notice that the input[type=text] and the input[type=hidden] fields have the same id, but the latter with a _mirror suffix
Since I have a couple of datepickers in a page (i.e. also endDateTime and endDateTime_mirror), I can't use a 'fixed' mirror field id as in datetimepicker's demo page
EDIT: an example of two datetimepickers
<div class="input-group date form_datetime">
<input type="text" class="form-control" name="startDateTime" id="startDateTime">
<input type="hidden" id="startDateTime_mirror" name="startDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
<div class="input-group date form_datetime">
<input type="text" class="form-control" name="endDateTime" id="endDateTime">
<input type="hidden" id="endDateTime_mirror" name="endDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
I tried this, but it doesn't work (even if the 'generated' name is right, startDateTime_mirror (I can see it in console.log()):
$(".form_datetime").datetimepicker({
autoclose: true,
format: "dd MM yyyy hh:ii",
linkField: ($(this).find('.form-control').prop('id')) + '_mirror',
linkFormat: "yyyy-mm-dd hh:ii"
})
Any help, please? Thanks
Why don't you try to put each couple of datepicker in a separate div that you would describe with an id:
<div class="input-group date form_datetime" id="startBlock">
<input type="text" class="form-control" name="startDateTime" id="startDateTime">
<input type="hidden" id="startDateTime_mirror" name="startDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
<div class="input-group date form_datetime" id="endBlock">
<input type="text" class="form-control" name="endDateTime" id="endDateTime">
<input type="hidden" id="endDateTime_mirror" name="endDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
<script type="text/javascript">
$("#startBlock").datetimepicker({
format: "dd MM yyyy - hh:ii",
linkField: "startDateTime_mirror",
linkFormat: "yyyy-mm-dd hh:ii"
});
$("#endBlock").datetimepicker({
format: "dd MM yyyy - hh:ii",
linkField: "endDateTime_mirror",
linkFormat: "yyyy-mm-dd hh:ii"
});
</script>
I am using date and time picker that not used for getting current date and time instead that is to for user want to select some date and time so for...
This is my code for date and time picker.
<form class="form-horizontal" id="myForm">
<label for="from" class="col-sm-1 col-md-1 col-xs-3 control-label">From:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"> <i
class="fa fa-time"></i>
</span> <input type="text" name="from_time" id="from_time"
class="form-control" placeholder="" readonly="" />
</div>
</div>
<label for="to" class="col-sm-1 col-md-1 col-xs-3 control-label">To:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-time"></i> </span> <input type="text"
name="to_time" id="to_time" class="form-control" placeholder=""
readonly="">
</div>
</div>
<label for="date" class="col-sm-1 col-md-1 col-xs-3 control-label">Date:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-cal"></i> </span> <input type="text"
name="date" id="date" class="form-control" placeholder="" />
</div>
</div>
<input type="button" onclick="getresult()" value="Submit">
</form>
</div>
</div>
</div>
and my script code for date and time picker
<script type="text/javascript">
$(document).ready(function(){
$('#from_time').timepicker({showMeridian: false});
$('#to_time').timepicker({showMeridian: false});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#date').datepicker({ dateFormat: 'mm-dd-yy' }).datepicker("setDate", new Date());
});
</script>
and here is how i try to get that result of date and time from text box id
function getresult(){
var Date=$("date").val();
var From_Time=$("from_time").val();
var To_Time=$("to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
but this gives result like "undefined" "undefined"..in don't know what to do plzzz help me out from this
You have to use ID selector # sign to get value.
function getresult(){
var Date=$("#date").val();
var From_Time=$("#from_time").val();
var To_Time=$("#to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
Manual
I'm not able to bind time which I'm setting in the controller like this
$scope.info.startTime="12:10:03";
This is my time picker control in HTML
<span class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" tabindex="5"
ng-model="info.startTime" placeholder="hh:mm"
is-open="datepickerOpened1"
close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="openStartTime($event, 'time')">
<i class="glyphicon glyphicon-time"></i>
</button>
<div dropdown is-open="timepickerOpened1">
<span class="dropdown-menu" role="menu">
<timepicker ng-model="info.startTime" show-meridian="true"></timepicker>
</span>
</div>
</span>
</span>
Reference:Angular Bootstrap
You need to set date object in ng-model instead of string.
Change
$scope.info.startTime="12:10:03";
To
var d = new Date();
d.setHours(12);
d.setMinutes(10);
$scope.info.startTime=d;