Following exactly the docs's instructions on languages, I'm trying to display the date in German format. Instead I still see it in English: "12 Apr 2020".
Also tried in Spanish, still get "12 Apr 2020".
Am I missing something?
import Datepicker from 'vuejs-datepicker'
import {en, de} from 'vuejs-datepicker/dist/locale'
data () {
return {
en: en,
es: es
}
}
<datepicker :language="de"></datepicker>
In your example you are not returning German, but you are trying to use it.
import Datepicker from 'vuejs-datepicker'
import {en, de, es} from 'vuejs-datepicker/dist/locale'
data () {
return {
en: en,
es: es,
de: de
}
}
<datepicker :language="de"></datepicker>
Related
I want the date-format "YYYY/MM/DD" and therefore I use 'ja-JP' in my app.module
providers: [
{provide: MAT_DATE_LOCALE, useValue: 'ja-JP'},
]
I get the right date-format "YYYY/MM/DD" but the datepicker is displayed in japanese.
I would like to keep the default layout
Can you help me?
I am trying to use moment.js within a very simple vue build. I have added moment.js to the body of my index page, but when i try to use moment.js I keep getting the console error "ReferenceError: moment is not defined".
// registering the date picker
components: {
vuejsDatepicker,
},
// the component with some props
<vuejs-datepicker
:value="this.default"
name="datepicker"
:clear-button="true"
:typeable="true"
v-model="GetPaymentDate"
:format="customFormatter"
input-class="form-control"
></vuejs-datepicker>
methods: {
// the method to produce formated date
customFormatter(date) {
return moment(date).format('MMMM Do YYYY, h:mm:ss a');
}
},
// where Im trying to display formated date - this is the bit that breaks things - the | formatDate
<p>The delivery Date is <b>{{ GetPaymentDate | formatDate}}</b></p>
// the order of my scripts on the index file
<script src="vue-moment.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> . </script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
simply add the below line. you can add it inside the main.js or the component file
import moment from 'moment';
I think this question might be solved without necessarily knowing about the widget. I'm using angular2-datetimepicker (https://www.npmjs.com/package/angular2-datetimepicker) for calendars in my app. The docs are pretty straight-forward, although they always forget how make it work for everyone. I was getting console errors and had to add a name attribute as well as ngDefaultControl to the tag like this:
<angular2-date-picker [(ngModel)]="date" [settings]="settings" name="angular-calendar" ngDefaultControl></angular2-date-picker>
The component has a reference to the model with its settings as stated in the docs:
date: Date = new Date();
settings = {
bigBanner: true,
timePicker: false,
format: 'dd-MM-yyyy',
defaultOpen: true
}
When inspecting the element I get that the widget is (in my opinion) working properly, but it is not displaying:
<angular2-date-picker _ngcontent-c1="" name="angular-calendar" ngdefaultcontrol="" ng-reflect-name="angular-calendar" ng-reflect-model="Mon Jul 02 2018 11:59:53 GMT+0" class="ng-untouched ng-pristine ng-valid"></angular2-date-picker>
When checking the CSS affecting the element I find there are no specific rules applying to it. Any income is appreciated.
Here is an working example stackblitz,
https://stackblitz.com/edit/angular-mmq3ng
Install Commands,
npm install angular2-datetimepicker --save
Import app.module.ts file //maybe error became not imported in your app.
import { AngularDateTimePickerModule } from 'angular2-datetimepicker';
#NgModule({
imports: [
AngularDateTimePickerModule,
]
})
Typescript File,
export class AppComponent {
date: Date = new Date();
settings = {
bigBanner: true,
timePicker: false,
format: 'dd-MM-yyyy',
defaultOpen: true
}
constructor(){}
}
Html File(Iam used same you mentioned thing),
<angular2-date-picker [(ngModel)]="date" [settings]="settings" name="angular-calendar" ngDefaultControl></angular2-date-picker>
Output screenshot,
Make sure you have to import app.module.ts file, AngularDateTimePickerModule this module.
I have facetwp installed in wordpress and after the search was made, the search widget doesn't show the correct date as per selected before search
how to override this display issue (selected date) by javascript?
To view this problem in action : https://www.sweetpictures.com.my/product-category/photographers/?fwp_photo=2018-01-31%2C2018-01-31%2C1&fwp_productcategory=ampang&fwp_expertise=wedding-reception
Supposed the calendar picker selected date was 31st jan 2018
but instead it shows Aug 20th 2018
Kind help and assistance appreciated
Use the documentation of Flatpickr to set the default date to the one you want : https://chmln.github.io/flatpickr/examples/#supplying-dates-for-flatpickr
That way you can add the following parameters to you flatpickr instance :
//example with jQuery
$('#your-date-element').flatpickr({
minDate: 'today',
dateFormat: 'd/m/Y'
})
If this is not working, try setting the input to the good date with the onReady function in the flatpickr instance :
//example with jQuery
$('#your-date-element').flatpickr({
minDate: 'today',
dateFormat: 'd/m/Y',
onReady: function (selectedDates, dateStr, instance) {
$('#your-date-element input').val(
instance.formatDate(new Date(), 'd/m/Y')
)
},
})
Is it possible to change the format on the onMouseOver event in Dygraph?
Currently the format is:
YYYY/MM/DD HH:MM:SS
I would like it to display as
MM/DD/YYYY HH:MM:SS
Is it possible to change the current format?
Thanks for your assistance.
Jay
You want to set the valueFormatter option on the x-axis: http://dygraphs.com/options.html#valueFormatter
For example,
new Dygraph(div, data, {
axes: {
x: {
valueFormatter: function(ms) {
return new Date(ms).strftime("%m/%d/%y %H:%M:%S");
}
}
}
});
Live example here: http://jsfiddle.net/eM2Mg/772/
It's worth noting that Date.strftime() is not a standard JavaScript method: it's provided by strftime.js, which is included in the standard dygraphs bundle.