My date is a string in this format:
Dec 31, 1969 7:00:00 PM
I want to show a shorter date on the view so i do this with angular
<input ui-date="{ dateFormat: 'yy-mm-dd' }" ui-date-format ng-model="project.date" />
But then project.date is no longer the old format but the unix one (I think) :
1969-12-09T05:00:00.000Z
But i want to ouptput it in the previous format :
Dec 31, 1969 7:00:00 PM
How could i do this?
use Date filter, exp : {{yourDate | date:'medium' }}
check this : http://docs.angularjs.org/api/ng.filter:date
You can do the following:
<input ui-date="{ project.date | date : 'medium'}" ui-date-format ng-model="project.date" />
in you html tag or in your ctrl
$scope.today = $filter('date')(project.date,''MMM d, y h:mm:ss a'');
make sure you dependent inject $filter to your ctrl
To see more of date formats here
Related
Using x-editable JS plugin I added a new date type input in my form (Combodate (date) element), everything looks fine, but the input accepts the only date starting from 1/1/1970. I need to change this configuration because the birthdate of my customer can be previous than 1970.
Unfortunately in the x-editable documentation (link) there isn't any configuration related to the date range.
Below my HTML code (with PHP data):
<a href="#" id="dipendente-datanascita"
data-type="combodate"
data-value="<?php echo $dipendente["datanascita"]; ?>"
data-format="YYYY-MM-DD"
data-viewformat="DD/MM/YYYY"
data-template="DD/MM/YYYY"
data-pk="1"
data-title="Select Date of birth"
data-url="api/update-dipendente.php?id=<?php echo $id_dipendente; ?>"
class="editable editable-click" style="">
<?php echo $utility->formatDate($dipendente["datanascita"]); ?>
</a>
and the JS part:
$('#dipendente-datanascita').editable({
prepend: "Non selezionato",
mode: 'inline',
inputclass: 'form-control-sm'
});
Can anyone help with this? thank you in advance.
The year 1970 is a configuration that can be edit changing the file bootstrap-editable.js that is part of the library (remember to also generate the minified js if the app uses it). Here an example of the configuration:
$.fn.combodate.defaults = {
//in this format value stored in original input
format: 'DD-MM-YYYY HH:mm',
//in this format items in dropdowns are displayed
template: 'D / MMM / YYYY H : mm',
//initial value, can be `new Date()`
value: null,
minYear: 1970,
maxYear: 2015,
yearDescending: true,
minuteStep: 5,
secondStep: 1,
firstItem: 'empty', //'name', 'empty', 'none'
errorClass: null,
roundTime: true, // whether to round minutes and seconds if step > 1
smartDays: false // whether days in combo depend on selected month: 31, 30, 28
};
Change the minYear value and it will work!!
How to change the time to the format when the day is 23 o'clock. For example, when I click on 23 in the datapicker, 11 is shown, but i want to see 23
Code
function onChange(date, dateString) {
console.log(date, dateString);
}
ReactDOM.render(
<Space direction="vertical">
<DatePicker
allowClear
placeholder="укажите дату"
local="ISO 8601"
showTime={{
defaultValue: moment("00:00:00", "HH:mm:ss")
}}
format="YYYY-MM-DD hh:mm:ss"
onChange={onChange}
/>
</Space>,
document.getElementById("container")
);
Lowercase, i.e. 'h' or 'hh' is used for 12 hour format in momentjs.
Now since you want a 24 hour format, use 'H' or 'HH'. Use format="YYYY-MM-DD HH:mm:ss". This should work.
I have some blog posts where I want to display the date which the post was published. For that I want to use momentjs. So the HTML looks like this
<span class="published_date" data-publish-date="2019-06-20"></span>
<span class="published_date" data-publish-date="2019-07-01"></span>
<span class="published_date" data-publish-date="2019-08-23"></span>
My JS looks like this:
$(".published_date").each(function() {
let publishDate = $(this).attr("data-publish-date");
let formattedDate = moment(publishDate, "d. MMMM YYYY").format(
"d. MMMM YYYY"
);
$(this).text(formattedDate);
});
This returns wrong dates
4. June 2019
1. July 2019
5. August 2019
I have no clue why this happens so can someone help me out?
Since your input is in ISO 8601 recognized format you can use moment(String) and in format() use uppercase D is Day of Month instead of lowercase d that stands for Day of Week
Here a live sample:
$(".published_date").each(function() {
let publishDate = $(this).attr("data-publish-date");
let formattedDate = moment(publishDate).format(
"D. MMMM YYYY"
);
$(this).text(formattedDate);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<span class="published_date" data-publish-date="2019-06-20"></span>
<span class="published_date" data-publish-date="2019-07-01"></span>
<span class="published_date" data-publish-date="2019-08-23"></span>
Two problems:
You've explicitly given it a format to parse with ("d. MMMM YYYY"), but that format doesn't remotely match the data you're providing it ("2019-06-20", etc.).
You're using d, not D, when formatting. Per the documentation, d is the day of the week, not the day of the month.
If you make the formats correct, it should work:
let formattedDate = moment(publishDate, "YYYY-MM-DD").format(
"D. MMMM YYYY"
);
Live Example:
$(".published_date").each(function() {
let publishDate = $(this).attr("data-publish-date");
let formattedDate = moment(publishDate, "YYYY-MM-DD").format(
"D. MMMM YYYY"
);
$(this).text(formattedDate);
});
<span class="published_date" data-publish-date="2019-06-20"></span>
<span class="published_date" data-publish-date="2019-07-01"></span>
<span class="published_date" data-publish-date="2019-08-23"></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
I have the following input
<input type="date" ng-model="startDateInput" ng-change="dateConvert()" />
And I set a default value since I call a service on the load of the page and need to pass the date as a parameter
$scope.startDateInput = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
console.log("$scope.startDateInput" + $scope.startDateInput)
But later on I want this value to be updated when the user touches the date input and selects a new date on the calendar that pops up.
The thing is, my value is not changed here.
stays the same as the default value.
$scope.dateConvert = function() {
var dateFrom = $scope.startDateInput;
$scope.params.startDate = dateFrom;
console.log("dateFrom " + dateFrom);
console.log(" $scope.params.startDate " + $scope.params.startDate);
}
the results of the log
dateFrom Wed Sep 13 2017 11:22:26 GMT+0100 (Western European Summer Time)
tab.accountStatement.controller.js:261 $scope.params.startDate Wed Sep 13 2017 11:22:26 GMT+0100 (Western European Summer Time)
It keeps the default value I assigned before, but why? How can I change this value?
angular.module('MyApp', [])
.controller('MyCtrl', function($scope,$filter){
$scope.default_date =$filter("date")(Date.now(), 'yyyy-MM-dd');
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<input type="date" ng-model="default_date" value="{{default_date}}">
<p>{{default_date}}</p>
</div>
</div>
I am using angular-bootstrap-datetimepicker for date time selection. I want to show dates in moment format "MMMM Do YYYY, h:mm a"("December 22nd 2016, 2:00 pm"). Is there any way to do it?
As per the documentation here
You can pass configuration options as a function or an object.
Selected Date: {{ data.date | date:'MMMM Do YYYY, h:mm a' }}
<datetimepicker data-ng-model="data.embeddedDate"
data-datetimepicker-config="{ startView:'day', minView:'day' }" />
You can defined the angular bootstrap format like :
uib-datepicker-popup="{{format}}"
format which you want to show like
uib-datepicker-popup="MMMM Do YYYY, h:mm a"
Here is the link, I refered
You can take a look at the documentation if required
Selected Date: {{ data.date | date:'MMMM Do YYYY, shortTime' }}
<datetimepicker data-ng-model="data.embeddedDate"
data-datetimepicker-config="{ startView:'day', minView:'day' }" />