I have been trying to make my protractor test on a datepicker work.
I have the following in my html file
<div fxFlex>
<mat-datepicker #pickerBirthdate></mat-datepicker>
<input matInput
style="visibility: hidden;"
[min]="minBirthdate"
[max]="maxBirthdate"
[matDatepicker]="pickerBirthdate"
placeholder="Fecha de nacimiento"
[(ngModel)]="registry.data.fechaNac"
name="fechaNac">
</div>
And the following on my spec file
expect(page.getElementByClass('.date-select-picker'));
// get today's date
let today: any = new Date();
let dd: any = today.getDate();
let mm: any = today.getMonth() + 1; // January is 0!
const yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if ( mm < 10) {
mm = '0' + mm;
}
today = mm + '/' + dd + '/' + yyyy;
page.sleep();
page.getElementByClass('.date-select-picker').sendKeys(today);`
The problem is, it doesn't show up any date it just looks raised.
I've read this threads but I haven't been able to make it work, I don't know if it's due to my angular version.
How to test a Angular js date picker from Protractor
https://github.com/angular/material/issues/10404
Thanks in advance and good day
I had a similar problem with the datepicker, this is how I select a date in the future:
/// click the datepicker
element(by.css('.mat-datepicker-toggle')).click();
/// opens the table with years
element(by.css('.mat-calendar-arrow')).click();
/// select year, month and day
element(by.cssContainingText(".mat-calendar-body-cell-content", "2040")).click();
element(by.cssContainingText(".mat-calendar-body-cell-content", "DEC.")).click();
element(by.cssContainingText(".mat-calendar-body-cell-content", "31")).click();
use the harness:
const harnessLoader = ProtractorHarnessEnvironment.loader();
const matDatepickerToggleHarness = await harnessLoader.getHarness<MatDatepickerToggleHarness>(
MatDatepickerToggleHarness.with({selector: 'mat-datepicker-toggle'})
);
await matDatepickerToggleHarness.openCalendar();
Related
In my screen the Kendo UI Calendar used behaves odd.
When i come on to editing the screen and click on Calendar field if the date is past date (disabled on calendar) then the existing date value gets cleared, even though i am not making any change.
How can i persist the date value for the past dates that are disabled in the calendar.
It would be helpful to give sample code for the fix.
The same we tried with HTML calendar and JQuery Calendar and the behavior is same as of Kendo UI Calendar.
The code used is in javascript
$('#txtWFITaskStartDate').change(function (e) {
e.preventDefault();
e.stopImmediatePropagation();
var labelName = $(this).data('validatelabel');
var CurrentId = $(this).attr('id');
var startDate = $("#" + CurrentId).val();
var duration = $('#txtWFITaskDuration').val();
if ($('#' + CurrentId).val() === "") {
varErrorClassName = 'errmsgStartDate';
DisableTaskEditControls();
$('#StartDate').after('<span class="text-danger ' + varErrorClassName + '">' + Web_IsRequired.replace("{0}", labelName) + '</span>');
}
else {
$('.errmsgStartDate').remove();
$('.errmsgEndDate').remove();
EnableTaskEditControls();
var endDate = CalculateEndDate(duration, startDate);
$('#txtWFITaskEndDate').val(endDate);
$('#EndDate').datepicker('setDate', new Date(endDate));
endDate = $('#txtWFITaskEndDate').val();
if (endDate !== "") {
EnableTaskEditControls();
} else {
varErrorClassName = 'errmsgEndDate';
$('#EndDate').after('<span class="text-danger ' + varErrorClassName + '">' + Web_IsRequired.replace("{0}", "End date") + '</span>');
DisableTaskEditControls();
}
}
});
Below is the screenshot of the dates displayed on modal popup view (MVC)
As the Start Date is past date the control displays in disabled mode. When focus to the Start Date control and focus out from it. The past date gets cleared. I want to hold the existing value, until user changes the date else the same value has to persist in the Start date text box.
I'm trying to get the current day/month/year in a React Native App. I am new at this, so I have many doubts about the implementation.
I tried to follow the following solution, but does not work for me:
currentDay: new Date(),
console.log('Date:'+this.state.currentDay ,);
console.log('Day: '+this.state.currentDay.getDay() , 'Month: ' + this.state.currentDay.getMonth(), 'Year :'+ this.state.currentDay.getYear());
Most easiest way to install npm install moment --save
Moment is a JavaScript date and time manipulation library for parsing, validating, manipulating, and formatting dates.
You can simply import it in your code:
import moment from 'moment';
var now = moment().format();
if you just want current date and output in your desired format, you can use moment with format function
var currentDate = moment().format("DD/MM/YYYY");
Result
30/03/2019
You can change date format according to your requirement using Moment library
You can refer the following documents read about how to use moment and what function they will provide
https://momentjs.com
https://devhints.io/moment
Install the moment package: npm i moment
import moment from 'moment';
var dateAndTime= moment().format("DD/MM/YYYY HH:mm:ss")
output: 15/11/2019 15:33:23
var date= moment().format("DD/MM/YYYY")
output: 15/11/2019
(this output is only for current date, of course).
const onPressDateValidation = () =>{
const currentDate ='2022-02-20'
// const currentDate ='2022-02-25'
// const currentDate ='2022-02-26'
const fromDate ='2022-02-20'
const toDate = '2022-02-25'
console.log("Umesh_______1 ", currentDate);
console.log("Umesh_______2 ", fromDate);
if ( moment(currentDate).isSameOrAfter(fromDate) ) {
if( moment(currentDate).isSameOrBefore(toDate)){
alert("Show your Ad either it's Banner Ad or Video Ad")
}else{
alert(" Ad is Expired")
}
} else {
alert("Ad is not started yet")
}
}
You need to add a getDate() function after newDate() .. i.e. var date = new Date.getDate()
The following code example (which should clarify implementation purposes) is illustrated on AboutReact.com, where you can run the code online.
import React, { Component } from 'react';
import { StyleSheet, View, Alert, Text } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
//default value of the date time
date: '',
};
}
componentDidMount() {
var that = this;
var date = new Date().getDate(); //Current Date
var month = new Date().getMonth() + 1; //Current Month
var year = new Date().getFullYear(); //Current Year
var hours = new Date().getHours(); //Current Hours
var min = new Date().getMinutes(); //Current Minutes
var sec = new Date().getSeconds(); //Current Seconds
that.setState({
//Setting the value of the date time
date:
date + '/' + month + '/' + year + ' ' + hours + ':' + min + ':' + sec,
});
}
render() {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
fontSize: 20,
}}>
Current Date Time
</Text>
<Text
style={{
fontSize: 20,
marginTop: 16,
}}>
{this.state.date}
</Text>
</View>
);
}
}
Obviously, the style is flexible and you could omit the time element of the code sample (but it may be useful to other users)..
Hope this helps
I already have functioning code in jQueryUiDatepicker that disables Fridays and Saturdays and all previous days (plus 2 days). My issue is trying to add 2 specific dates to this existing Datepicker code that will also disable these dates.
This is my existing code on starting line 92 in jQueryUiDatepicker:
beforeShowDay: function(date) {
var show = true;
if(date.getDay()==5||date.getDay()==6) show=false
return [show];
},
beforeShow: function(){
var dateTime = new Date();
var hour = dateTime.getHours();
//If Hour is greater or equals to 8AM
if(hour >= 08){
//Disable all past days including tomorrow and today
$(this).datepicker( "option", "minDate", "+2" );
}
},
I am trying to disable 18th and 19th October 2017 and failing, this is the code I have added directly underneath the above code:
beforeShowDay: var array = ['18/10/2017', '19/10/2017']
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [ array.indexOf(string) == -1 ]
},
My question is how can I disable all previous dates, all Fridays and Saturdays and these 2 dates in the October?
Note# This coding has to be done in jquery.ui.datepicker, not a script in html
Hope this helps
use inArray instead of indexOf and you can also disable all previous dates using minDate
var array = ["18/10/2017", "19/10/2017"];
$(function() {
$('input').datepicker({
minDate: new Date(),
beforeShowDay: function (date) {
$thisDate = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
var day = date.getDay();
if ($.inArray($thisDate, array) == -1&&day!=5&&day!=6) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
});
});
DEMO
I can set the dateValue attribute in the Date Pickers, but unfortunately the user can still enter a date before it.
Is there any way I can set an minimum (and maximum) date on the datepicker?
Regards
Adam
Unfortunately until the current Version 1.36 of SAPUI5 the control sap.ui.commons.DatePicker does not provide such functionalities. But you still can handle this yourself with the change event.
var minDate = "12121991";
var maxDate = "12122020";
var oDatePicker = new sap.ui.commons.DatePicker();
oDatePicker .attachChange(function(oEvent) {
if(oEvent.getParameter("invalidValue") || this.getYyyymmdd() < minDate || this.getYyyymmdd() > maxDate) {
oEvent.oSource.setValueState(sap.ui.core.ValueState.Error);
} else{
oEvent.oSource.setValueState(sap.ui.core.ValueState.None);
}
});
I would like to change the date to current date in the form for twitter bootstrap. I would like it to change it automatically without me changing it manually.
Code:
<label>Created:</label>
<input type="text" value="11/06/2012" id="datepicker"/>
<br/><br/>
I would like the value "06/11/2012" to be automatically changed.
Well, you can use JavaScript:
var date = new Date();
document.getElementById('datepicker').value = date.getDate() + '/' + date.getMonth() + '/' + date.getFullYear();