Passing value from JQuery Datepicker to code behind - javascript

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"]

Related

Javascript. Add array to datetime input

I have a form with datetime_local html5 datetime input so that mobile users can use their native datetime picker instead of a jquery substitute which is generally clunkier.
I want the user to be able to select multiple dates.
So far I'm using the onchange trigger to capture the selected datetime and add it to an array. I then try and paste the array into the datetime input so it can be sent with the form.
With one date, it pastes fine, with more than one the input goes blank.
var datearray = [];
$(document).on('change','#mobile_gig_date',function(){
var date = $("#mobile_gig_date").val();
datearray.push(date);
console.log(datearray.join('; '))
$("#mobile_gig_date").val(datearray);
});
The HTML element is;
<input min="2017-09-01T00:00:00" discard_seconds="true" placeholder="Enter the gig date" id="mobile_gig_date" type="datetime-local" name="gig[date]">
Is there a way to add an array to a datetime input, and if so, in what format?
Since your input has the type datetime-local you can't put inside something that is not of that type.
Note that you also tried to put array inside an input - and you can't do this (what you can do is convert your array to string using JSON.stringify and use that value).
I added another hidden input and used it to save the data of your array.
var datearray = [];
$(document).on('change','#mobile_gig_date',function(){
var date = $("#mobile_gig_date").val();
datearray.push(date);
console.log(datearray.join('; '))
$("#mobile_gig_date_temp").val(JSON.stringify(datearray));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input min="2017-09-01T00:00:00" discard_seconds="true" placeholder="Enter the gig date" id="mobile_gig_date" type="datetime-local" name="gig[date]">
<input type="hidden" value="" name="gig[date_temp]" id="mobile_gig_date_temp" />

javascript - get the date value

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');

Convert ajax calendar value to datetime in textbox blur event using JavaScript

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"

MooTools DatePicker library: 'value' is empty if the form is submitted

I'm trying to use DatePicker library for Date fields but when the form is submitted, the 'value' of the input field is empty.
I copied the code from here: http://www.monkeyphysics.com/mootools/script/2/datepicker
<script>
window.addEvent('load', function() {
new DatePicker('.demo_vista', { pickerClass: 'datepicker_vista' });
new DatePicker('.demo_dashboard', { pickerClass: 'datepicker_dashboard' });
new DatePicker('.demo_jqui', { pickerClass: 'datepicker_jqui', positionOffset: { x: 0, y: 5 } });
new DatePicker('.demo', { positionOffset: { x: 0, y: 5 }});
});
</script>
<li>*DATE : <input name='date' type='text' value='' class='date demo_vista' /></li>
This is my website: http://iconceptsolutions.com.my/projects/grandevest/online-product-registration/
The point with this library is that the field you write into your HTML document is not the same that is shown by the browser.
When you build the DatePicker object, it takes the input fields which match its first parameter, and for each of them it builds another input field wich actually gets the dates selected by the user and is shown by the browser.
So, to get the value you are looking for, you must get a reference to the original input field, and with it call the MooTools function getNext(), so that you can retrieve the wanted value:
So, for this HTML:
<input name='date' type='text' value='' class='date demo' id='dateField' />
you can get the wanted value with this code:
$('dateField').getNext().get('value')
Wich can be called, for example, when the user clicks the submit button. If you need the value at a PHP script which will process the form, then with the MooTools line above you could set the value of the original input field, and then send it to the PHP.
UPDATE
I've set up this JsFiddle for testing purposes.
Not sure, but I wonder if your
value=''
in
<li>*DATE : <input name='date' type='text' value='' class='date demo_vista' /></li>
is overwriting the calendar?
What happens if you remove it?
Try this:
<input id="datepicker" name='date' type='text'/>
The javascript function new datepicker is creating 'datepicker' as a DOM object with the ID datepicker. You need the ID in the tag to specifiy this. You don't need the value in there at all, you can set a default value in the datepicker script itself in the header. That is also where you pick the theme, not in your HTML tags.

jQuery/JavaScript Date form validation

I am using the jQuery date picker calendar in a form. Once submitted the form passes params along via the url to a third party site. Everything works fine, except for one thing.
If the value inserted into the date field by the datepicker calendar is subsequently deleted, or if the default date, that is in the form on page load, is deleted and the form is submitted I get the following error:
"Conversion from string "" to type 'Date' is not valid."
The solution to my problem is really simple, I want to validate the text field where the date is submitted and send out a default date (current date) if the field is empty for any reason. The problem is I am terrible at Javascript and cannot figure out how to do this.
Here is the form code for my date field.
[var('default_date' = date)]
<input type="text" id="datepicker" name="txtdate" value="[$default_date]" onfocus="if (this.value == '[$default_date]') this.value = '';" onchange="form.BeginDate.value = this.value; form.EndDate.value = this.value;" />
<input type="hidden" name="BeginDate" value="[$default_date]"/>
<input type="hidden" name="EndDate" value="[$default_date]"/>
This is really old and probably solved, but what the heck.
Simplest way to do this is to add a little more javascript to the input's onchange event.
onchange="if( this.value.length > 0 ) { form.BeginDate.value = form.EndDate.value = this.value; } else { form.BeginDate.value = form.EndDate.value = '[$default_date]'; } " />
of course their are still all sorts of other problems associated with date validation, but this is a straightforward way to check for a blank value and return a default based on your current code structure.

Categories

Resources