JQueryUI Datepicker in my asp.net mvc View - javascript

I have this code in my view.
$("#Effective Date").datepicker({
showOn: "button",
buttonText: "..."
});
I am able to see the the date and I can select the date. But when I open the datepicker Iam not seeing the Arrows on the popup box. << < March 2012 > >>
can anybody please help me out

It must be something to do with the CSS you're using.
Here is a jsFiddle.
http://jsfiddle.net/C9rCT/
It uses jQuery 1.7, jQuery UI and links to the jQuery UI CSS file from Google (http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css)

Make sure you also have the CSS and images from the jQuery you downloaded.

These 'arrows' are backround image. Check the css.

Related

How to set maxViewMode in Bootstrap Datepicker (with JS Fiddle)

I have a simple installation of Bootstrap Datepicker:
HTML:
<div id="datepicker"></div>
JS:
$("#datepicker").datepicker( {minViewMode: "days", maxViewMode: "days"});
I am trying to disable the user's ability to switch to month view (achieved by clicking on the month title). I have set maxViewMode to days as per the docs, but it doesn't work.
JS Fiddle here.
Where am I going wrong? Is this a bug?
You are using Bootstrap Datepicker version 1.4.0. Option maxViewMode is added in version 1.5.0 (not released yet).
Official docs for version 1.4.0

Could not enter date manually using jqxDateTimeInput

We are using jqxWidgets as a part of UI in our project.
To display the date we are jqxDateTimeInput widget.
The problem here is we could not manually input the date without using calendar icon. But in the demo shown in jqxwidget website in the link below the date can be edited manually.
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatetimeinput/index.htm#demos/jqxdatetimeinput/defaultfunctionality.htm
Does anyone what should be done to make the date field to be edited manually?
Is there any license restriction on this?
We are yet to get the license and now we are using trial version.
- JS extract:
$("#fromDate").jqxDateTimeInput({
width : 200,
height : 25,
formatString : "dd/MMM/yyyy",
theme: theme
});
Same problem, adding globalize.js helped
I had the same problem here. I spend a lot of hours to fix it, but I got it! I had 2 calls of jQuery: one in the main file, with 1.9.1 version and another in my grid file, with 1.10.2 version. After removing the call of 1.9.1 version, I solved the problem. Check your jQuery calls and try again.

Mobiscroll datepicker is hidden by jQuery Mobile modal

I have a jQuery Mobile site with some date inputs, I am using the Mobiscroll datepicker (in modal mode) for these. It works well on standard jQM pages, but it has a problem when I have a date input that is on a jQM modal.
The problem is the datepicker modal shows under the jQM modal and so the user can't see it, I want the datepicker to show over the top of the jQM modal. If I hide the jQM modal using Firebug, I can also see that the datepicker is under the jQM "dark" filter - where it makes everything dark except the jQM modal.
The code I'm using to setup the Mobiscroll datepicker is:
$('#mydate').scroller('destroy').scroller($.extend(
{
preset : 'date',
dateFormat: 'dd/mm/yyyy'
},
{
display: 'modal',
mode: 'scroller',
theme: 'default',
lang: 'en'
}));
I have tried modifying the elements in Firebug to see if some CSS would fix it, I tried setting the datepicker to a high z-index and the jQM modal to a lower z-index, also tried forcing it with !important but this didn't change anything. The other Mobiscroll display options: top, bottom, bubble have the same problem.
How can I get the datepicker to display on top of the jQM modal?
jQM version: 1.2.0 (latest), with jQuery 1.8.2
Mobiscroll version: 2.4.4 (latest)
Try this:
.dw-persp, .dwo {z-index:1051;}
.dw {z-index:1051;}
You'd better put it in the last css
I happened to have the same issue and here it my fix:
Check the css of the modal(the default z-index for jquery mobile modal is 1050).
Then go to mobicroller css and change the z-index to any value above it. As long as mobiscroller has a hinger z-index it should show on top modal without any problem.

Bootstrap datepicker not responding in IE8

I have similar issue like in Bootstrap Datepicker Not Working .I followed the solution of putting datepicker code in document.ready() as
$(function(){ $('#datepicker').datepicker(); });
But,still on clicking datepicker icon, it is showing "Stop script running..." pop up.I am using jquery 1.8.3 version with bootstrap version 2.1.1.It is working fine in Jquery version 1.8.1.what change needs to be done for jquery version 1.8.3
This was a bug in the original release in September 2012. Coders have since forked the project and made fixes/improvements - one of them being this IE 7/8 bug...
https://github.com/eternicode/bootstrap-datepicker/issues/144
Essentially, download the latest Master build contents and you should be good to go.

Javascript calendar in master page

I used the example from here MasterCalendar
But this works fine in IE where as in mozila it does not work i tried as he said by naimg with the control id then the selected date is not getting displayed so can any one give me a solution for this.
Hi user just change the YearRange as follows
yearRange: 'c-100:c+0'
It will display from 1911-2011 if needed change c-100 values as per your requirement
Use jquery UI datepicker instead of that
http://jqueryui.com/demos/datepicker/
cheers!

Categories

Resources