Here's the exact problem I am facing :
https://codepen.io/anon/pen/QdwOLr?editors=1010
Below is the html file :
<body layout="row" ng-app="myApp" ng-controller="myCtrl" ng-cloak>
<md-datepicker
ng-model="myDate"
md-max-date="todaysDate"
md-placeholder="Enter date">
</md-datepicker>
</body>
And this is the js file:
angular.module('myApp',['ngMaterial']).config(['$mdDateLocaleProvider',
function($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
return moment(date).format('DD/MMM/YYYY');
};
}
]).controller('myCtrl', ['$scope', function($scope) {
$scope.todaysDate = new Date();
}]);
The problem : on clicking the datepicker, the dates are not shown. However, after scrolling the dates are displayed, but goes to a far date value.
Additional Information :
Versions -
angular = 1.6.0
angular-material = 1.1.1
moment = 2.17.1
I played around with your codepen and if you use Angular version 1.5 (and aria / animate to 1.5.1) then the <md-datepicker> shows the dates.
If you look at https://github.com/angular/material/issues/10111 then you will see that angular material 1.1.1 is not compatibel to Angular 1.6.
Related
I have used the following code for date time picker but not working it is not considering datetimepicker as a function.......all the files have been uploaded and used correctly for one page it is working fine and for the other it is not working can any one tell where the problem is???
var addrLoad = true;
var j$ = jQuery.noConflict();
j$(document).focusin(function() {
j$('.needsDatePicker').datetimepicker({
timeFormat: 'HH:mm',
dateFormat: 'yy-mm-dd',
}).removeClass('needsDatePicker');
});
I'm using Reactjs together with the tinyMCE 4.1.10 html editor (together with the code plugin) and bootsrap css + js elements. A fairly working setup after a few quirks with the editor have been removed (manual destruction if the parent element unmounts)
Now the question: The textarea input of the code plugin does not receive any focus, click or key events and is basically dissabled. Setting the value via javascript works just fine, but it does not function as a normal html input.
It is opened as the following:
datatable as react components
opens bootsrap modal as react component
initializes tinymce on textareas inside of the modal
loads the code plugin (which itself then is not accepting any kind of input anymore)
My initilization of the editor looks like this:
componentDidMount: function(){
tinymce.init({
selector: '.widget-tinymce'
, height : 200
, resize : true
, plugins : 'code'
})
}
My guess would be, that react.js is somehow blocking or intersepting the events here. If I remove the react modal DOM, it is just working fine.
Does anybody has an idea, what is causing this or how to simply debug it further?
Thx a lot!
if you are using Material UI. disable Material UI Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}
What does your html/jsx look like in your component?
My guess is that react might be treating your input as a Controlled Component
If you're setting the value attribute when you render, you'll want to wait, and do that via props or state instead.
Alright, so it turned out that bootstrap modals javascript is somehow highjacking this. In favor of saving some time I decided not to dig realy into this but just to create my own modal js inside of the jsx.
Aparently there is also React Bootstrap, but it looks at the moment to much beta for me in order to take this additional dependency in.
The final code looks like this, in case it becomes handy at some point:
Modal = React.createClass({
show: function() {
appBody.addClass('modal-open');
$(this.getDOMNode()).css('opacity', 0).show().scrollTop(0).animate({opacity: 1}, 500);
}
, hide: function(e){
if (e) e.stopPropagation();
if (!e || $(e.target).data('close') == true) {
appBody.removeClass('modal-open');
$(this.getDOMNode()).animate({opacity: 0}, 300, function(){
$(this).hide();
});
}
}
, showLoading: function(){
this.refs.loader.show();
}
, hideLoading: function(){
this.refs.loader.hide();
}
, render: function() {
return (
<div className="modal overlay" tabIndex="-1" role="dialog" data-close="true" onClick={this.hide}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" onClick={this.hide} data-close="true" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title" id="myModalLabel">{this.props.title}</h4>
</div>
<div className="modal-body" id="overlay-body">
{this.props.children}
<AjaxLoader ref="loader"/>
</div>
</div>
</div>
</div>
);
}
})
Best wishes
Andreas
Material UI: disable Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}
here is my code. as a result, it can't format any date according to the datePattern.
thank you for any help in advance
<script type="text/javascript">
var store = new dojo.data.ObjectStore({objectStore:new dojo.store.Memory({data:[{MyDate:new Date(2011,1,1)},{MyDate:new Date(2011,1,1)}]})});
dojo.addOnLoad(function()
{
var layout=
[
{field:"MyDate",datatype:"date",dataTypeArgs:{datePattern:"yyyy"}}
];
Grid = new dojox.grid.EnhancedGrid(
{
id:"Grid",
selectable:true,
store: store,
structure: layout,
});
Grid.placeAt("GridLayer");
Grid.startup();
});
</script>
<div id="GridLayer" style="width:98%;height:600px"></div>
Docs are being improved for this. Look at the current staging docs for DataGrid near the bottom where it says "See Also" the link for "Demos on how to display and edit date value in grid cells"
I'm using MVC2 and have included the Jquery DateTime picker.
For some reason it is not using the default format settings when the pages loads.
The model is passing in a Date and I have set the format to 'dd/mm/yyyy' as I do not want the time to be displayed. The html.editorfor that the datepicker is attached to, shows in the standard 'mm/dd/yyyy hh:mm:ss' format, consequently the validation kicks in with "invalid Date" if the model value if say '15th October 2010', because the standard format complains that there is no "15th" month.
Code from the DatePicker is...
<%= Html.TextBox("", (Model.HasValue ? Model.Value.Date.ToString("dd/mm/yyyy") :
DateTime.Today.ToString("dd/mm/yyyy") ), new { #class = "date" }) %>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker(
{
dateFormat: 'dd/mm/yy',
defaultDate: new Date(),
minDate: new Date()
});
});
</script>
Code calling Datepicker...
<div>
<%=Html.LabelFor(Model => Model.StartDate)%>
<%=Html.EditorFor(Model => Model.StartDate, new { #class = "date" }) %>
<%=Html.ValidationMessageFor(Model => Model.StartDate, "*")%>
</div>
Any ideas?
It seems the problem is actually with the HTML.TextBox rather than the actual JQuery...
This line seems to be the problem,
<%= Html.TextBox("", (Model.HasValue ? Model.Value.Date.ToString("dd/MMM/yyyy") :
DateTime.Today.ToString("dd/MMM/yyyy")), new { #class = "date" })%>
I have broken down the line as follows to check the different elements are working correctly, and they are...
<div><%= Model.HasValue %></div>
<div><%= Model.Value.Date.ToString( "dd/MM/yyyy" ) %></div>
<div><%= DateTime.Today.ToString("dd/MM/yyyy")%></div>
So, simply - this line in a template causes the date formatting to be ignored... any suggestions?
<div><%= Html.TextBox("", Model.Value.Date.ToString("dd/MM/yyyy"))%></div>
Are you setting the ID of the textBox correctly, I can see you have a class "date" but not the id.
you may also need the localization files for the datepicker available at Google
I still can't see in your javascript where the selector:
$("#datepicker")
is associated to your textbox. Shouldn't the selector be
$('.date')
Maybe I'm missing something.
Based on the AjaxControlToolkit API for the CalendarExtender I can control the style of the selected date using:
.ajax__calendar_active { background-color:red }
And according to the API, I was hoping, that .ajax__calendar_today would allow me to control the style of today's table cell, if show. Unfortunately, this .ajax__calendar_today controls the style of the bigger "Today: XYZ" button at the bottom of the calendar.
Does anyone know how to style today's table cell, if/when displayed?
Update:
I inspected the HTML using Firebug and see that there is no special css class or other indicator for today's day cell. I guess that makes sense from a server side perspective... how to know what day it is on the user's machine, without adding code to capture GMT offset and such.
So know I think that i am stuck creating some javascript to get today's date client side and comparing to each cell's title attribute, which is set to something like "Friday, February 11, 2011".
Update:Sept 2011
The latest AjaxControlToolkit release has added the .ajax__calendar_today css class to control this.
I believe you could use the following CSS class:
.ajax__calendar_today .ajax__calendar_day { background-color:red;}
Couldn't find a special class for this, so I wound up putting a style in my site.master.
FYI, the padding 0 is because the border takes 2px, which is what default padding is set for.
<style type="text/css">
div.ajax__calendar_day[title='<%=DateTime.Now.ToString("dddd, MMMM dd, yyyy")%>']
{
border: 1px solid #F00;
padding-right: 0px;
}
</style>
The best solution I found is this post.
I just removed the first 2 lines of the function (set current day) and fixed typo error in dayDIVs[i].style.bordercolor to dayDIVs[i].style.borderColor (uppercase C for color). You can also add dayDIVs[i].style.borderStyle = "dotted";
So here is the transcript of it (with my modifications):
/* In HEAD section */
<script type="text/javascript">
function clientShown(sender, args) {
var today = new Date();
var currentTitle = today.localeFormat("D");
//Find all the Day DIVs in the Calendar's daysBody
var dayDIVs = sender._daysBody.getElementsByTagName("DIV");
for (i = 0; i < dayDIVs.length; i++) {
if (dayDIVs[i].title == currentTitle) {
//Change the current day's style
dayDIVs[i].style.borderColor = "#0066cc";
dayDIVs[i].style.borderStyle = "dotted";
}
}
}
</script>
/* and then in your BODY: */
<cc1:CalendarExtender ID="CE" runat="server" Enabled="True" TargetControlID="CalendarDateTextBox"
OnClientShown="clientShown" />
You need the following css class:
.ajax_calendar .ajax_calendar_active .ajax__calendar_day {background-color:red;}