I am using angular and moment.js to display dates in my app. If the user chooses a date other than today I want the format to be '12:00 PM Sat 21st Nov' which I have working when the user clicks a day from my calendar with amDateFormat
the following:
$scope.setDate = function(day){
var myDate = day.date;
$scope.date = moment($scope.date).set(
{
'year': myDate.year(),
'month': myDate.month(),
'date': myDate.date()
}).toDate();
}
<div> {{ date | amDateFormat:'h:mm A ddd Do MMM'}}</div>
If the date chosen is today how do I display the date to be '12:00 PM Today' instead?
I am not familiar with angular. However you can use moment calendar for today date.
From the doc you can tweak the calendar like this:
moment.locale('en', {
calendar : {
sameDay : 'LT [Today]'
}
});
And then call moment().calendar();
Here is a snippet with an alternative way of doing it assuming you are using a version that is at least 2.10.5:
var divTime = $('#time');
var time = moment().calendar(null, {
sameDay: 'LT [Today]'
});
divTime.text(time);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div id="time">
Related
I am using this datepicker - vuejs-datepicker. Current date format is MM.DD.YYYY, but I need it in DD.MM.YYYY format. For this I used the following customFormatter function.
customDatepickerFormatter: function (date) {
return moment(date).format("DD.MM.YYYY");
},
However, the input for example 21.09.2022 is rejected because vuejs datepicker interprets the date as 09.21.2022 which is obviously not a valid date. Can you help me fix this?
Here is how I would integrate a simple but friendly formater supporting EU formatting.
<template>
<section>
<div>
Input your date (DD MM YYYY format)
<input type="text" v-model.lazy="date" /> <!-- updating on focus lost -->
</div>
<p>result: {{ formatted }}</p>
</section>
</template>
<script>
import { format } from "date-fns";
export default {
data() {
return {
date: "20 11 2020",
};
},
computed: {
formatted() {
let [day, month, year] = this.date.split(/\D/) // safe for the separation
return format(new Date(year, month - 1, day), "PPP") // month - 1 offset is to make it simpler to compute
},
},
};
</script>
This is how it looks
Otherwise it looks like this package could also be a nice fit for you apparently: https://vuejscomponent.com/vuejs-datepicker-europedateformat
I'm using the bootstrap datetimepicker for my calendar. My code looks like this:
var sundaysDisabled = [
moment("17/12/2017"),
moment("7/1/2018"),
moment("14/1/2018"),
moment("21/1/2018"),
moment("28/1/2018"),
moment("4/2/2018")
];
$("#form_dateTakeout").datetimepicker({
inline: true,
format: 'L',
daysOfWeekDisabled: daysDisabled,
disabledDates: sundaysDisabled,
date: selectDate,
minDate: tomorrow
});
I've found the option disabledDates in the documentation.
The problem is I can still select these days, I'm only getting this warning:
But I think that it can't be the problem, am I right?
You are getting Deprecation Warning because your date string are not in a recognized format (ISO 8601 or RFC 2822), you have to use moment(String, String). In your case, you can have something like moment("17/12/2017", 'D/M/YYYY').
To set a default date to the datetimepicker, use defaultDate option instead of date (the first is documented while the latter isn't, even if it seems that both work).
Be sure that your defaultDate, minDate, disabledDates and daysOfWeekDisabled are coherent, see also useCurrent docs.
Set the defaultDate to an enabled date to prevent something like:
Uncaught Tried 7 times to find a valid date
Here a full example:
var sundaysDisabled = [
moment("17/12/2017", 'D/M/YYYY'),
moment("7/1/2018", 'D/M/YYYY'),
moment("14/1/2018", 'D/M/YYYY'),
moment("21/1/2018", 'D/M/YYYY'),
moment("28/1/2018", 'D/M/YYYY'),
moment("4/2/2018", 'D/M/YYYY')
];
var tomorrow = moment().add(1, 'd').startOf('d');
var daysDisabled = [3]; //e.g. disable all wednesday
var selectDate = moment().add(1, 'week').day(2); // e.g. select next tuesday
$("#form_dateTakeout").datetimepicker({
inline: true,
format: 'L',
daysOfWeekDisabled: daysDisabled,
disabledDates: sundaysDisabled,
defaultDate: selectDate,
minDate: tomorrow
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="form_dateTakeout"></div>
</div>
</div>
</div>
The problem is in moment() function usage.
Pay attention:
moment("17/12/2017").isValid() --> returns false
moment("12/17/2017").isValid() --> returns true
Alternatively you can use this format:
moment("17/12/2017", "DD/MM/YYYY").isValid() --> returns true
Check here: https://momentjs.com/
Verify on this working CodePen: https://codepen.io/beaver71/pen/PEqYMv
I have a datepicker from which I want to extract the date and display in a label. Currently the date is getting displayed in the format MM/DD/YYYY but I want it in the format MMM dd, yyyy (Nov 17, 2017). Below is the code :
screenDate=view.byId("screeningDate").getValue();
var date = view.byId("__date");
date.setText(screenDate);
XML :
<HBox alignItems="Center" renderType="Bare">
<Label text="Date of Screening" width="50%"/>
<DatePicker class="sapUiLargeMarginBegin" width="50%" id="screeningDate"/>
</HBox>
In addition to Naveen's answer here's the solution with your existing code:
screenDate=view.byId("screeningDate").getValue();
var date = view.byId("__date");
// Make date object out of screenDate
var dateObject = new Date(screenDate);
// SAPUI5 date formatter
var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({pattern : "MMM dd,YYYY" });
// Format the date
var dateFormatted = dateFormat.format(dateObject);
date.setText(dateFormatted);
FYI, By getting view controls and updating the property in it is not good. It will be good if you have a model.
Solution for your problem is below,
<Label text="{
path: '/date',
type: 'sap.ui.model.type.Date',
formatOptions: {
style: 'medium',
pattern: 'MMM dd, yyyy'
}}"/>
<DatePicker dateValue="{/date}"/>
And in the controller I have a JSONModel as below,
onInit : function() {
this.model = new JSONModel({
date : new Date(0)
});
this.getView().setModel(this.model);
}
I am using pickadate.js for arrival & departure dates and would like the departure date to disallow any date on or before the arrival date and set the departure date to focus on the date after the arrival date. Thus an arrival on, say, 16th December 2016 would permit a departure date only from 17th Dec to be selected. This is what I have:
<script src="pickadate/lib/jquery.js"></script>
<script src="pickadate/lib/picker.js"></script>
<script src="pickadate/lib/picker.date.js"></script>
<script src="pickadate/lib/legacy.js"></script>
<script type="text/javascript">
$('#dateArrival').pickadate({
min: true,
max: new Date(2018,12,31),
format: 'd mmm yyyy', // Friendly format displayed to user
formatSubmit: 'yyyy-mm-dd', // Actual format used by application
hiddenName: true, // Allows two different formats
disable: [ // Dates already booked
new Date(2016,11,13),
new Date(2016,11,29)
]
});
$('#dateDepart').pickadate({
min: true,
max: new Date(2018,12,31),
format: 'd mmm yyyy',
formatSubmit: 'yyyy-mm-dd',
hiddenName: true,
disable: [
new Date(2016,11,13),
new Date(2016,11,29)
]
});
</script>
var frompic = $('#input_from').pickadate();
var topic = $('#input_to').pickadate();
After initialization , retrieve picker objects
fromIns = frompic.pickadate('picker');
toIns = topic.pickadate('picker');
Add set event handler
fromIns.on('set', function(event) {
if ( event.select ) {
sel = fromIns.get('select'); //get entered date
newDte = new Date( sel.year,sel.month,sel.date ) ;
newDte.setDate(newDte.getDate()+1); // inc date by 1
toIns.set('min', new Date( newDte.getFullYear(),newDte.getMonth(),newDte.getDate()));
}
});
I am currently working on an ASP.NET MVC 4 project, in my view I am using Kendo UI. I want to display only the month and year from the Datepicker widget(Example: JANUARY 2016) into the alertbox, but instead I am getting the following:IMAGE
My view code is as follows:
#(Html.Kendo().DatePicker()
.Name("datepicker")
.Start(CalendarView.Year)
.Depth(CalendarView.Year)
.Format("MMMM yyyy")
.Value(DateTime.Today)
.HtmlAttributes(new { style = " width: 95.5%;})
.Events(e => e.Change("monthpicker_change"))
)
<script>
// monthpicker_change function
function monthpicker_change() {
var month = $("#datepicker").data("kendoDatePicker");
alert(month.value());
}
</script>
Please suggest me what changes I need to do in my script, in order to display only the selected Month and Year in an Alert box.
PS: I have formatted the datepicker to display only the MONTHS and YEAR, not the standard dates
kendoDatePicker.value method always return javascript Date.
You should use Date methods to extract month and year from date object:
var date = $("#datepicker").data("kendoDatePicker").value();
alert((date.getMonth()+1) + '.' + date.getFullYear());
Beware: getMonth() return values from 0 to 11; 0 is january.
Here is full reference of Date functions: http://www.w3schools.com/jsref/jsref_obj_date.asp