I have a link to an SSRS report in my .cshtml page:
<div class="col-md-8">
<a href="http://xxx.xx.xx.x/ReportServer/Pages/ReportViewer.aspx?%2fCompany_Reporting%2fpayr0001&rs:Command=Render&StartDate=01/09/2017" target="_blank" >Timesheet Status Report</a>
</div>
I need to pass the value from my date control as a parameter as opposed to the hard-coded date above:
<div class="form-group">
<input type="date" class="form-control" id="datefrom">
</div>
I have tried appending an onclick=myfunction() to the url to add the date value, but can't get it to work.
function getStartDate() {
return document.getElementById("datefrom").value;
}
Any help would be much appreciated.
Cheers.
Create the href of the anchor tag on the date change attribute. Build the href on the go.
$('#datefrom').change(function(){
$('#IdOfAnchorTag').attr('href','http://xxx.xx.xx.x/ReportServer/Pages/ReportViewer.aspx?%2fCompany_Reporting%2fpayr0001&rs:Command=Render&StartDate=' + $('#datefrom').val() );
});
Check the strings accordingly..
This is what you're trying to do, as far as I can tell (duplicate question?):
append to url and refresh page
To get the date in the correct format, you'll have to do something like the following in the body of your function:
new Date($('input[type=date]').val()).toLocaleFormat();
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleFormat
Also, you're probably going to want to use 'onblur'/the blur event for the date input, or wire up your event handler function to a new button specifically for that purpose. This is because onclick/the click event will fire as soon as you click on the date input (which could open some sort of calendar widget, depending on the browser and browser version).
Before you pass your date value to the url, You try converting your date to dd-MM-yyyy or MM-dd-yyyy instead of dd/MM/YYYY.
Because I think that when the url will misunderstand "/", so you should replace with "-".
Then if necessary, you can convert back to the old format.
Related
Goal: Attempting to automate a calendar on Chrome using Selenium(Python + behave).
The issue: The date is only being set when actually clicked through the calendar. Passing a value via JavaScript is not working.
Note: According to docs the inputs should allow users to send input in with keys by default but that doesn't even work. It does not accept keyboard input at all.
Problem Walkthrough
This is the original input fields. The div class they are contained in is inside a #shadow-root
(open):
Ignoring the Python. I will try and change the values with some simple JavaScript in the Chrome Dev Tools console:
x = document.querySelector("#class > something").shadowRoot.querySelector("div > div > input[type=date]:nth-child(5)") #Select input for From Date
x = "2022-05-12"
y = document.querySelector("#class > something").shadowRoot.querySelector("div > div > input[type=date]:nth-child(5)") #Select input for To Date
y = "2022-06-12"
After sending in the new values and clicking search. It does not recognize the values as being entered:
However, when manually selected through the calendar:
The dates are accepted and as inputs:
The HTML for the calendar is:
<input type="date" min="2022-01-01" max="2022-07-19">
Clearly. The JavaScript alone does not seem to be enough. If you use the same method above on this calendar it will work. However, on the calendar I am attempting this JS method will not work for some reason. Also, I cannot get Selenium to click and open the calendar on its own for some odd reason.
Solution: Manually trigger the event (Source)
let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be
dispatchEvent() Documentatio
Event() Documentation
I'm trying to get a date directly from an HTML calendar input, with a simple console log (for testing purposes), without the need for a button.
I've tried a few variations of the code below:
<div class = "Comparisons_Wrapper">
<input type="date" class="DateSelector" id = "DateSelector" onclick="getDate()">
</div>
<script>
function getDate(){
var date = document.getElementById("DateSelector").value;
console.log(date)
}
</script>
I was hoping the onclick part of the div, would call the function on clicking the date from the calendar, but instead calls the function on immediately clicking the input box to open up the calendar, so you initially get an empty console.log the first time, and then when you click on the box again, you get the date you initially entered. I guess this assumption was naïve of me.
Any assistance would be appreciated,
Thanks
James
What you want to do in this case is to add an event listener to the input's change event.
var dateInput = document.getElementById("DateSelector");
dateInput.addEventListener('change', function(event) {
console.log(event.target.value)
});
<div class = "Comparisons_Wrapper">
<input type="date" class="DateSelector" id = "DateSelector">
</div>
Use events like onchange, as follow:
function handler(e){
alert(e.target.value);
}
<input type="date" class="DateSelector" id="DateSelector" onchange="handler(event);">
I have developed a custom Web Part on SharePoint 2013.
I'm using the default date picker control. I also have an array with all the holidays in Italy, and I would like to "validate" the selected date just after the user clicks on the datetimepicker. Validate in my case should be print an alert message if the selected date is a holiday.
I've tried this code, but it is not firing:
$(".ms-picker-table a").on("click",function() {
console.log("ON CLICK DATEPICKER");
/* DATES CHECK */
[...]
});
ms-picker-table is the class of the date picker control.
a elements inside this table already contain code in href attribute:
javascript:ClickDay('01\u002f06\u002f2017')
I don't know if it can create problems.
Also parent td element of each link has this code:
onclick="javascript:ClickDay('01\u002f06\u002f2017')"
So is there a way to correct my code to check dates when a user select a value from datepicker?
onBlur event should do the job
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="dateField">
<script>
$("input[id*='dateField']").blur(function(){
var dateValue=$("input[id='dateField']").val();
console.log(dateValue);
// check array to see if the date is in the Array
});
</script>
I am trying to download a log that is filled by date range, so I fill out the form with the dates I want and then when you click the "Export Call Logs" button it just automatically triggers a CSV file download in a regular browser.
How do I save that file that should be automatically triggered when 'clicking' the same button using Casper?
casper.then(function(){
console.log("Filling out form and getting CSV");
this.evaluate(function(){
document.getElementsByName("startdate")[0].value="08/30/2016";
document.getElementsByName("enddate")[0].value="08/30/2016";
document.getElementsByName("s1")[0].click();
});
});
The button HTML is as follows:
<td><input type="submit" name="s1" value="Export Call Logs"></td>
Also, as a side note, obviously I don't want to manually input the date, kinda defeats the point of a program in a way, I am most familiar with Pyhon, is their some sort of equivalent to the DateTime module or someway I can use Casper to get the previous days date and store as a Var to input accordingly? i.e todays date is 08/31/2016 I would want to input the previous day, 08/30/2016.
EDIT:
Tried implementing the example commented below.
casper.then(function(){
console.log("Filling out form and getting CSV");
this.page.onFileDownload = function(status){console.log("onFileDownload(' + status + ')");
return "downloadedfile.csv"; };
this.evaluate(function(){
document.getElementsByName("startdate")[0].value="08/30/2016";
document.getElementsByName("enddate")[0].value="08/30/2016";
document.getElementsByName("s1")[0].click();
});
});
You can try download() function, you can find more information here.
There is an example.
I have to use bootstrap-datepicker.js for my project but it doesn't work well with mask.
problem 1:
It you you are tabbing through fields it will auto populate the date field with today's date. Ideally it won't populate it at all.
Problem 2:
It's difficult to blank-out a the date field once it's populated.
first name: <input type="text">
birthdate: <input type="text" class="date">
city: <input type="text">
js:
$(function() {
$(".date").mask("99/99/9999");
$('.date').datepicker({
format: 'mm/dd/yyyy'
});
});
The problem is all originates from the fact that mask is populating the field with example format characters( "_ _ / _ _ / _ _ _ _" ) during focus and when the focus leaves datepicker is attempting to parse the example characters BEFORE mask has a chance to remove them. datepicker can't parse these special characters into a date therefore it is selecting today's date.
I think that if I can figure out a way to remove the example characters before bootstrap-datepicker attempts to parse them my problem would be fixed.
I would provide a jsfiddler example but I can't figure out how to add bootstrap-datepicker.js and jquery.maskedinput.js on their site.
Thanks for your help.
I stumbles across this option:
$('.date').datepicker({
format: 'mm/dd/yyyy',
forceParse: false
});
Surprising that force parse is true by default. darn bootstrap. Problem fixed.
Late answer but this was the only one that worked for me after deconstructing the sequence of events handled by both plugins (as of this date).
var $date = $('.date');
$date.datepicker({
format: 'mm/dd/yyyy'
});
$date.mask("99/99/9999");
$date.on('keyup', function(){
if ($date.val() == '__/__/____'){
// this only happens when a key is released and no valid value is in the field. Eg. when tabbing into the field, we'll make sure the datepicker plugin does not get '__/__/____' as a date value
$date.val('');
}
});
Long Explanation
Turns out that the datepicker plugin calls an update function on keyup, which in this case is the keyup event triggered when you release the TAB key. This update function calls a DPGlobal.parseDate() function that roughly behaves like this:
DPGlobal.parseDate(''); // returns new Date(); aka. now
DPGlobal.parseDate('10/10/1983'); // returns a Date instance that points to 10/10/1983
DPGlobal.parseDate('__/__/____'); // is generated by the maskedinput plugin and is interpreted as an ilegal date, so the datepicker goes back to the origin of unix time, 1970
This could easily be fixed by changing the parseDate function on the datepicker lib but this is a big no no if you want to keep your code maintainable. We are left then with a hackish way to intercept the foul value and correct it before maskedinput hands it over to the datepicker.
Hope it helps!
Try use other class name to datepicker and mix in your html
$(function() {
$(".date").mask("99/99/9999");
$('.date2').datepicker({
format: 'mm/dd/yyyy'
});
});
birthdate: <input type="text" class="date date2">