datepicker icon vanish after update date or add date - javascript

I have a web page that when a user enter a date this automatically saved in database. Also I have a datepicker icon to select the date. But when I update or i press a add button to add a new entry(or delete icon in order to delete a specific entry) all datepickers icon vanish. I refresh the page in order to datepicker icon appears again. I think that ajax call ignores javascript date picker
HTML code:
echo "<td class='main'><input disabled id='".$row['a_id']."' class='apousies_edit datepicker' tabindex='$tabindex_counter' onclick='update_record(event,this,"apousies","$key","id","".$row['a_id']."")' value='$val'></td>";
$tabindex_counter++;
echo "<button class='button4' onclick='new_record_adeia("$id");showDatePicker(tabindex)' value='Προσθήκη Άδειας'/><img src='add.png' width='40' height='40'></button>";
Ajax call:
function new_record_adeia(id) {
loadXMLDoc("/prosopiko/add_rec_adeia.php?id="+encodeURIComponent(id),function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById('apousies_edit').innerHTML=xmlhttp.responseText;
})
}
The code that i use in order to add a date:
session_start();
include "classes.php";
$functions=new classes;
$id_proswpiko=trim($_REQUEST["id"]);
$now=date('Y-m-d');
$res=$functions->query("INSERT INTO apousies(id_proswpiko,id_logos,start_date,diarkeia,id_status_adeia) VALUES ('$id_proswpiko',1,'$now','4','1')");
$functions->create_apousies_screen($id_proswpiko);
Jacascript code to show the datepicker I get it from this:
https://github.com/chrishulbert/datepicker/blob/master/datepicker.js
Update a date:
session_start();
include "classes.php";
$functions= new classes;
$table=trim($_REQUEST["table"]);
$field=trim($_REQUEST["field"]);
$val=trim($_REQUEST["val"]);
$check_field=trim($_REQUEST["check_field"]);
$check_var=trim($_REQUEST["check_var"]);
$sql="UPDATE $table SET $field='$val' WHERE $check_field='$check_var'";
$result=$functions->query($sql);
What is going wrong and my datepicker dont work?

datepicker icon vanish after update date or add date
The icon vanish because the datepicker library setups the date pickers when the form loads (specifically when the DOMContentLoaded event fires). Then, you make an ajax call that replaces the HTML, that includes the date picker icons, with an updated list of items.
Since at that point the library already did its job, the new html controls won't get the datepicker icon (neither any functionality related to that library).
IMHO you have two alternatives:
Modify the library, in order to add an setupPicker method that you can manually call after replacing the HTML with the ajax result.
Use a different library, that already provides that functionality.
I'd go for the second option, since that library is 9yo, and the document.getElementsByTagName("*") (see the source code at the end) looks very bad for performance.

Related

How to set datepicker using webdriverIO?

