I am using Vue2 Date Range Picker. When I try and pick a date range I either click a start and and end date or I select one of the ranges. In either case it shows the desired input in the fields, however when I click apply the end date changes to another date.
For example, I might click on the last quarter range and it displays 01-04-2022 → 30-06-2022, which is what I want. However when I click apply, it changes to 01-04-2022 → 30-01-2023. I have been pulling my hair out trying to figure out why.
I have the following configuration.
<date-range-picker
v-model="dateRange"
:controlContainerClass="'form-input'"
:locale-data="locale"
:ranges="ranges"
class="picker"
/>
dateRange: {
startDate: null,
endDate: null,
},
ranges: {
'Today': [today, today],
'Yesterday': [yesterday, yesterday],
'This Week': [start_of_week, today],
'Last Week': [start_of_last_week, end_of_last_week],
'This month': [start_of_month, end_of_month],
'Last month': [start_of_last_month, end_of_last_month],
'This Quarter': [start_of_quarter, end_of_quarter],
'Last Quarter': [start_of_last_quarter, end_of_last_quarter],
'This year': [start_of_year, end_of_year],
},
locale: {
direction: 'ltr',
format: 'dd-mm-yyyy',
separator: ' → ',
applyLabel: 'APPLY',
cancelLabel: 'Cancel',
weekLabel: 'W',
customRangeLabel: 'Custom Range',
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
firstDay: 1,
autoApply: true,
},
Aurelia project with TypeScript (tsc 2.1.4), JSPM and aurelia-materialize-bridge#0.20.6.
Project is multilingual (translations are in database and injected via "LanguageService" where needed) so we need translated instances of MdDatePicker too.
I found a way how to translate properties like monthsFull, monthsShort, today... per instance of MdDatePicker (pickadate.js picker's properties actually) on this way in view/view-model:
<input md-datepicker="container: body;value.two-way: fromDate;"
md-datepicker.ref="dpickerFrom"
type="date" placeholder=${dtPickTitle} />
attached(
var picker = (<any>this).dpickerFrom.picker;
var settings = picker.component.settings;
settings.monthsFull = this.languageService.datePickerTran.monthsFull; // e.g. [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ]
settings.today = this.languageService.datePickerTran.today; //e.g."Heute"
picker.render(true);
)
I have tried to reach needed properties globally in App.ts:
import * as bridge from 'aurelia-materialize-bridge';
constructor (){
bridge.MdDatePicker.prototype;//Can't find where to put translations
}
but I could not find needed.
Is this right approach at all?
Considering given platform, is there any way to set this properties (defaults) on one place for all instances?
I've told the OP to post my answer back here. So here it goes.. :-)
There is an options bindable here: https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/datepicker/datepicker.js#L19
That object is merged here: https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/datepicker/datepicker.js#L64
And the result is used to initialize the datepicker here: https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/datepicker/datepicker.js#L76
Now, if you visited the links you may have seen a commented example of an i18n config here (German strings): https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/datepicker/datepicker.js#L47-L60
So, if you set the i18n properties in the options bindable, it could work..
<input
md-datepicker="container: body; value.two-way: selectedDate; options.bind:i18nOptions;"
type="date" placeholder="pick a date"/>
Where i18nOptions might be:
{
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year
monthsFull: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ],
monthsShort: [ 'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez' ],
weekdaysFull: [ 'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag' ],
weekdaysShort: [ 'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa' ],
today: 'Heute',
clear: 'Löschen',
close: 'Schließen',
firstDay: 1,
format: 'dddd, dd. mmmm yyyy',
formatSubmit: 'yyyy/mm/dd'
}
I definitely want to make it more explicit.
I have a similar answer
In my view I have
<div class="input-field col s6">
#Html.EditorFor(model => model.FECHAI_VIG, new { htmlAttributes = new { #id = "fechai_vig", #class = "form-control datepicker", #onkeyup = "borrar(this);" } })
#Html.LabelFor(model => model.FECHAI_VIG, "De", htmlAttributes: new { #class = "active" })
</div>
And in the script
<script>
var elemth = document.querySelector('#fechai_vig');
var optionsth = {
format: 'dd/mm/yyyy',
i18n: {
clear: 'Limpiar',
today: 'Hoy',
done: 'Seleccionar',
previousMonth: '‹',
nextMonth: '›',
months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
weekdaysShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
weekdays: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
weekdaysAbbrev: ['D', 'L', 'M', 'X', 'J', 'V', 'S']
}
};
var instanceth = M.Datepicker.init(elemth, optionsth);
</script>
I'm using a calendar in ExtJS 4, and I want my field to display only a year.
Currently, when I use a calendar it displays in my field this kind of date: "08/20/2013".
I'm using this code:
{
xtype: 'datefield',
fieldLabel: 'test',
id: 'yearOfExecution',
dateFormat: 'd/m/y',
anchor:'20%',
displayField: 'label',
valueField: 'value'
}
As I said, I only want to display a year (from my previous example, it should display "2013").
Should I modify this line?
displayField: 'label'
Try changing date format to 'y'. This should be in the (thorough) Sencha API.
I am trying to put this code into a variable and then call that variable from phatom and phantom should generate graph eg: I save this code in var test="code" then I call test in phantomjs and it should generate the graph, is it possible?
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
Or this can also help
Create js file and call this from a variable
phantomjs highcharts-convert.js -infile options1.json -outfile chart1.png -scale 2.5 -width 300 -constr Chart -callback callback.js
It is unclear from your question what exactly you are trying to accomplish. If you have
var test = { xAxis: { ... } };
and you are trying to access that variable from within a webpage (i.e. to generate the graph in the actual DOM) you have to pass the variable as an argument to the page open method, i.e.:
var test = { xAxis: { ... } };
var page = require('webpage').create();
page.open(function (someVar) {
...
// now you have access to the test variable via someVar
...
}, test);
If that is not what you are trying to accomplish, please clarify your question and I will do my best to help.
Recently I have upgrade my Ext version from 4.0.7 to 4.1.1
In my model I have defined like
{name : 'StartDate',type: 'date' ,dateFormat: 'time'},
My Grid Column is
{
id: 'StartDateID',
width: 180,
text: 'Start Date',
dataIndex: 'StartDate',
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
editor:{
allowBlank: true,
xtype:'datefield',
format:'m/d/Y',
editable: true},
sortable: false, groupable: false }
On Edit I am doing
My_Grid.on('edit', function(editor, e) {
e.store.sync();
}
After clicking on Update I used to get [with Ext 4.0.7 ] date value as
2012-08-04T00:00:00
but after upgrade with 4.1.1 I am getting date value as
310008e
Which I am not understanding.
My date is in this format
1346351400000
Can you please suggest me what is missing here? Or else how to get proper date after clicking update button from RowEditor.
Your model definition is incorrect, if you want your desired format it should be like:
{name : 'StartDate',type: 'date' ,dateFormat: 'U'},
'time' is not in the documentation, the only reason you could actually be using 'time' is if it is a custom type you have created, which is probably not the case.