I am using this calendar: http://javascriptcalendar.org/
to pick a specific day. It works fine. I want when the user selects a day from the calendar to display a message in a div which will also contain this day. However, even though I have tried the Javascript and jQuery events: onclick, onchange, select, keyup I can't make it work. These events work only if after picking the day I press with my keyboard a char.
Can you help me please?
Here's an example from the plugin's website.
g_calendarObject.setOnSelectedDelegate(function(){
var obj = g_calendarObject.getSelectedDay();
alert("a date was just selected and the date is : " + obj.day + "/" + obj.month + "/" + obj.year);
});
I'm sure you've probably already seen that though, maybe you can make a jsfiddle and I can probably help a little better then.
try this code
<input type="text" id="dt">
<div id="showdate" style="display:none">
</div>
<script>
$("#dt").change(function() {
$("#showdate").css("display", "block");
var txt=$(this).val();
$('#showdate').text(txt);
});
</script>
Related
Dear Stackoverflow members,this question might seem very trivial and honestly I search for an answer however although there are similar queries around, none of the solutions delivered seem to work on what I am trying to achieve. I will put forth a generic snippet to understand what I am trying to achieve.
var dd = addday.getDate() + xdays; //addition of days to user input date
document.getElementById("Days").value= displaydate;//loading date to Days
where displaydate is in the following format:
var displaydate = dd+'/' + mm + '/' + y; //showing date format
and value shown in real time is displayed in the following input (disabled) box:
<label><b>Expiry Date:</b></label><input type="text" name="Days2" id ="Days2" disabled>
All the above is in a form. What I want to achieve thereafter is that when the user presses submit, that value attained and displayed by the getElementById is inserted in a table.
$addquery2="INSERT INTO 3pxdef_tb(defRef,tlpID,RaisedBy,RaisedDate,defDesc,defCAT,expDate,closedBy,closedDate,acID)VALUES('$_POST[def]','$_POST[tlptsel]','$_POST[raisedby]','$_POST[draised]','$_POST[des]','$_POST[catsel]','$_POST[Days]','$_POST[clby]','$_POST[closeddate]','$acindex')";
Unfortunately this is not working since an undefined index is being returned by the system.
Can I ask your assistance in this matter?
Thanking you so much.
There are two errors or I should say mistakes in your code first
Disabled input tags cannot be posted
see this for more information
Disabled form inputs do not appear in the request
Second
Just like what Luigi D'Amico said
You're Calling "Days" as id in your JS code but in your html code you have "Days2" as an ID and Name. Rename your Days2 into Days. Your php script also uses that one.
You say:
document.getElementById("Days").value
But the html tags id is "Days2"
<input type="text" name="Days2" id ="Days2"
Let us know if this was the issue or if it was just a typo
On the website I'm currently working I have a form to add a event. This event needs a date which the user selects using a jQuery datepicker. A date can only have one event. So I want to check the date the user insert in the datepicker. I tried doing this by getting the value after the user has selected the date. The problem is however, the datepickers doesn't update his value right away.
I made a JSFiddle to show the problem. When you pick a date the span updates and shows the value of the datepicker. But as you can see the first time it is blank, and the second time it shows the previous selected date. So the datepickers does not update is value right away. How can I fix this?
I looked trough other similar questions here on stackoverflow but their solutions didn't work for me.
JSFiddle: http://jsfiddle.net/kmsfpgdk/
HTML:
<input type="text" id="datepicker" name="date" />
<span id="data"></span>
JS:
$('#datepicker').datepicker();
$('#datepicker').blur(function () {
var val = $(this).val();
$('#data').text(val);
});
Its better to use built in method onSelect:fn to use:
$('#datepicker').datepicker({
onSelect: function () {
$('#data').text(this.value);
}
});
Fiddle
As per documentation:
onSelect
Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.
change event happens before blur event.
Use .change() instead of .blur()
$('#datepicker').change(function() {
var val = $(this).val();
$('#data').text(val);
});
Updated jsFiddle Demo
If Google brought you here because your input does not seem to respond to various JQuery .on( events, most likely it's because you have another element on the same page with the same id.
I have a form with several fields. I enjoy all the validation built into a form, and I am forbidden from using ajax.
Here is the issue: My form has a date picker and time selector. But I have to send the values as a combination of them, i.e. 6/7/2013 05:00:00.
From the research I've done, I can't stop and concatenate those values before submitting.
How can I do this without getting involved in too much trickery?
Thanks for any helpful tips!
You can use a hidden element, for this example we'll use this.
<input type="hidden" name="datetime" value=""/>
When the submit event if fired on the form, run this.
$('form').on('submit', function(){
var $form = $(this);
$form.find('[name=datetime]').val(
$form.find('[name=date]').val() + ' ' + $form.find('[name=time]').val()
);
});
EDIT
I just realized this isn't tagged jQuery so here's my best attempt with vanilla javascript assuming the fields name is "add" and there's inputs named datetime, date and time.
var add = document.forms.add;
add.onsubmit = function(e){
add.datetime.value = add.date.value + ' ' + add.time.value;
}
This should definitely be handled on the server side though.
Have a 3rd hidden field, update the value (date + time) on change on either date or time and use that value where ever you want.
you can use jQuery UI Datetimepicker plugin.
its will help you to catch date and time in single field.
plz refer.
$('#selectedDateTimeWithFormat').datetimepicker({ dateFormat: 'dd-mm-yy', timeFormat: 'hh:mm:ss' });
http://timjames.me/jquery-ui-datetimepicker-plugin
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
How i get appointment time (From time,To time) in jquery
see jsfiddle
i am selecting time slot by dragging on time slot cell.
after selecting time slot i enter name in textbox then patient appointment is allotted for that time slot.
i have to insert patient name like(abc),start time like(8:00AM 0) and end time like(8:00AM 30) in database.
how can i get these three values in jquery.
In my opinion, there is a lot of work to make the timetable look great and give a good user experience on various browsers.
Maybe you could use the jQuery full calendar ( http://arshaw.com/fullcalendar/) and customize it to fit your needs.
Here is a demo for creating time events on a single day:
http://arshaw.com/js/fullcalendar-1.5.3/demos/selectable.html
With some slight html modifications such as adding a class to the time cells and some data attributes, you can take advantage of jQuery.data() and use classes to simplify locating cells
<td class="csstablelisttd time" data-hour="9" data-minute="45"> 45 </td>
When a "slot" has been booked, add a class to it that identifies it is booked. Storing the name of the patient to the time cell as data allows you to then do something like:
$('button').click(function() {
var msg = 'No Bookings',
$booked = $('.booked');
if ($booked.length) {
msg = [];
$booked.each(function() {
var data = $(this).data()
msg.push(data.hour + ':' + data.minute + ' - ' + data.patient)
})
msg = msg.join('\n');
}
alert(msg)
})
Here is a much simplifed, but working version using click event on the time cell. Your mouse selection method didn;t seem to work and a click is more user friendly. This won't complete your whole app, but should give you some ideas going forward
http://jsfiddle.net/vrW2n/27/
Use the new HTML5 time element (documentation). Then it is easy to fetch the time with jQuery.
Here is a complete example on how to fetch the first selected cell, and the last selected cell. Do the selection after the user has clicked the update button.
<!doctype html>
<html>
<head>
<script
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js">
</script>
<script
src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js">
</script>
<script>
$(function () {
var start = $("td.csstdhighlight:first > time").attr("datetime");
var end = $("td.csstdhighlight:last > time").attr("datetime");
});
</script>
</head>
<body>
<table border="1">
<tr><td class="csstdhighlight">
<time datetime="2000-01-01 08:00:00">00</time>
</td></tr>
<tr><td class="csstdhighlight">
<time datetime="2000-01-01 08:15:00">15</time>
</td></tr>
<tr><td class="csstdhighlight">
<time datetime="2000-01-01 08:30:00">30</time>
</td></tr>
<tr><td><time datetime="2000-01-01 08:45:00">45</time></td></tr>
</table>
</body>
</html>
Note that if you want to support Internet Explorer 8 or below you need to make sure that IE treats the new HTML5 time element as supposed to. The easiest option is to include the Modernizr library as in the sample above, or if you want the details you can read the blog post How to get HTML5 working in IE and Firefox 2.
Afternoon all.
Another hour, another question!
I have the following bit of jquery up and running that essentially 'resets' control contents.
tbxProdAC.Attributes.Add
("onclick", "$('#txtbxHowMany').val(''); SetRadioFocus('" + radProd.ClientID + "');");
I have a gridview that pops up occasionally (don't worry, I have got that bit under control!) so what I would like to do is amend the above code so that when I click on txtProdAC, GridView1 is removed.
Further to this, how would one implement a checked/unchecked function with jquery i.e. if tbxProdAC was click, radiobutton1 is unchecked?
Again, as always, apologies for my ignorance.
$("#tbxProdAC").click(function(){
$('#GridView1').remove(); // or .toggle() to show/hide
$("#" + radProd.ClientID).attr("checked",false);
});
Try this:
$("tbxProdAC").click(function(){
//id gridview ending with 'GridView'
$("table[id$='GridView']").html("");
});
Regards