I want to change the language a date picker is displayed in based on a moment() locale. Not just a translation of the date chosen by the user, but the date picker itself.
I have a datepicker with the following date-formatter
<b-datepicker
:date-formatter="(date) => moment(date).locale('ar').format('YYYY-MM-DD')"
></b-datepicker>
But am unable to get the date picker to change language. I've made sure to import and set the moment locale before hand.
Set locale, then format the date and then return it.
moment(date).locale('ar').format('LLLL');
You can format the date in different formats.
UPDATE:
To change moment language just define reactive data property (for example lang):
export default {
data() {
return {
lang: "ar"
}
}
}
and in your template:
<b-datepicker
:date-formatter="(date) => moment(date).locale(lang).format('YYYY-MM-DD')"
></b-datepicker>
So whenever you change lang, your date will be reformatted accordingly to your selected language.
Use month-names and day-names to translate the date picker. See here.
With moment, you can do that way:
<b-datepicker
:date-formatter="(date) => moment(date).locale(lang).format('YYYY-MM-DD')"
:month-names="moment.locale(lang).month()"
:day-names="moment.locale(lang).weekdaysShort()"
/>
But you should define locale(lang) at a global scope instead in component template...
Related
I am using vuejs-datepicker and I set datepicker (calendar) to today date by default like this:
<datepicker v-model="theDate" format="yyyy-MM-dd"></datepicker>
<!--shows yesterday date in calendar instead of today. "format" needed to get right format.-->
...
data() {
return {
myDate: null
}
},
...
created() {
this.myDate = this.$moment().format("YYYY-MM-DD")
console.log(this.myDate) //gives me today date in right format but no shows the same
}
...
This must be very basic and simple thing. But I don't really get why it is showing yesterday date and how to fix it.
Update: this describes my issue: https://github.com/charliekassel/vuejs-datepicker/issues/23
Finally, I found one solution here https://github.com/charliekassel/vuejs-datepicker/issues/158.
Following code doesnt work because fromView() is called for each updates, resulting in wrong date construction. What the best solution to use bi-directional filters on dates with aurelia ?
<input type=text" value.bind="date | dateFormat: 'DD/MM/YY'"></input>
import moment from 'moment';
export class DateFormatValueConverter {
toView(value, format) {
return moment(value).format(format);
}
fromView(str, format){
return moment(str, format);
}
}
It's an old question, but in case anyone else is wondering, to change the binding to re-evaluate on blur use:
<pre>
<input type=text" value.bind="date | dateFormat: 'DD/MM/YY' &
updateTrigger:'blur'"></input>;
</pre>
I'm pulling a JSONP date for different events and workshops from RegOnline, which gives me:
/DATE(1408545000000)/
I'm using Handlebars to list the different events, and I'm attempting to use MomentJS as a registerHelper. objs is the array of objects I'm pulling from RegOnline:
function bindEvents(objs) {
Handlebars.registerHelper('formatDate', function(objs){
return new Handlebars.SafeString(
moment(objs.StartDate).format("LL")
);
});
var eventHost = $("#eventHost").html();
var eventTpl = Handlebars.compile(eventHost);
$(".event-list").append(eventTpl(objs));
}
Here's my template:
<span class="timestamp">{{City}}, {{State}} - {{formatDate StartDate}}</span>
This gives me the current date, instead of the date of the event. What am I missing?
Figured it out! I didn't need to define objs.StartDate in the Moment line. Handlebars takes care of that for me, so I just needed to use objs.
Environment: Dojo.1.8.4
If the DateTextBox does not contain a valid date, I wish to start the calendar popup at a date in the past (it's a date of birth entry box). What is the best way of achieving this?
<div maxlength="12"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props="required: true, constraints:{min:'1880-01-01',
max: new Date()}, popupClass: 'dojox.widget.Calendar'">
</div>
I want to be able to put a 'startDate' parameter or similar in the above such that the constructor for the popup will pick it up and use it.
It looks as though the dojox.widget._CalendarBase sets the date to the current date in its constructor. (actually seems to set it in both the constructor and the declaration).
NOTE: If you are using the dijit/Calendar dropdown default then use the dropDownDefaultValue property as #vogomatix says in the other answer.
The following is if you are using the dojox/widget/Calendar for the dropdown.
By default the popup is set to the current value of the textbox and if null, it will use the current date.
You can do
1) set the value of the text box to what you want the default to be
OR
2) use aspects to set the value in the calendar when it is opened.
require([
'dojo/dom',
'dojo/aspect',
'dijit/form/DateTextBox',
'dojox/widget/Calendar'
], function(dom, aspect, DateTextBox, Calendar){
var dt = new DateTextBox({ popupClass: Calendar }, dom.byId('dtText'));
aspect.after(dt, 'openDropDown', function() {
// only default if there is no value
if(dt.get('value') == null) {
// Do not set the text box when changing value,
// so temporarily override the onchange function
var oldOnChange = dt.dropDown.onChange;
dt.dropDown.onChange = function(){};
dt.dropDown.set('value', new Date(1980, 7, 4)); // default to August 4th, 1980
dt.dropDown.onChange = oldOnChange;
}
});
});
See it in action:
http://jsfiddle.net/cswing/kQYhQ/
One solution is to set dropDownDefaultValue, which works with the standard calendar.
var dt = new DateTextBox({dropDownDefaultValue: new Date( 1950,1,1)},
dom.byId('dtText'));
dropDownDefaultValue gets passed to the calender in the form of currentFocus by the popup. Unfortunately dojox.widget.Calendar does not recognise currentFocus and the way round that is to either extend the class to do so, or to use the aspect method above.
This is how to extend the dojox.widget.Calendar in order to accept the currentFocus passed by the popup. Like the aspect method above, it temporarily disables onChange in order to prevent the value being placed in the parent DateTextBox
define([
"dojo/_base/declare",
"dojox/widget/Calendar"
], function(declare, calendar){
return declare("my.dijit.Calendar", [calendar], {
postCreate: function() {
this.inherited(arguments);
var oldOnChange = this.onChange;
this.onChange = function(){};
this.set('value', this.parseInitialValue( this.currentFocus));
this.onChange = oldOnChange;
}
});
});
I have a problem with sencha touch datepicker field. I want to set default (current date) in datepicker field but I am not able to find a way to do that. I am using sencha architect and there is no property exist to set default date in datepickerfield.
I am using the following code in value property of datepickerfield:
{
year: (new Date()).getFullYear(),
day: 1,
month: 5
}
But application stop working when using above code to display date.
Please tell me how to achieve this.
Checkout the 'value' property
http://docs.sencha.com/touch/2.2.1/#!/api/Ext.picker.Date-cfg-value
You'll want to add an initialize function to whatever class contains your datepicker.
Select that class.
Then add an initialize function from the config
panel.
Then add the following code to the initialize function:
var picker = this.down('datepicker');
picker.setConfig({
value: new Date()
});
this.callParent();
Of course if you have multiple datepickers you'll want to give it an item id and use this.down('#thedatepicker');
This can be done in the config of the container itself as follows:
xtype: 'datepickerfield',
value: new Date(),
picker: {
yearFrom: 2015,
yearTo: 2030
}