My jQuery datepicker has stopped working...it no longer shows the datepicker on click of an input field. There are no console errors.
I already checked for a solution here.
So I tried adding a new CSS style:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
That did not help.
Another proposed solution was soo check for a duplicate occurrence of clip: rect(0 0 0 0);, but that is not the case either.
I also tried explicitly calling show() on the input field after initialization, but that does not help either.
I also inspected the HTML, but I can't find the HTML for the datepicker so I can't even see what classes are assigned and if that is messing things up.
Here's my code:
(I added a breakpoint and the .datepicker call is executed.)
<input name="ctl00$CPHCenter$tbReservationDate" type="text" maxlength="14" id="tbReservationDate" class="textbox" placeholder="Datum Reservering" style="width:80%;">
<script>
$(function () {
$("#tbReservationDate").datepicker({ dateFormat: 'dd-mm-yy', firstDay: 1 });
//$("#tbReservationDate").show();
});
</script>
You have two elements in your html with id="tbReservationDate".
The first one that appears in the DOM is the one in the popup (and there the datepicker works). Change the id or use a class to initialize the datepicker.
Related
I am not sure how to get around this or if this is a bug in meteor but if I have a template that appears under two different layouts (I use iron router)
This code for datepicker
Template.new_event.rendered = function (){
this.$('.datepicker').datepicker({
dateFormat: "yy-mm-dd"
});
}
does not work. If I land on a page that uses the "new_event" template and it is using a different layout from the one that last used the "new_event" template the datepicker command does not trigger and no errors are posted. Also I have tried using different templates (doing rendered calls on different templates), but once I go to a page that calls "datepicker" and go to another page that calls "datepicker" it does not trigger if the page is a different layout
Any help with this would be greatly appreciated
Just try removing this from your code:
Template.new_event.rendered = function (){
$('.datepicker').datepicker({
dateFormat: "yy-mm-dd"
});
}
The idea is that whatever this is referring to might not be where when you use a different layout.
First of all you need to download the meteor Datetimepicker package.
meteor add ryanswapp:datetime-picker
this could would solve ur problem I suppose:
Template.templateName.onRendered(function() {
$('#datetimepicker').datetimepicker({
format: 'Y-m-d',
timepicker: false
})
});
Your HTML should look like this
<input class="form-control" type="text" id="datetimepicker" placeholder="Enter the time">
Hope this helps!
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've got a fairly complex web app that I'd like to add some date-picking UI to.
The problem I'm running into is that I haven't been able to figure out from the docs how to really take control of how and when the datepicker appears. There are no form elements involved (and no, I'm not going to add a secret form field), so the dead-simple out-of-the-box approach simply won't work.
I'm hoping someone can provide a little guidance on a pattern that allows me to invoke the datepicker programmatically. I believe I know how I'd use the datepicker's custom events to initalize and position it, and to recover the chosen value when the user dismisses it. I'm just having a hard time instantiating a datepicker, since I'm not pairing it to an element.
Here's what isn't working:
function doThing(sCurrent, event) { // sCurrent is the current value; event is an event I'm using for positioning information only
var bIsDate = !isNaN( (new Date(sCurrent)).getTime() );
jQuery.datepicker('dialog',
(bIsDate ? new Date(sOriginal) : new Date()), // date
function() { console.log('user picked a date'); }, // onSelect
null, // settings (i haz none)
event // position
);
}
The reason is that "jQuery.datepicker" isn't a function. (I'm Doing It Wrong.)
I'm not married to the 'dialog' approach -- it was just my best guess at invoking one without reference to a form element.
I'm using jQuery 1.4.3 and jQueryUI 1.8.6
From the plugin page: http://jqueryui.com/demos/datepicker/#inline
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
Date: <div id="datepicker"></div>
</div><!-- End demo -->
Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.
I read through the datepicker code, and it appears that, as written, the datepicker must be attached to an input, div, or span tag.
So, if your only objection is to using a form element, then attaching to a div or span is probably your best bet, and there's an example of how to do that here: https://stackoverflow.com/a/1112135
If you're looking for some other way to control the datepicker, then you may have to extend datepicker code to do what you want it to do, and if you go that route, then I recommend starting by taking a look at the _inlineDatepicker private method in the datepicker code, which is the method that attaches the datepicker to a div or span tag.
You have to define Input field dynamically then attach the datepicker you your newly created class Without field I Don't think so It will work.
<input type="hidden" id="yourField" />
and use
$("#yourField").datepicker({
buttonImage: '../yourImage.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
});
Trent Richardson's great Jquery Timepicker plugin instead of the Jquery UI datepicker, but I can't seem to display the datetimepicker or timepicker inline, like you can with the datepicker in Jquery UI.
This should be all the code that's needed, at least it's how it works with the Jquery UI datepicker:
<div class="timepicker"></div>
<script>
$(function() {
$('.timepicker').timepicker({
ampm: true
});
});
</script>
Using the datepicker in that same way would result in an inline calendar that always appears, no need to click an input field.
How can I display an inline time picker using datetimepicker or another Jquery plugin?
I think you need to call timepicker from an input text element not a div element.
<input type="text" name="time" class="timepicker"/>
Check out the Fiddle
Turns out this is a known issue and it's in fact fixed in the latest dev branch for Timepicker. Using the dev branch the inline feature works and I've had no problems.
this is from working code for static jquery datetimepicker view :
$('#datetimepicker').datetimepicker({
inline: true,
lang:'uz',
// disabled: true,
format:'d.m.Y H:i',
//
});
and in html:
<div id="datetimepicker"></div>
I've done a dialog box that contains a form inside it, and I would like to add some fancy items to it. I've been trying with $().buttonset() as I've done with most of my radio buttons in the application, in order to get a coherent UI for my application. The thing is that, even if following the rules specified, the buttons remain as a normal radio button, and not with the fancy interface. Do you know what could be the problem?
This is the part of the form where I want the fancy radio buttons:
<div id ="Replace">
<input type="radio" name="Replace" value = "true" id = "ReplaceYes"
onclick = "setReplace(this)" />
<label for="ReplaceYes">Yes</label>
<input type="radio" name="Replace" value = "false" checked="checked"
id = "ReplaceNo" onclick = "setReplace(this)" />
<label for="ReplaceNo">No</label>
</div>
And then, as the previous part of code is in a partial view, invoked when showing the modal box, this is how I try to convert the buttons appearance:
$("#Replace").buttonset();
The thing is that, debugging it I've seen that it goes through that part of the code, but it doesn't do what it's meant to do. Any clue?
I had the same problem has your, after an intensive reflexion I 've found that :
When you declare your Dialog box, you can specify a function called when it opens
$( ".selector" ).dialog({
open: function() {
$( '#buttonset' ).buttonset();
}
});
Updated: I had never used .buttonset() before, in any case it works against your markup, you can see a demo here. This demo uses the same code as the question:
$("#Replace").buttonset();
Make sure you're including the jQuery UI CSS correctly, and that your IDs are unique, if they are not you'll get some real funny behavior, and should switch to a class. Also, ensure that this part of your view is in the DOM when it runs, e.g. is it inside a document.ready event handler like this?
$(function() {
$("#Replace").buttonset();
});