Materialize CSS Datepicker is not working properly - javascript

Every Javascript's Materialize CSS Componenet is working fine except my datepicker, it does not show datepicker properly, different with the documentation. Here is my datepicker :
How to fix this?

Related

full calendar with dropdown navbar

Hi I'm a novice at HTML5.
Created a website using Bootstrap v3. Working on a webpage to utilize FullCalendar. I have one of two problems. Either the calendar works and my dropdown NavBar menus do not work. Or Vice Versa.
I've narrowed down the problem to the jquery.min.js script link.
If I comment out the script "...src='assets/js/calendar/jquery.min.js'>", then my dropdown menus, work perfectly.
If I comment out the script
"...src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
window.jQuery || document.write('...src="js/vendor/jquery.js">')", then my calendar works but my dropdown NavBar menus do not work.
I figured out the Bootstrap jquery script is using version 1.11.2 and FullCalendar is using version 3.1.1.
Then I downloaded Bootstrap v4 Alpha. The link there is to jquery-slim.min.js is version 3.1.1 so I thought this might solve my problem. I put together a test webpage and still experiencing the same issue.
Any suggestions would be greatly appreciated.
Thank you.

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

Is it possible set minTime on Angularjs bootstrap timepicker directive

We had been using jquery ui for datepicker and timepicker for some time now. We recently started using angularjs, it allows for two way binding and it has reduced lot of code. I use the ang. bootstrap timepicker directive, it works fine. But is there any way to set minTime and maxTime attribute where timepicker allows user to pick time after 9 am and below 5pm.
I appreciate any help.
This feature is available in the latest angular bootstrap - min & max attributes

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.

Not able to show icon in Trent Richardson datetime picker

Here is working example in jsFiddle.
The icon shows only when I am using jQuery UI 1.8.18, if I am using the latest version which is jQuery UI 1.8.21, then the icon won't show up?
Is there a bug or am I missing something?
The Trent datetime picker documentation is here.It says "In addition all datepicker options are still available through the timepicker addon."
Thanks.
Error: $("#from-datetime").datetimepicker is not a function
Source File: http://fiddle.jshell.net/_display/
Line: 73
It's just a datepicker not datetimepicker
Datetimepicker is another jquery plugin, may be it's not compatible with newest JUI
Working example
http://jsfiddle.net/uDVwx/3/
The point is you have to call in this order: jquery, jquery ui, jquery addons. But as I look at the console debug, there is an error with datetime picker addon and jquery ui 1.8.21

Categories

Resources