I have a task where I need to automate the booking.com page, and one of the tasks is to select check-in and check-out dates. How I can do this? I automated , that I can open calendar, but I don't know how to select dates.
Here is my code
Cucumber step
And user selects dates from "2020-06-16" to "2020-06-26"
BookingStep
When('user selects dates from {string} to {string}',()=>{
BookingPage.checkInOut.click();
browser.debug(); });
Booking page
class BookingPage{
get whereAreYouGoingTextBox(){return $('#ss')};
get checkInOut(){return $('div.xp__dates-inner')}; }export default new BookingPage();
Note: My answer is a solution for the ability to set a value in the date field, and only interact with the cancel link on the date picker object.
I battled this for a while and came up with a solution that works for me, I hope it works for you also.
First when I inspect the datepicker object, it generates a random XPATH/CSS Selector. As a result if you inspect & copy the selector and try to use it in your next test, it will fail since the xpath/selector is randomly generated. I got around this issue by identifying a unique css ID that lived above the datepicker element, and used that as my starting point. Then I looked at the html path from that point to the datepicker input tag, and I appended that path. This solved the first problem of not being able to set a value in the date picker text field. Here is an example using xpath:
//*[#id="filtersSideBar"] - This is the unique ID found above the datepicker
/div[2]/div/input - This is the path to the date picker from the unique ID
$('//*[#id="filtersSideBar"]/div[2]/div/input').waitForClickable(3000);
$('//*[#id="filtersSideBar"]/div[2]/div/input').setValue('2020-01-01');
Now that you have a date inside the date picker field, you have to close the datepicker object. I had to use Javascript to accomplish this. First open the datepicker object, then inspect the 'Cancel' link element. Copy the CSS Selector ID. Lets say it ends up being #cancelLink
Now you run this code:
browser.execute(() => document.querySelector('#cancelLink').click());
Which will then close the datepicker object so that you can proceed with your testing.
Here is my actual code:
class DataSearchSortAndDateRangePage {
get startDate() { return $('//
[#id="filtersSideBar"]/div[2]/div/div[2]/div[1]/div/input'); }
setStartDate(date) {
this.startDate.waitForClickable( { timeout: browser.config.timeOutValue } );
this.startDate.setValue(date);
browser.execute(() => document.querySelector('body > div.md-datepicker-dialog.md-theme-default > div.md-datepicker-body > div.md-dialog-actions.md-datepicker-body-footer > button > div > div').click());
}
}
export default new DataSearchSortAndDateRangePage();
I hope this helps out =)

Dynamics CRM : JavaScript onClick Function for Date change

I'm still pretty new to JavaScript, so I could use a little assistance with this requirement.
I have two HTML webresource buttons setup at the top of a form (new_dayPagePreviousButton and new_dayPageNextButton), and between them is a calendar field (new_daypagedate). We have subgrids on the page configured to return results depending on the date chosen in the calendar field.
The requirement is to have a single day added or subtracted from the calendar field whenever a user clicks the Previous Day or Next Day button.
I am assuming that field new_daypagedate is having Data Type Date and Time of Dynamics CRM and new_dayPagePreviousButton and new_dayPageNextButton are just HTML buttons, and you want that when a user clicks on any of buttons there should be a change in Calendar field of CRM.
As you mentioned that you have created web resource so I am assuming that you have added two buttons and on click event of buttons it should react on new_daypagedate field.
Here I have created a web resource for you, please try to apply below javascript in your instance,
function AddDays(arg) {
var d=window.parent.Xrm.Page.data.entity.attributes.get("new_daypagedate").getValue();
d.setDate(d.getDate() + arg);
window.parent.Xrm.Page.data.entity.attributes.get("new_daypagedate").setValue(d);
}
Optional HTML,
<button type="button" id="new_dayPagePreviousButton" onclick="AddDays(-1)">Previous Day</button><br/>
<button type="button" id="new_dayPageNextButton" onclick="AddDays(1)">Next Day</button>
Please note, you need to call a javascript function using onClick event of a respective button.
SIDE NOTE: As you are using Dynamics CRM, you need to access your CRM
field using Xrm.Page attribute, you cannot directly access any field
or HTML tag just by using the id of that field, which you can see in
above Javascript.
After some additional research, I modified one of the button's HTMLs to include the JScript you had given in your first post Sagar. It now reads as follows;
<html><head>
<script type="text/jscript">
function AddDays(arg) {
var
d=window.parent.Xrm.Page.data.entity.attributes.get("new_daypagedate").getValue();
d.setDate(d.getDate() + arg);
window.parent.Xrm.Page.data.entity.attributes.get("new_daypagedate").setValue(d);
}
</script>
<meta><style type="text/css">P { margin: 0; }</style><meta><style type="text/css">P {
margin: 0; }</style></head><body onfocusout="parent.setEmailRange();"
style="overflow-wrap: break-word;">
<button type="button" id="new_dayPageNextButton" onclick="AddDays(1)">Next
Day</button>
</body></html>
After publishing, the button successfully changes the date! However once the date is changed, the subgrids below do not refresh to reflect the new date. This is a separate issue so I'll post a separate question for it.
Sagar, thanks for walking me through this. You've been immensely informative.

Access Selected Date from dynamically created Calendar Control asp/javascript/VB.net

UPDATE: To anyone who still may read this, I used a completely different way of doing this. With AjaxToolkit's Calendar Extender, I was able to easily add a calendar dynamically and use Javascript to change the format of different date inputs so that calendar extender could read it. Highly recommend you go the AjaxToolkit route if you are trying to do something similar to me.
I have dynamically created a Calendar control(asp:Calendar), Buttons, and dropdown lists for a Comment Class. The Comment Class will always have a textbox in it, but if the ID/attribute label of the textbox is DOB or birthday or something similar, these other controls get dynamically created.
So far, the calendar, dropdown lists, and one of the buttons works, but I am have trouble with the last button. Currently, I dynamically add a script that is used for one of the buttons to show and hide the div that contains that Calendar, dropdown lists, and relevant buttons, which works amazingly. I am trying to add another script trigger on a button press to take the selected date from the Calendar and put it in the textbox.
Right now, I am just trying to get access to the Calendar. I am using code that looks like this:
function use_calendarDate(){
var calendarDate = '<%=question128_Cal1.SelectedDate%>';
alert(calendarDate);
}
I found this function in another question similar to this, but instead of getting the date, it just puts <%=question128_Cal1.SelectedDate%> as a string into the alert box.
This LINK shows exactly what I am trying to do, but I get a different result. Can anyone help me with what I am doing wrong here?
Interestingly, when I use
var calendarDate = question128_Cal1.SelectedDate;
OR
var calendarDate = question128_Cal1.value;
My alert box tells me undefined.
Thanks in advance.
In case it is needed, my calendar control is created like this:
In Page_Init
Dim calendar1 As New Calendar
Call BuildCalendar(calendar1)
calendarDiv.Controls.Add(calendar1)
Here is the function referenced above.
Private Sub BuildCalendar(ByRef calendar1 As Calendar)
calendar1.ID = "Cal1"
calendar1.SelectedDate = DateTime.Today
calendar1.Attributes.Add("runat", "server")
calendar1.Attributes.Add("OnClientDateChanged", "onDateChange")
calendar1.Attributes.Add("borderwidth", "2px")
calendar1.Attributes.Add("BackColor", "White")
calendar1.Attributes.Add("width", "200px")
calendar1.Attributes.Add("ForeColor", "Black")
calendar1.Attributes.Add("Height", "180px")
calendar1.Attributes.Add("Font-Size", "8pt")
calendar1.Attributes.Add("Font-Names", "Verdana")
calendar1.Attributes.Add("BorderColor", "#999999")
calendar1.Attributes.Add("BorderStyle", "Outset")
calendar1.Attributes.Add("DayNameFormat", "FirstLetter")
calendar1.Attributes.Add("CellPadding", "4")
calendar1.Attributes.Add("ShowNextPrevMonth", "True")
calendar1.Attributes.Add("SelectionMode", "Day")
calendar1.Attributes.Add("ShowTitle", "false")
calendar1.Attributes.Add("OnSelectionChanged", "Calendar_SelectionChanged")
calendar1.TodayDayStyle.ForeColor = Drawing.Color.Black
calendar1.Attributes.Add("todaydaystyle-backcolor", "#cccccc")
calendar1.Attributes.Add("selectorstyle-backcolor", "#cccccc")
calendar1.NextPrevStyle.VerticalAlign = VerticalAlign.Bottom
calendar1.Attributes.Add("dayheaderstyle-font-size", "7pt")
calendar1.Attributes.Add("dayheaderstyle-font-bold", "true")
calendar1.Attributes.Add("dayheaderstyle-backcolor", "#cccccc")
calendar1.Attributes.Add("selecteddaystyle-font-bold", "true")
calendar1.Attributes.Add("selecteddaystyle-forecolor", "White")
calendar1.Attributes.Add("selecteddaystyle-backcolor", "#666666")
calendar1.Attributes.Add("titlestyle-font-bold", "true")
calendar1.TitleStyle.BorderColor = Drawing.Color.Black
calendar1.Attributes.Add("titlestyle-backcolor", "#999999")
calendar1.Attributes.Add("weekenddaystyle-backcolor", "#ffffcc")
calendar1.OtherMonthDayStyle.BackColor = Drawing.Color.Gray
End Sub
Is it question128_Cal1 or question128_Calendar1 ? Your function use_calendarDate() refers to the first. Typo ?
Interestingly, when I use
var calendarDate = question128_Calendar1.SelectedDate;
OR
var calendarDate = question128_Calendar1.value;
My alert box tells me undefined.
That's because the client script has no knowledge of what 'question128_Calendar1' is. That is a server-side ID.
Is there a reason why you can't use markup to define the calendar instead that rather large 'BuildCalendar' function? You're making a bit of a maintenance nightmare by doing that, IMO.

DateTimePicker how to trigger onChangeTime() from outside the constructor

I created a DateTimePicker and am currently using the "onChangeDateTime" as a means of updating a page using ajax. But I'm not a front end person and I'm having trouble understanding what exactly is going on and I have almost no experience with Jquery. I'm working on learning more but in the mean time I'd appreciate some advice if anyone is offering.
What I'm trying to do is have a link/button on the page where I can call some method to change the time in the date picker and have it trigger the onChangeDateTime function.
I thought it would be as simple as doing $("#DateTimePicker").somefunction() to change the time but I can't seem to figure out even how to change the time nor how to trigger onChangeDateTime().
I'm creating a schedule viewer and I'd like to let users click a button to cycle forward and backward in time rather than having to select the specific time over and over again on the datetimepicker.
I got my version of datepicker from http://xdsoft.net/jqplugins/datetimepicker/
Edit: this is what I've written so far.
<body>
<input id="datetimepicker" type="text" value="2015/04/08 17:49">
<a id="myLink" title="Click to do something"
href="#" onclick="backEpisodes();">Backwards</a>
<a id="myLink" title="Click to do something"
href="#" onclick="forwardEpisodes();">Forwards</a>
<script>
jQuery('#datetimepicker').datetimepicker({
formatTime:'g:ia',
format: 'm/d/Y g:i a',
inline:true,
maxDate:'<?php echo date('Y/m/d', strtotime("+3 week")); ?>',
onSelectTime:function(current_time,$input){
updateEp($input.val());
}
});
</script>
</body>
You can programmatically set the value of the DateTimePicker by using it's setOptions() function and specifying the "value" option like this:
$('datetimepicker').data('xdsoft_datetimepicker').setOptions({
value: '1944/06/06 6:06' // Of course this needs to match the correct format
});
jsfiddle
Note: The jsfiddle contains a function that parses a string into a JavaScript Date object. That could be implemented using a regular expression, but I took a shortcut and utilized the moment.js library.
Notes:
You might want to use the "onChangeDateTime" option, rather than the "onSelectTime" option if you want that code to also execute when the user changes the date.
The format of your initial value ("2015/04/08 17:49") does not match the format you give to the datetimepicker ('m/d/Y g:i a'). You will want to correct that.
The "formatTime" option is needed only if you are specifying the "minTime" and/or "maxTime" options. Similarly, the "formatDate" option is needed only if you are specifying the "minDate" and/or "maxDate" options. Therefore, you don't need to specify the "formatTime" option. You could specify the "formatDate" option since you do specify a "maxDate", but it defaults to "Y/m/d".
id values should be unique, so you should not use "myLink" as the value for both your <a> elements.

asp.net AjaxControlToolkit CalendarExtender: setting displayed month programmatically from client side

Is there a way to set the calendar extender, or a method I can call so it always displays the month containing the selected date when the target textbox is clicked? I have found the method to set the selected date, but this does not automatically bring the month of the selected date into view.
You can handle the onClientShown event:
<cc1:calendarextender ID="Calendarextender1"
OnClientShown="clientShown" ...
For example:
<script type="text/javascript">
function clientShown(sender, args) {
var extender= $find('Calendarextender1');
sender.set_visibleDate(extender._selectedDate);
// the following is just to show you some other interesting methods
//sender.set_todaysDate(extender._selectedDate);
//sender.set_selectedDate(extender._selectedDate);
}
</script>
I'm afraid there's no documentation, so try them out.

Categories