Develop Reference

JQuery datetimepicker exception day with minDate and maxDate

I'm facing a issue with datetimepicker.
I have a page with an Order, that has a delivery date.
Whenever the Order is listed, the datetimepicker has a certain value (for example, some day last week.) I want to be able to edit it but only select a set of avaiable dates (from today up to 30 days including "some day last week").
How should I proceed?
Function of the picker:
var maxdate = new Date();
maxdate.setDate(maxdate.getDate() + 30);
var $p = jQuery.noConflict();
$p("#foo").datetimepicker({
format: 'YYYY/MM/DD',
useCurrent:true,
showClose:true,
defaultDate: $.now(),
minDate: moment().millisecond(0).second(0).minute(0).hour(0),
maxDate:maxdate,
});
EDIT:
I'm guessing i wasn't very explicit with my question.
Example for what i want:
minDate = 2017/10/14
maxDate = 2017/10/30
(at this point everything works fine)
Date option that i want to pick = 2017/09/10 (that is 1 month older than minDate) without changing minDate!
I want to create an exception date that is not inside the range of min/max date.

For the options showed I guess you are using eonasdan-datetimepicker.
So proceed like this:
var maxDate = moment().add(30, 'day');
var $p = jQuery.noConflict();
$p("#foo").datetimepicker({
format: 'YYYY/MM/DD',
useCurrent: true,
showClose: true,
defaultDate: $p.now(),
minDate: moment().startOf('day'),
maxDate: maxDate,
});
Where maxDate will have 30 days added using moment method .add()
for minDate It is easier if you use startOf('day') as will be the same you have, but easier to read.
EDIT
Ok so what you want is to allow your users to choose a "special day" that is not in the array, so for that you could use enabledDates option.
In which you will add your special day and the range of the days enabled, so only thus will be allowed to be selected and would be something like this:
let currentFormat = 'YYYY/MM/DD';
let specialDay = '2017/09/10';
let maxDate = moment().add(30, 'day'); //To the picker not allow to go further in the view
let startDate = moment().startOf('day').format(currentFormat); //First date being added, current day
let enabledDates = [
moment(specialDay, currentFormat), //this is our "special day"
moment(startDate, currentFormat) // we format the date to the format needed ];
//Iterate and add 30 days, and only those will be able to be picked
for (var i = 1; i <= 30; i++) {
//apply the format
let date = moment().add(i, 'day').format(currentFormat);
enabledDates.push(moment(date, currentFormat));
}
//We init our picker with the 30 days and our special date
//`minDate` and `maxDate` still there to give the style to the view
$("#myDatepicker").datetimepicker({
format: currentFormat,
useCurrent: false,
showClose: true,
minDate: moment(specialDay, currentFormat),
maxDate: maxDate,
enabledDates: enabledDates,
});
Working fiddle https://jsfiddle.net/William_/2ze7bo27/
Edit: Make easier to change format and special date

How can I correctly set the default value for bootstrap 3 datetimepicker?

I am trying to set the default date/time for a bootstrap 3 datetimepicker
to today's date 08:00 AM.
The following code is what I have done. However, that does not seems to be setting the datetime for the field.
$(function(){
$('#started-at').datetimepicker({
format: 'MM/DD/YYYY LT',
useCurrent: false,
defaultDate: getDefaultStartAt()
});
});
function getDefaultStartAt()
{
var d = new Date();
var month = d.getMonth();
var day = d.getDate();
var year = d.getFullYear();
return new Date(year, month, day, 8, 0);
}
How can I correctly set the default value for bootstrap-datetimepicker?

Your js code is fine.
You probably didn't include (or in wrong order) something from minimal requirements. moment.js maybe?
Or your html could be wrong.
Here you can see working example with your code: https://jsfiddle.net/5vv9chgx/

eternicode bootstrap-datepicker - add one day to senond date without moment.js

I wanted to ask, if is possible to add one day to second datepicker, while selecting date in first datepicker.
Below some piece of code, part with comment, shows when this event is.
This code works fine, but i want to add one day, on first datepicker update.
Now this code update second datepicker with exact value of first one.
Is this possible without moment.js ?
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('.date-1').datepicker({
startDate: now,
onRender: function (date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (selected) {
startDate = new Date(selected.date.valueOf());
startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
// This code updates second datepicker, but should add + 1 day to this date.
$('.date-2').datepicker('setStartDate', startDate);
$('.date-2').datepicker('setDate', startDate);
}).data('datepicker');

JQuery datepicker return weeknumber and day of week

Im trying to get the weeknumber and the name/shortcut of the weekday according to the chosen date through a JQuery calendar.
Im not really proficient in JQuery so i can get the weeknumber, but i cant seem to get the name of the day with it.
Could anyone help me out?
$('#datepicker').datepicker({
onSelect: function (dateText, inst) {
$('#weekNumber').val($.datepicker.iso8601Week(new Date(dateText)));
}
});

you have to get the date, than extract the name of the day from it:
var date = $(this).datepicker('getDate');
alert($.datepicker.formatDate('DD', date));
hope it helps!
edit: you can find the working fiddle here.

You can add in your existing block to grab the day name, by using the format date syntax, found in the datepicker documentation, here:
http://api.jqueryui.com/datepicker/#utility-formatDate
In this case, full day name is obtained from 'DD', so your updated code might look like:
$('#datepicker').datepicker({
onSelect: function (dateText, inst) {
var d = new Date(dateText);
$('#weekNumber').val($.datepicker.iso8601Week(d));
$('#dayName').val($.datepicker.formatDate('DD', d));
}
});
Fiddle here: http://jsfiddle.net/duffmaster33/zL6m2wck/

Here is alot of information on how to use the javascript Date object.
Here is the code I suggest you:
$(function() {
$( "#datepicker" ).datepicker({
onSelect: function( dateText, dateObj ){
//You can get your date string that way
console.log(dateText);
//You can get a few value about the date, look in your console to see what you can do with that object
//i.e. - console.log(dateObj.selectedDay)
console.log(dateObj);
//You can see the result of the date in string that way
$('.string').append(dateText);
currDate = new Date(dateText);
//You can have a complete Date object using the Date javascript method
console.log(currDate);
//The Date object in javascript provides you all you need then
//Get the number of day in a week, from 0(Sunday) to 6(Saturday)
$('.getday').append(currDate.getDay());
//Create a function to see day Sun - Sat
function getWeekDay(date) {
var days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
return days[ date.getDay() ]
}
//Then we use it
$('.getweekday').append(getWeekDay(currDate));
}
});
});
You can see my fiddle there:
https://jsfiddle.net/qapw32Lp/
Here is a great source of information you can use also abotu the Date Object:
http://javascript.info/tutorial/datetime-functions

Javascript Date format not working with GetDay

I am using a jquery datepicker and i had an option box being populated with info depending on what day it was..
Worked perfectly...
$('#bydate').datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
beforeShowDay: unavailable,
minDate: -0,
dateFormat: "dd/mm/yy",
onSelect: function(e) {
var date = new Date(e);
var day = date.getDay(); // 0 = sunday etc...
// clean all the options
$("#duration").empty();
// if monday
if (day === 1) {
// add "5 days" options
$("#duration").append("<option value='5'>5 days</option>");
// else if friday
} else if (day === 5) {
// add 3 / 7 / 14 days options
$("#duration").append("<option value='3'>3 days</option>"
+ "<option value='7'>7 days</option>"
+ "<option value='14'>14 days</option>");
} else { // else...
}
}
Until i came to needing to change the format from mm/dd/yy to dd/mm/yy.
Now it doesn't work, it looks like getDay is getting the month number and trying to calculate the day number...
I need date to know its dd/mm/yy or getDay to know that I am using dd/mm/yy
example here http://offline.raileisure.com/

The problem is that you changed the format of how the datepicker shows the dates, but not the one of the constructor Date(). You can do this:
onSelect: function(e) {
e = e.split('/')[1] + '/' + e.split('/')[0] + '/' + e.split('/')[2];
var date = new Date(e);
...

You can also use the datepicker's parseDate function, which takes the date format as parameter. See http://docs.jquery.com/UI/Datepicker/parseDate for details