I have an AngularJS ui-grid for displaying a few fields including a date. The date comes from the server with the following format: 2018-01-31.
On the column definitions I have something similar to:
.columnDefs = [
...
{ name: 'startDate', displayName: 'Start Date', width: 170, enableHiding: false, cellTemplate: dateCellTemplate},
];
I've already added type: 'date' and cellFilter: 'date:\'yyyy-MM-dd\'', none of them have worked.
The template has just a date input like this:
const dateCellTemplate = '<div><input type="date" ng-model="MODEL_COL_FIELD" ng-change="grid.appScope.saveEdit(row)"></div>'
And whenever I receive the server response, my js console shows me the following error.
Error: [ngModel:datefmt] http://errors.angularjs.org/1.4.8/ngModel/datefmt?p0=2018-01-24
You need to convert the model to a Date object before using it. Use
new Date(your date here);
This is because you're using the input type Date and angular expects a date type rather than string.
Related
I have inherited some code that appears to use jqueryui 1.10.3 to incorporate a datepicker.
When I click the textbox to bring the datepicker up and choose a date, the format looks like
21.03.2020
However, if I click on the textbox again the format is
21/03/2020
The slash is the desired functionality. When the initial date is selected I want it to display as dd/mm/yyyy. How can I stop the date parts being separated by .
I have tried examining the jquery-ui-1.10.3 file to see if I can work out where the . separator is being applied but I haven't been able to come up with anything.
Somewhere in your web page or script section you should have code that looks like the code below.
This is where you can set your date time picker format. Look at the format date section.
$(document).ready(function () {
$("#<%= TextBoxName.ClientID %>").datetimepicker({
dayOfWeekStart: 1,
lang: 'en',
startDate: '<%= TextBoxName.Text %>',
step: 30,
formatTime: 'H:i',
formatDate: 'Y.m.d'
});
});
See more help here: jquery datetime picker
I want to take two date string with textbox or editor in mvc.
The format should be
"MM/yyyy-MM/yyyy".
I need to force the user for entering the input like above format without posting model.
#Html.TextBox("tbxDateRange", "", "{0:dd/MM/yyyy}", new { #class = "form-control dropdown", placeholder = "MM/yyyy - MM/yyyy" })
Above code not working event get just a formatted date string.
The format is working as expected. You are telling tbxDateRange's value (the zero in the third parameter ("{0:dd/MM/yyyy}") to format as day/month/year. It will therefore take the input in the text box and display it in that format.
It is only a display format. It will not enforce this format. For that you will need to do your own client side javascript (since you mentioned without posting the model). You could look at using a masked input element. ASP.NET MVC does not have a masked input out of the box.
You could use a masked input control like maskedinput which is a plugin for jQuery.
Additionally, you might want to look at breaking this up into two controls. One for the start and one for the end. You could consider using the html5 input type of date and you will automatically get a calendar. Although, if the day of the month will be too confusing for your users/UI then you could look at using jquery UI's datepicker and you can configure it to show only month and year.
Once you include jQuery UI in your app you would do something like jQuery UI DatePicker to show month year only.
In that example the winning answer formats the control in such a way to only show the month and year items of the control.
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
I am getting null value in check box column while onload jqxgrid first time.
Column properties:
{ text: ”, type: ‘bool’,datafield: ‘available’, columntype: ‘checkbox’,checked:false, width: 70},
jqxgrid properties:
width: ’100%’,
source: transAdapter,
autoheight: true,
pageable: true,
altrows:true,
editable: true,
selectionmode: ‘multiplecellsextended’,
Here I am not using threestatecheckbox property also but still I am getting null value in that column.can you help me how to fix these issue?
you want pass value for that datafield(available field) through json or array as input.
If you pass False as input it will uncheck the checkbox in onload.
If you pass True as input it will check the checkbox in onload.
This is the way you can fix the issue.
I have a trouble about hiding columns in a Grid at runtime.
In a project I use a function that returns the configuration of a column in a Grid.
For take the list of my columns in the Grid I use this piece of code:
var cmV = cmpGrid.getView();
var cmH = cmV.getHeaderCt();
var cm = cmH.getGridColumns();
The variable "cm" returns an array with the configured columns in the grid.
When I manually hide a column with the "column" option in the header Grid with ExtJS version 3.4.1 I can get the property
hidden:true
for the configured column.
But with ExtJS 6 the configured column doesn't include this property.
How I can resolve this issue?
Thanks at all in advance,
Lorenzo.
**
UPDATE
**
I have discovered this about my previous question.
With
var cm = cmH.getGridColumns();
I can get the array of the columns in the grid.
Analyzing this array with Firebug I had found the subarray "config" that contains the properties required by the columns for the configuration.
However now this array doesn't reflect more the changed configuration of a column but the default configuration applied.
My first question is if this new behavior is a bug or not.
Because I have found this new behavior I have changed my code to get the properties of a column not from the subarray config but from the radix. However now the possible configurations are so much.
Now my second question is if there is a way to reduce or to have only the principal properties for type of columns in a grid.
Why not just use grid.columns[index].setHidden(true) ?
Or if you want to take the list of columns, how about reconfigure columns.
var tempColumns = [];
// "cm" returns an array with the configured columns in the grid
cm.forEach(function(e) {
if (some conditions) {
tempColumns.push({
xtype: e.xtype,
text: e.text,
dataIndex: e.dataIndex,
hidden: true,
width: e.width,
align: e.align,
format: e.format
});
}
else{
tempColumns.push({
xtype: e.xtype,
text: e.text,
dataIndex: e.dataIndex,
hidden: e.hidden,
width: e.width,
align: e.align,
format: e.format
});
}
});
grid.reconfigre(null, tempColumns);
https://fiddle.sencha.com/#fiddle/17lq
I am using Rails 3.2.11 and am trying to use both jQuery UI Datepicker and Timepicker, however I am facing problems when trying to use the minDate and maxDate properties of Datepicker.
My view for one page (in HAML), looks like this:
.field_section
= f.label :date, "Date"
%br
= f.datepicker :date, :minDate => "-10y", :maxDate => "+1y", :dateFormat => "yy-mm-dd",
:constrainInput => true, :showOtherMonths => true, :size => 10
I have jQuery UI 1.10 and everything works perfectly.
However, in a completely separate view, i also need a timepicker, so i include the jquery-ui-timepicker-addon.js file (version 1.20) in my application.js
The order of inclusion is:
jQuery (1.8.3)
jQuery UJS jQuery UI (specifically, autocomplete, datepicker and slider)
Timepicker
Now, loading the first view (which only has a datepicker, not timepicker) gives me the following error in Chrome JS console, when i click on the datepicker input:
Error parsing the date string: Missing number at position 0
date string = -10y
date format = yy-mm-dd
Error parsing the date string: Missing number at position 0
date string = +1y
date format = yy-mm-dd
Which is repeated another 5 or so times. The errors point to jquery-ui-timepicker-addon.js:1912, which, unhelpfully is just:
$.timepicker.log = function(err){
if(window.console)
console.log(err);
};
Oddly, if i remove the minDate and maxDate attributes from my view, the errors go away - but i want to use these options. Any idea what is going on?
Thanks
Update:
i have noticed if i pass minDate and maxDate as hard coded strings, ie
:minDate => "2000-01-01", :maxDate => "2014-01-01"
the errors go away. I assume this means there is an error with dateFormat (somewhere..?)
So it looks like Timepicker does not understand relative dates. I think Timepicker attempts to always override Datepicker. With :minDate and :maxDate set to relative values (ie, +1y) Timepicker sees a format mismatch between +1y and yy-mm-dd for example - it does not seem to first convert the +1y to a Date object with format yy-mm-dd.
The solution for me was to explicity put in Date objects:
:minDate => Date.today - 10.years, :maxDate => Date.today + 1.years
Which really isn't as nice as +1y
Issue raised on Github