When i'm trying to locate 'datepicker' in protractor, i found every time a new date the instance/object of 'datepicker' created with same class='.datepicker' with incremented value of z-index, but i want to handle the single object or at least old object/instance should get destroyed to locate new object.
Following code/snippets will depicts the above explanation.
<!-- HTML CODE -->
<div class="form-group">
<label>Start Date</label>
<div class="input-group date form_datetime"
data-date- format="yyyy-mm-dd hh:ii"
data-link-field="dtp_input1">
<input class="form-control" size="16" ng-class="submitted:myScheduleForm.submitted}" ng-model="pollConfigInfo.startTime" readonly="" type="text" required=""/>
<span class="input-group-addon">
<i class="fa fa-times" style="cursor: pointer"></i>
</span>
<span class="input-group-addon">
<i class="fa fa-calendar" style="cursor: pointer"></i>
</span>
</div>
<input id="dtp_input1" value="" type="hidden"/>
</div>
JAVASCRIPT CODE:
<script>
$('.form_datetime').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
</script>
Protractor Snippet to select datepicker
selectStartTimeAndDate:
{
value : function()
{
var picker = element(by.css('.fa-calendar'));
picker.click();
browser.driver.sleep(2000);
var day = element(by.cssContainingText('div.datetimepicker-days > table.table-condensed > tbody > tr > td.day','1'));
day.click();
var hour = element(by.cssContainingText('span.hour_am','12'));
hour.click();
var min = element(by.cssContainingText('span.minute','12:00'));
min.click();
}
},
I'm not able to locate the 'picker' class due to this:
I got answer by making some changes in the protractor snippet like this:
var picker = element(by.css('.fa-calendar'));
picker.click();
browser.driver.sleep(2000);
var day = element.all(by.cssContainingText('div.datetimepicker-days > table.table-condensed > tbody > tr > td.day','1')).last();
day.click();
var hour = element.all(by.cssContainingText('span.hour_am','12')).last();
hour.click();
var min = element.all(by.cssContainingText('span.minute','12:00')).last();
min.click();
Related
I am trying to set a default value in my bootstrap datetimepicker, but it doe not set up with the default value.
var fromDate = "2022-08-24T11:24:00";
$('#inputFromDate').datetimepicker({
format: 'DD/MM/YYYY HH:mm',
useCurrent: false,
defaultDate: new Date(new Date(fromDate).setHours(23, 59))
});
And my input field looks like this
<div class="input-group" id="inputFromDate">
<input type='text' id="FromDate" name="FromDate" class="form-control valid" placeholder="From Date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Can anyone help with this?
defaultDate: "24/08/2022 11:24";
or
defaultDate: (new Date()).toLocaleString();
I have two fields of data entry, date of entry and date of out, which receive data using a datepicker. Is it possible to calculate the number of days, take into account the values of the date of entry and date of out, and save it in the field number of nights? How can I do this?
HTML
<div class="form-group">
<label class="col-md-4 control-label">Date Entry</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
<input name="DateEntry" id="DateEntry" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">DateOut</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
<input name="DateOut" id="DateOut" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">NºNights</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list-ol"></i></span>
<input name="Nights" class="form-control" type="text">
</div>
</div>
</div>
var start = $('#DateEntry').val();
var end = $('#DateOut').val();
// end - start returns difference in milliseconds
var diff = new Date(end - start);
// get nights
var days = diff/1000/60/60/24;
//set nights
$('#Nights').val(days)
This is client side code. You have to call this from document.load or may be onchange event of both entry and out dates.
Here's a similar approach with the hook to handle the text changing.
<html>
<head>
<title>Date Diff in Nights</title>
</head>
<body>
<div id="container">
<span class="input-group-addon"><i class="glyphicon glyphicon-time">entry</i></span>
<input name="DateEntry" id="DateEntry" class="form-control" type="text" >
<span class="input-group-addon"><i class="glyphicon glyphicon-time">out</i></span>
<input name="DateOut" id="DateOut" class="form-control" type="text" >
<span class="input-group-addon"><i class="fa fa-list-ol">nights</i></span>
<input name="Nights" id="Nights" class="form-control" type="text">
</div>
<script type="text/javascript">
var input = document.getElementById('DateEntry');
input.addEventListener('input', calcNights);
var input2 = document.getElementById('DateOut');
input2.addEventListener('input', calcNights);
function calcNights() {
try {
var nightsout = document.getElementById('Nights');
var element = document.getElementById('DateEntry');
var entryDate = new Date(element.value);
var out = document.getElementById('DateOut');
var outDate = new Date(out.value);
// Set to noon to avoid any DST errors
outDate.setHours(12, 0, 0);
entryDate.setHours(12, 0, 0);
var difference = outDate - entryDate;
var nights = Math.round(difference / 8.64e7);
if (isNaN(nights) || nights < 0) {
nightsout.value = '';
return;
}
nightsout.value = nights;
}
catch (ex) {
//ignore
}
}
</script>
</body>
</html>
Here is working code with your update of date format being DD/MM/YYYY:
jQuery
I highly suggest using Momentjs. It is user friendly and very powerful when working with dates & times! That is what my solution will use. Otherwise you will have to do a bunch of parsing in order to match your date format. Just make sure that your format doesn't change or else you will have to edit this!
$(document).ready(function() {
$('#TestOne').datetimepicker({
format: 'DD/MM/YYYY HH:mm:ss',
});
$('#TestTwo').datetimepicker({
format: 'DD/MM/YYYY HH:mm:ss',
});
$("#DateOut").blur(function() {
var str1 = $("#DateEntry").val();
var str2 = $("#DateOut").val();
var dateEntry = moment(str1, "DD/MM/YYYY");
var dateOut = moment(str2, "DD/MM/YYYY");
var range = dateOut.diff(dateEntry, 'days');
$("#NightsBetween").val(range);
});
});
UPDATED FIDDLE
Here is a working JSFiddle
Hope this helps
I have 2 datepickers which use bootstrap and knockout to bind data.
The below is my html template for datepickers and I have added the options
<div class="clearfix form-inline marginBottom10px row col-md-12 fontWeightNormal" role="form">
<span class="col-md-2 col-xs-12 pull-left paddingLeft0px">
<label class="control-label paddingTop5px" for="datespanFromfilter">
From
</label>
</span>
<div class="form-group col-md-3 paddingLeft0px paddingRight0px">
<span class="date input-group" id="datespanFromfilter" data-date-format="DD/MM/YYYY" data-bind="datetimepicker :dateSpanFrom, datePickerOptions : {todayBtn : true, pickTime: false, format: 'DD/MM/YYYY', maxDate : new Date(), orientation: 'left'}, enable: !refreshingPage()">
<input class="form-control" id="datespanFromfilterinput" placeholder="DD/MM/YYYY" data-bind="value: dateSpanFrom, enable: !refreshingPage()" disabled />
<span class="input-group-addon" data-bind="enable: !refreshingPage()">
<span class="glyphicon glyphicon-calendar" data-bind="enable: !refreshingPage()"></span>
</span>
</span>
</div>
<div class="col-md-1 ">
<label class="control-label paddingLeft0px paddingTop5px" for="datespanTofilter">
To
</label>
</div>
<div class="form-group col-md-3 paddingLeft0px paddingRight0px">
<span class="date input-group" id="datespanTofilter" data-date-format="DD/MM/YYYY" data-bind="datetimepicker : dateSpanTo, datePickerOptions : {todayBtn : true, pickTime: false, orientation: 'left', format : 'DD/MM/YYYY', maxDate : new Date()}, enable: !refreshingPage()">
<input class="form-control" placeholder="DD/MM/YYYY" data-bind="value: dateSpanTo, enable: !refreshingPage()" disabled />
<span class="input-group-addon" data-bind="enable: !refreshingPage(), disabled: !refreshingPage()">
<span class="glyphicon glyphicon-calendar" data-bind="enable: !refreshingPage()"></span>
</span>
</span>
</div>
</div>
This is how I handle the Datepicker in knockout
ko.bindingHandlers.datetimepicker = {
/// <summary>The customized event handler datepicker.</summary>
init: function (element, valueAccessor, allBindingsAccessor) {
allBindings = allBindingsAccessor();
var options = allBindings.datePickerOptions || {};
ko.utils.extend(options, allBindings.datePickerOptions)
$(element).datetimepicker(options).on("change.dp", function (evntObj) {
self.errorMessage("");
var observable = valueAccessor();
if (evntObj.timeStamp !== undefined) {
var picker = $(this).data("DateTimePicker");
var d = picker.getDate();
if (d != null && d != '') {
observable(d.format(picker.format));
}
else {
observable(moment(settings.defaultUtcDate).format("DD/MM/YYYY"));
}
}
});
},
update: function (element, valueAccessor) {
self.errorMessage("");
var thisFormat = 'DD/MM/YYYY';
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).data("DateTimePicker").setDate(moment(value).format(thisFormat));
}
};
but in options only Format and pickTime seems to be working fine, I also need to show TodayButton and correct the orientation.
But these to options are not working if i change the value
Will someone help me to solve the issue
I've been trying out this AngularJS package (https://www.npmjs.com/package/angularjs-datepicker) and was struggling to use the date-set property. In my example I have 2 calendars, 1 that should display yesterdays date and 1 that should display todays date. Could someone please help me set these dates?
Datepicker:
<div class="datepicker-container">
<div class="date-from">
From:
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{}}" class="date-picker">
<div class="input-group">
<input class="form-control" placeholder="Choose a date"/>
<span class="input-group-addon" style="cursor: pointer">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</datepicker>
</div>
<div class="date-too">
To:
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{}}" class="date-picker">
<div class="input-group">
<input class="form-control" placeholder="Choose a date"/>
<span class="input-group-addon" style="cursor: pointer">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</datepicker>
</div>
</div>
Setting the date:
$scope.dateFrom = new Date();
$scope.dateTo = new Date();
var date = new Date();
$scope.today = date; //to show today's date
date.setDate(date.getDate() - 1); //to get yesterday's date, Ref:http://stackoverflow.com/questions/5511323/javascript-yesterday
$scope.yesterday = date;
Using date-set:
From the documentation linked above, https://www.npmjs.com/package/angularjs-datepicker . I see you have to pass date object as string to attribute date-set , hence convert the date object to string.
//js
var date = new Date();
$scope.today = date.toString(); //to show today's date
date.setDate(date.getDate() - 1); //to get yesterday's date, Ref:http://stackoverflow.com/questions/5511323/javascript-yesterday
$scope.yesterday = date.toString();
//html
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{today}}" class="date-picker">
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{yesterday}}" class="date-picker">
see this plnkr http://plnkr.co/edit/mDHliPweKoUNOAmVv5oo?p=preview
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<pre>Raw date is: <em>{{dt}}</em></pre>
I solved it in a simpler way, just activated the ng-if attribute in the div before the datepicker
pagamentoService.getCronograma(moment().year()).then(function (resp){
var cronogramas = resp.data;
console.log('99',resp.data);
cronogramas.forEach(function (obj){
vm.datasBloqueadas.push(moment(obj.data_limite).format('YYYY-M-D'));
});
}).catch(function (err){
console.log(err);
});
<div class="col-md-4 mt-1">
<label>data vencimento</label>
<div ng-if="Beneficios.datasBloqueadas.length > 0" class="input-control full-size text">
<datepicker date-format="yyyy-MM-dd" date-disabled-dates="{{Beneficios.datasBloqueadas}}" >
<input id="dataVencimento" class="required" type="date" date-converter ng-model="Beneficios.view.data_filter"
data-role="hint" data-hint-background="bg-orang-e"
data-hint-color="fg-white" data-hint-position="bottom" data-hint-mode="2">
<button class="button" onclick="$('#dataVencimento').focus();">
<span class="mif-calendar"></span>
</button>
</datepicker>
</div>
I have situation where I would like user to select start date and restrict the end date to either selected start date of the day next to selected start date.
How can I do this on boostrap datepickers for start and end date
Download bootstrap-datepicker.js from here
HTML Code
<div class="col-md-6 ">
<div class="form-group">
<label>Start Date</label>
<div class='input-group date'>
<input type='text' id='datecheckin1' class="form-control" placeholder="DD/MM/YYYY" data-date-format="dd/M/yyyy" readonly />
<span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="form-group">
<label>End Date</label>
<div class='input-group date'>
<input type='text' id='datecheckout1' class="form-control" placeholder="DD/MM/YYYY" data-date-format="dd/M/yyyy" readonly />
<span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
Java Script code
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin2 = $('#datecheckin1').datepicker({
onRender: function (date) {
//Here we restrict the date date of start datepicker
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
var newDate = new Date(ev.date);
newDate.setDate(newDate.getDate() + 1);
//Here we set the date of end datepicker
checkout2.setValue(newDate);
checkin2.hide();
$('#datecheckout1')[0].focus();
}).data('datepicker');
var checkout2 = $('#datecheckout1').datepicker({
onRender: function (date) {
//Here we restrict the date of enddatepicker
return date.valueOf() <= checkin2.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function () {
checkout2.hide();
}).data('datepicker');
Hope this will help you.
$('#dtpicker').datepicker({
endDate: '-1d'
}).on(....