I have a CalendarExtender control on my page and sometimes have to change the date to the next occuring Sunday. I'm currently using the OnClientDateSelectionChanged property of the control to call a function that will add some days to the date until its Sunday.
The problem I'm having is that if I select a Tuesday in my calendar, the textbox will display the next Sunday but the selected date in the calendar is still Tuesday.
How do I update the CalendarExtender to have the new date that has one I selected in javascript? The textbox the CalendarExtendar is connected to shows the correct date...
Changing the value of the textbox that is the TargetControlId for the CalendarExtender affects the selected date if the following 2 conditions are met:
An onchange event is fired on the textbox (either by changing the text manually or by calling an explicit javascript fireEvent() method.
The format of the date entered in the textbox matches the same format used by the CalendarExtender control.
That being said, the correct way to handle this is to call the set_selectedDate() function of the CalendarExtender control. This one call, not only sets the selected on the Calendar, but also on the Targeted textbox at the same time.
Here's the example code:
<cc1:CalendarExtender ID="CalendarExtender1" runat="server"
OnClientDateSelectionChanged="dateSelectionChanged"
TargetControlID="txtDate" PopupButtonID="imgCalendar">
</cc1:CalendarExtender>
<script type="text/javascript">
function dateSelectionChanged(sender, args){
selectedDate = sender.get_selectedDate();
/* replace this next line with your JS code to get the Sunday date */
sundayDate = getSundayDateUsingYourAlgorithm(selectedDate);
/* this sets the date on both the calendar and textbox */
sender.set_SelectedDate(sundayDate);
}
</script>
<asp:TextBox ID="txtDate" Text='<%# Bind("Date", "{0:dd-MMM-yyyy}") %>'
runat="server" class="form-control input-sm m-bot15" BackColor="#ffccbb"></asp:TextBox>
<asp:CalendarExtender ID="CalExtender1" runat="server" Enabled="true" Format="dd-MMM-yyyy"
TargetControlID="txtDate">
</asp:CalendarExtender>
Related
I have a problem. I use a date picker in my html page which I want to get value of input date using jquery. I used this :
var birthday_date = $("#birthday_date").val();
but it's not working. I checked the inspect code then realise when I used date picker, the input tag (which used for date) becomes to this :
<input id="textbox1"
name="birthday_date"
data-targetselector="#textbox1"
class="form-control"
data-mddatetimepicker="true"
placeholder="year/month/day"
data-placement="top"
maxlength="10"
data-mdpdatetimepicker=""
data-trigger="click"
data-enabletimepicker="false"
data-mdformat="yyyy/MM/dd"
data-mdpdatetimepickerselecteddatetime="
{"Year":2011,"Month":8,"Day":2,"Hour":9,"Minute":13,"Second":14}"
data-original-title=""
title=""
data-mdpdatetimepickershowing="true"
aria-describedby="popover30621"
type="text">
the value of the date is this part:
mdpdatetimepickerselecteddatetime="{"Year":2011,"Month":8,"Day":2,"Hour":9,"Minute":13,"Second":14}"
the time is not matter, I just wanna date , google gave me nothing and I have no idea how can I get the value like this, any help? or something to help me?
If you are using datepicker, you can access the value like this:
var date = $('#textbox1').datepicker('getDate');
I am using JQuery Datepicker in my .aspx file.
I need to use the date value in my code behind file. This is my function which I want to update a hidden value on my page which I can use in my code behind.
$(function () {
$("#datepicker").datepicker({ minDate: 0,
onSelect: function () {
var dueDate= document.getElementById('dueDate');
dueDate.value = $(this).datepicker('getDate');
}
});
});
My hidden value which I want to update, which is on the same .aspx page:
<Input id="dueDate" type="hidden" runat="server" />
Now in my code behind, I want to use the date like so:
DateTime due= dueDate.Value;
This gives me an error:
Cannot implicitly convert type 'string' to 'System.DateTime'
I get the same error when I use
DateTime due = Convert.ToDateTime(dueDate.Value);
What is the correct way to use the date from Datepicker in the code behind?
DateTime.Parse(...)
or
DateTime.ParseExact(...)
or
DateTime.Parse("01/01 2010");
or use
DateTime.TryParse
if you aren't sure it converts in which type every time, ie. not always a date, so try this 4 and check
Consider having the following code on your .aspx file, removing runat server:
<input type="hidden" id="dueDate" name="dueDate" value="" />
Now make the following change in your jquery datepicker function:
$(function () {
$("#datepicker").datepicker({
minDate: 0,
dateFormat: "dd-mm-yyyy",
onSelect: function() {
$("#dueDate").val() = $(this).datepicker("getDate");
}
});
}
This way the hidden field value of dueDate gets updated whenever the value of your datepicker control is changed. Further since your hidden field now has a name and value attribute associated with it, your code behind would receive its value as a string whenever your form is posted.
Now in your code behind file, create your DateTime object as follows:
string[] dueDateSplit = Request.Form["dueDate"].Split('-');
DateTime due = new DateTime(dueDateSplit[2], dueDateSplit[1], dueDateSplit[0]);
Provide a name for the datepicker
<Input id="dueDate" name = "dueDate" type="hidden" runat="server" />
and use the below
String text = Page.Request.Form["dueDate"]
I have an ASP.net textbox with AJAX calendar extender control.
<asp:TextBox ID="tbxReceivedDate" CssClass="selectstyle" runat="server" MaxLength="100" Width="200" onblur="parseStringtoDateTime();"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" TargetControlID="tbxReceivedDate" Format="ddd MM/dd/yyyy hh:mm:ss tt" runat="server"></cc1:CalendarExtender>
I want to convert this string into a proper date format (ex., 08/17/2014 9:43:00 AM) using JavaScript in textbox blur event.
So far, I have below code but it is not giving me the desired result.
<script type="text/javascript">
function parseStringtoDateTime() {
var t = new Date($('#<%= tbxReceivedDate.ClientID %>').val());
alert(t);
}
</script>
What can I change to get the desired result?
You can get the date in javascript through the AJAX behavior, like this:
var date = $find("behaviorID").get_selectedDate();
For this to work, in your CalendarExtender you should define the BehaviorID attribute like this BehaviorID="behaviorID"
I want to make a calendar where you can select the date, and automatically you can select the time. I shouldn't use butons to change the time :(
So I have the next:
<rich:calendar id="currentDate" popup="true"
datePattern="dd/MM/yyyy - HH:mm" enableManualInput="false"
showFooter="false" required="true" resetTimeOnDateSelect="true"
oncollapse="return timeSelected;"
showWeeksBar="false" showWeekDaysBar="true"
value="#{bean.currentDate}"
ondateselected="timeSelected=false; Richfaces.getComponent('calendar',this).showTimeEditor(); return true;"
ontimeselected="timeSelected=true; return true;"
ontimeselect="timeSelected=true; return true;"
>
<a4j:support event="onchange" ajaxSingle="true" />
</rich:calendar>
But it doesn't work at all.
There are two problems.
1 - When you choose a day, the popup appears. But if you press 'Accept' withouth changing the time, you can't close the calendar :(
2 - Once you have selected the date/time, but you want to change only the time, you can't do it because you can't select the current day, so you can't see the time editor.
I'm using rich faces 3.3.3
Thanks
The ondateselected and ontimeselected attributes are only invoked when the date or time is actually changed, not when you just click on the date or closes the time editor. There are no standard <rich:calendar> attributes which capture that. You need to override the standard calendar.js functions eventCellOnclick() (which is invoked when a date is clicked) and hideTimeEditor() (which is invoked when time editor is closed).
The following works for me with RichFaces 3.3.3 (and Mojarra 1.2_15 and Tomcat 7.0.29).
<h:form id="form">
<rich:calendar id="currentDate" popup="true"
datePattern="dd/MM/yyyy - HH:mm" enableManualInput="false"
showFooter="false" required="true" resetTimeOnDateSelect="true"
showWeeksBar="false" showWeekDaysBar="true"
value="#{bean.currentDate}"
oncollapse="return this.component.timeSelected;"
>
<a4j:support event="onchange" ajaxSingle="true" />
</rich:calendar>
</h:form>
<script>
var currentDateComponent = $('form:currentDate').component;
var originalCellOnClickFunction = currentDateComponent.eventCellOnClick;
currentDateComponent.eventCellOnClick = function() {
this.timeSelected = false;
originalCellOnClickFunction.apply(this, arguments);
currentDateComponent.showTimeEditor();
};
var originalHideTimeEditorFunction = currentDateComponent.hideTimeEditor;
currentDateComponent.hideTimeEditor = function() {
this.timeSelected = true;
originalHideTimeEditorFunction.apply(this, arguments);
};
</script>
Note that ondateselected, ontimeselect and ontimeselected attributes are removed and that oncollapse attribute has been changed. Also note that the script must be executed after the calendar is been populated in the DOM. So the above works as-is. If you want to move the script into its own JS file (which is a good thing), make sure that it's executed on DOM ready only (i.e. put script in end of <body>, or execute it by window.onload() or jQuery.ready()).
I have a simple in VB/ASP.NET form containing two text boxes, I am attempting to apply some validation to the first text box using JavaScript. This is the first time I have attempted this and am having some trouble.
I have a label beside the text box stating an error, this labels visibility property is set to False. I wish the labels visibility to turn true if the text box is empty when the user loses focus.
For this I have used the onBlur option within the tags of the text box. It then calls the JavaScript function and should set the label to Visible but it does not. I have tested to see if it is entering the function by using an alert instead and that works. The problem seems to be trying to alter the visibility property of the label.
Here is the portion of my code:
The JavaScript:
function myRegEx(frm) {
if ( boxUsername.value == "" ) {
invalidUser.visible = True;
return false;
}
}
The form:
<asp:TextBox onblur="return myRegEx(this)" id="boxUsername" runat="server" Width="200px"></asp:TextBox>
<asp:Label id="invalidUser" runat="server" visible="False" forecolor="Red" text="* Username must be alphanumeric with no special characters"></asp:Label>
Any help would be brilliant.
Here's another StackOverflow question that has the answer for you:
Change visibility of ASP.NET label with JavaScript
I suggest you use and ASP.Net Validation control, specifically the RequiredFieldValidator.
This will take care of the label for you, plus make certain the correct validation happens both client side (javascript) and server-side (vb).
You're using the deprecated IE-only feature that turns elements with IDs into global variables.
You should call document.getElemenntById instead.
Also, you need to use ASP.Net's generated client IDs.
Finally, to hide an element, you need to use CSS; HTML doesn't have a visible property.
For example:
document.getElementById("<%=invalidUser.ClientID %>").style.display = "none";
However, you should use ASP.Net's built-in validation feature instead.
Why not use an ASP.NET RequiredFieldValidator like so:
<asp:TextBox onblur="return myRegEx(this)" id="boxUsername" runat="server" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ControlToValidate="boxUsername" Display="Dynamic" ErrorMessage="Please enter a value" />
If that is too simplistic then you can use a RegularExpressionValidator:
<asp:TextBox onblur="return myRegEx(this)" id="boxUsername" runat="server" Width="200px"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Please enter alpha numeric characters." ValidationExpression="[my reg ex]" ControlToValidate="boxUsername" Display="Dynamic" />