datesDisabled Bootstrap-DatePicker - bootstrap-datepicker

There are plenty of questions on this but none of them seem to have worked for me.
I will eventually have an array of dates being passed in for multiple days over different months.
I'm using this version of the bootstrap datepicker
https://bootstrap-datepicker.readthedocs.io/en/latest/
looking over the docs, a simple array of dates for'disabledDates' should be all it needs to get these working, but I'll be damned if it accepts it.
Any ideas as to why it doesn't work?
var disabledDates = ['28/3/2018','22/3/2018'];
$('.datepicker').datepicker({
format: 'DD/MM/YYYY',
maxViewMode: 1,
todayBtn: "linked",
clearBtn: true,
multidate: true,
daysOfWeekDisabled: "0,6",
datesDisabled: disabledDates
})

In disabledDates variable you used dates like '28/3/2018' and '22/3/2018'. According to the doc these dates are in this format d/m/yyyy or dd/m/yyyy.
But, inside datepicker() function you have declared the date format as DD/MM/YYYY.
Try to change the date format format: 'DD/MM/YYYY', to format: 'd/m/yyyy', or format: 'dd/m/yyyy',

Related

Why is moment.js date is 50 years ahead?

Using moment to format a date retrieved from a firestore timestamp. However the date is off by at least a day, and at most, a few months. and the year is off by 50 no matter what.
Here is the firestore timestamp
EDIT: Here is whats logged from lastMsg.seconds:
1581372232
I retrieve the time in seconds in a FlatList's renderItem:
renderItem={({ item, index }) => {
return (
<Components.InboxItem
title={item.withName}
subtitle={item.lastMsg.seconds}
img={item.withImg}
/>
);
And finally inside the component I use moment like so:
const date = moment()
.utc()
.startOf('year')
.seconds(props.subtitle)
.format('MMMM DD YYYY');
While ive tried multiple format configurations, the one that gets it closest to accurate is with .startOf("year"). Even then, date is being displayed as "February 09, 2070". If .startOf() is changed to "month", "day", or "hour", the date gets changed to sometime in march. How can this be fixed to display the date as in firestore?
Looking at the https://firebase.google.com/docs/reference/js/firebase.firestore.Timestamp we can either get JS Date object or use the toMillis method to get milliseconds.
Now the simple moment.js api for converting timestamp to moment object is given here https://momentjs.com/docs/#/parsing/unix-timestamp-milliseconds/
moment(Number);
Now you can apply format on the moment object like below:
moment(Number).format(String);
Your issue with wrong date is may be due to the use of utc and seconds together and not passing timestamp to moment()
Use moment.unix():
const props = {
subtitle: 1581372232
};
const date = moment
.unix(props.subtitle)
.format('MMMM DD YYYY');
console.log(date);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
because item.lastMsg.seconds is
The number of seconds of UTC time since Unix epoch 1970-01-01T00:00:00Z

date-fns equal to moment(date).format('L')?

If I use momentjs like moment(date).format('L') it will format date according to the input locale. For example for US will output 10/31/2018.
How can I do the same using date-fns? If I use format(date, [format], [options]) it will always format date based on the input [format] no matter the locale passed in [options]?
With date fns, you can use Long localized date
https://date-fns.org/docs/format
For example, equivalent of moment(date).format('L') should be format(new Date(), 'P')

Convert datepicker date to ISO format with moment.js

My task is to use a datepicker to pick a date in the prescribed format, eg(MM-DD-YYYY) and pass it to the server as ISO formatted.
While it test the output the ISO formatted date is one day behind.
For example
If i select
07-13-2015
My Output ISO format is
ISO format is :2015-07-12T18:30:00.000Z
Here you can see date is 13 but the output date is 12
I am from India. I tried with zone and utcOffset, ended up with no results. How do i set it right
Here is the JSFIDDLE
js code
$('#datetimepicker1').on("dp.change",function(e){
var selectedDate = $('#datetimepicker1').find("input").val();
selectedDate = moment(selectedDate,"MM-DD-YYYY");
$(".temp").text(moment(selectedDate).toISOString());
});
I do have a hidden field which value will be updated on change and that will be processed in the server. No issues on that.
$('#datetimepicker1').on("dp.change",function(e){
var selectedDate = $('#datetimepicker1').find("input").val();
selectedDate = moment(selectedDate,"MM-DD-YYYY");
$(".temp").text(selectedDate.toISOString());
});
Your selectedDate is already a moment object so you do not need to feed it back into another moment.
Example:
var test = '07-13-2015'
var mtest = moment(test,"MM-DD-YYYY")
mtest.toISOString()
"2015-07-13T06:00:00.000Z"
Your could try converting the date format to UTC at once.
selectedDate = moment(selectedDate).utc('MM-DD-YYYY')
According to http://dygraphs.com/date-formats.html, if you pass a string like '07-13-2015', it means Midnight of 13th July 2015. Now, if you use toISOString function, it will convert it to UTC by default. To not convert it to UTC, just pass a parameter true in the toISOString function. (Moment.js docs)
For example:
var date = '07-13-2015';
date = moment(date,'MM-DD-YYY');
console.log(date.toISOString(true));
This way, moment will not convert the date to UTC.

Bootstrap-datepicker and multidate values in input field

I use Bootstrap-datepicker with embedded and multidate options.
I would like that chosen dates appear in the input field. How to do this?
I try this code but only one date appear :
$('#date').datepicker().on('changeDate', function(e){
$('#date_input').val(e.format('mm/dd/yyyy'));
});
With this other solution, the date format is not convenient for me :
$('#date').datepicker().on('changeDate',function(){
var value=$("#date").datepicker("getDates");
$('#date_input').val(value);
});
I also love the format is as follows: dd/mm/yyyy
For instance : 06/07/2014, 07/07/2014, 10/07/2014
Can you help me please?
In advance thanks a lot for your answers
var picker = $('#picker').datepicker();
console.log( picker.datepicker('getFormattedDate') );

formatting events date and time on fullcalendar

Supposing am getting the dates for an event from a database in what format should my event date be am thinking.
start: 2012-03-29, 08:00am,
end: 2012-03-30, 08:00am,
allday: false,
it does not recognize the end date and the time for the event
Am I doing the wrong thing?
I use the following format and it works for me:
mm/dd/yyyy hh:mm tt
e.g.
03/15/2012 05:10 AM
Also make sure that in your JSon you have allDay as a boolean and not as a string
"allDay"= "false", // this is wrong. In this case you won't see any events on your calendar
"allDay"= false, // This is correct
Hope this helps

Resources