i use moment js and moment Jalali js and angular-moment js , i would use datePicker jalali and i use angular-moment-picker when i use attribute locale="fa" , call me error Invalid Jalali year 3503
my code here :
<div
moment-picker="profilePet.birthday"
locale="fa"
format="MM/DD/YYYY"
ng-model-options="{ updateOn: 'blur' }">
click me
and error inside the console :
Error: "Invalid Jalali year 3503"
in order to use Jalali -moment to convert time from Gregorian to Jalali you can simply use this method:
getDate(gregorianDate) {
let recivedDate = this.formatGregorianDate(gregorianDate);
let Jalali= moment(recivedDate, 'YYYY/MM/DD').lang('en').format('jYYYY/jMM/jDD');
console.log(Jalali);
}
but because the format of time maybe can not match you can use this method to find desire format, then use the result of the method to input of convert date:
formatGregorianDate(gregorianDate) {
var date = new Date(gregorianDate);
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var fullYear = year + '/' + month + '/' + day;
return fullYear;
}
You can create a Pipe for Jalali-moment and add this code in NPM, and use it according to the link =>
Install via NPM:
`npm install jalali-moment -S`
then import in Angular Pipe:
`import * as moment from 'jalali-moment';`
then Pipe content:
#Pipe({
name: 'jalali'
})
export class JalaliPipe implements PipeTransform {
transform(value: any, args?: any): any {
let MomentDate=moment(value);
return MomentDate.format("jYYYY/jM/jD");
}
}
At the end you can look this page :
[https://www.npmjs.com/package/jalali-moment/v/1.0.6][1]
[1]: https://www.npmjs.com/package/jalali-moment/v/1.0.6
Related
Basically, the most scenarios of programming in react js. The conversion of time is from this 2023-01-25T19:15:27.615Z to HH:MM. So, here in my scenario I want to make the vice versa of it.
within moment you can do this by telling moment the format you are providing for instance moment('13:00', 'HH:mm'); is valid and the return object can be converted to ISO string with .toISOString()
You can use date-fns library.
Firstly install npm install date-fns
import {format} from 'date-fns'
...
format(new Date(),'HH:mm') // MM for months you have to use mm
An external library is not needed to set the hours and minutes for the current date and get an ISO string — a simple function will work:
function timeToIsoString (
hoursMinutes,
{ date = new Date(), utc = false } = {},
) {
const [h, m] = hoursMinutes.split(":").map(Number);
const d = new Date(date.getTime());
d[utc ? "setUTCHours" : "setHours"](h);
d[utc ? "setUTCMinutes" : "setMinutes"](m);
return d.toISOString();
}
const input = "12:34";
// Interpreting time in local time zone:
const output1 = timeToIsoString(input);
console.log(output1);
// Interpreting time in UTC:
const output2 = timeToIsoString(input, { utc: true });
console.log(output2);
// Starting with an existing date:
const date = new Date(Date.UTC(2008, 8, 15));
const output3 = timeToIsoString(input, { date, utc: true });
console.log(output3); // "2008-09-15T12:34:00.000Z"
I am trying to use Standard Date picker using below component but however I want to display custom error message when the enterted date is not in the speciied min & max range. But I am not able to achieve it as I could see the standard error message. I implemented the same by referring to : https://developer.salesforce.com/docs/component-library/bundle/lightning:input/example and in this link I can see that the custom error messages can be shown. But nothing worked for me can anyone please help.
https://developer.salesforce.com/docs/component-library/bundle/lightning:input/documentation
<lightning:input aura:id="field
type="date"
name="MyDatefield"
label="MyDateField"
value="2017-09-07"
min="2017-09-05"
messageWhenRangeUnderflow="Select correct date range1"
max="2017-09-22"
messageWhenRangeOverflow="Select correct date range2"
onchange="{!c.checkValidity }"
</aura:component>
This was asked 1 month back but sharing the answer if anybody else runs across this. Use lightning's setCustomValidity() and reportValidity() methods.
Component:
<aura:component >
<lightning:input aura:id="field"
type="date"
name="MyDatefield"
label="MyDateField"
value="2017-09-07"
min="2017-09-05"
max="2017-09-22"
onblur ="{!c.checkValidity }"
/>
</aura:component>
Controller:
({
checkValidity : function(component, event, helper) {
var inputCmp = component.find("field");
inputCmp.setCustomValidity(""); //reset error
var value = inputCmp.get("v.value");
console.log('value: '+value);
var lowerRange = new Date("2017/09/05");
var higherRange = new Date("2017/09/22");
if(!inputCmp.checkValidity()){
if(Date.parse(value)){
if (Date.parse(value) < lowerRange) {
inputCmp.setCustomValidity("Select correct date range1");
}else if (Date.parse(value) > higherRange){
inputCmp.setCustomValidity("Select correct date range2");
}
}else{
inputCmp.setCustomValidity("Invalid value");
}
}
inputCmp.reportValidity();
}
})
I'm using this angularJS datepicker in my application and would like to know if there is a way to display only months and years in the calendar and remove the days?
This is how I'm using the datepicker:
<datepicker date-format="MM yy" button-prev-title="previous month" button-next-title="next month" button-prev="<i class='fa fa-arrow-left'></i>" button-next="<i class='fa fa-arrow-right'></i>" id="dtDate" name="dtDate" >
<input ng-model="dtDate" />
</datepicker>
I tried to add date-format="MM yy" but it only changes the selected date and not the datepicker itself.
I think you might be interested in using this git repository that I created.
https://github.com/morfsys/multiple-month-picker
This is how you can use it in your project:
HTML
<input type="text" multiple-month-picker />
JS
//Initiate your app by injecting 'mmp-morfsys'
var app = angular.module('app-name', ['mmp-morfsys'])
It helps you to select multiple months across multiple years. The best thing? It is on AngularJS.
I hope it helps you.
I have the same problem with angularjs-datepicker.
I used another datepicker: angularjs-material.
Here is how you can use it:
<md-datepicker ng-model="startDate" md-mode="month" md-placeholder="dd/MM/yyyy" md-date-locale="mylocale" md-open-on-focus></md-datepicker>
And then in your controller:
function pad(n) {return n < 10 ? "0"+n : n;}
$scope.mylocale = {
formatDate: function(date) {
var d=new Date(date);
if(isNaN(d.getTime())) {
return '';
} else {
return pad(d.getDate())+"/"+pad(d.getMonth()+1)+"/"+d.getFullYear();
}
},
parseDate: function(date) {
var ds = date.split('/');
var d=new Date(ds[2],ds[1]-1,ds[0]);
if(isNaN(d.getTime())&&d!=''){
return new Date(NaN);
} else {
return d;
}
} };
And it is working. Just make sure that you properly handle case when input is invalid (form.startDate.$invalid).
If someone has a solution for angularjs-datepicker, please let us know.
I'using this library for react time picker: https://github.com/YouCanBookMe/react-datetime
But now I have 2 problems.
The time (Am, Pm, HH:mm) in timepicker doesnt'work , because it doesn't change, it remain to 12 : 00 AM
How correctly update state? because if I handle onChange (input manual write), it receive string, that I can't parse and it is invalid date.
My code is:
import DateTime from 'react-datetime';
var moment = require('moment');
handleChangeDate(propertyName, date) {
const event = Object.assign({}, this.state.event);
if (typeof date === 'string') {
date = moment(date);
}
event[propertyName] = data.format('DD/MM/YYYY HH:mm');
this.setState({ event: event });
}
and in Render() I have compoment:
<DateTime dateFormat={"dddd, MMM. Do YYYY, HH:mm (hh:mm a)"} value={this.state.event.to} onChange={this.handleChangeDate.bind(this, 'to')}/>
What is wrong?
check in below link.
Customized calendar will solve your problem.
https://github.com/YouCanBookMe/react-datetime#customize-the-appearance
After choose date in calendar then click on date. It will show the edit option for time.
Example Link
https://codepen.io/simeg/pen/YppLmO
Let it try
I've got a date coming in from an API that returns the date like this: 2012-10-12 00:00:00
I'm printing it to my page like this:
<span class="year" ng-bind-html="hit._highlightResult.original_release_date.value"></span>
with original_release_date.value being that date (2012-10-12 00:00:00). Does anyone know a quick and easy way to just return the year?
Any help is appreciated. Thanks in advance!
you can use the date api in angularjs
<span class="year"> {{ hit._highlightResult.original_release_date.value | date:"yyyy" }} </span>
hit._highlightResult.original_release_date.value should be a (according to doc)
Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
so create javascript date object and format it to show only the year,
step 1 - create a filter to get a date object from a string (2012-10-12 00:00:00)
app.filter('dateToISO', function() {
return function(input) {
var dateTime = input.split(" ");
var date = dateTime[0];
var datePartials = date.split("-");
var time = dateTime[1];
var timePartials = time.split(":");
var formattedDate = new Date();
formattedDate.setFullYear(datePartials[0]);
formattedDate.setMonth(datePartials[1]-1);
formattedDate.setDate(datePartials[2]);
formattedDate.setHours(timePartials[0]);
formattedDate.setMinutes(timePartials[1]);
return formattedDate;
};
});
step 2 - create a controller function to get the date object
$scope.getDate = function() {
return $filter('dateToISO')('2012-10-12 00:00:00');
};
step 3 - call that function and get the date object to format in the HTML
<span class="year"> {{ getDate() | date:"yyyy" }} </span>
here is the working Demo Plunker
This may be a bit off and cheating but I think '2012-10-12 00:00:00'.split('-')[0] will do the trick