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
Related
Depending on the year selected in the dropdown, I need to set the date picker minDate and MaxDate. MinDate can only be Jan/01/{selectedYear} and MaxDate should be Dec/01/{selectedYear}
I tried below. But doesn't seem to work:
MinDate = moment().format(`01/01/${selectedYear}`);
MaxDate = moment().format(`02/01/${selectedYear}`);
Output looks like:
MinDate 01/01/2020 & MaxDate 02/01/2020
I don't get your point.
Can you please provide us your code? or maybe in a snippet or something.
And also, should MinDate & MaxDate be strings or Dates?
Do you want the output to be as follwing?
if selected year = 2020
MinDate: Jan/01/2020 & MaxDate: Dec/01/2020
if so, then you need to use this:
let selectedYear = 2020; //or "2020"
//using moment
let minDate = moment().month(0).format(`MMM/01/${selectedYear}`); //you can also manipulate the day via moment
let maxDate = moment().month(11).date(1).format(`MMM/DD/${selectedYear}`);
console.log('minDate: ', minDate);
console.log('maxDate: ', maxDate);
//although you can do the stuff above without Moment:
let minDate0 = `Jan/01/${selectedYear}`;
let maxDate0 = `Dec/01/${selectedYear}`;
console.log('minDate (without moment): ', minDate0);
console.log('maxDate (without moment): ', maxDate0);
<script src="https://momentjs.com/downloads/moment.js"></script>
Overview
Users need to select a date in a form field. This form field uses bootstrap-datepicker. It is very important that dates before today are non selectable.
Code
var date = new Date();
$('.datepicker').datepicker({
todayHighlight: true,
format: 'yyyy-mm-dd',
startDate: date,
minDate: date,
});
Problem
It is the 15th-18:00H here at the moment. My timezone is Paris +0200H... if I change my computer time to +10 then I am the 16th-04:00H. Trouble is that the date picker is still showing the 15th... I need to some how account for the time-zone offset so that it shows the 16th.
I am also using jstz and moment.js
Note to future self:
To get this to work you need to do the following:
var date = new Date();
var startDate = moment().utcOffset(-this.date.getTimezoneOffset()).format('YYYY-MM-DD'); // get the users timezone offset
$('.datepicker').datepicker({
todayHighlight: true,
format: 'yyyy-mm-dd',
startDate: startDate, // pass it in
minDate: date,
});
$('input[name=start_date]').val(startDate); // set the value of the field
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/
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');
I know how to gray out the weekends on the jQuery Datepicker by instantiating it like this:
$('.calendar').datepicker({ beforeShowDay: $.datepicker.noWeekends });
The Datepicker also automatically selects the current date, so if the current date happens to be on a weekend, nothing is selected.
How can I make it select the next weekday if the currentdate falls on a weekend?
Thanks a lot!
Al
You can loop through and find the next valid date based on whatever beforeShowDay function you're using and set the defaultDate property to the result, like this:
var sd = new Date();
for(var i = 0; i < 7; i++) {
if($.datepicker.noWeekends(sd)[0]) break; //found a valid day, hop out
sd.setDate(sd.getDate() + 1); //move to the next day
}
$('.calendar').datepicker({
beforeShowDay: $.datepicker.noWeekends,
defaultDate: sd
});
Here's a demo that works for today (otherwise you could only see it work on weekends :)