I am trying to set the start and end date of a date range of a datepicker(), where the starting date of the range is 7 days in the past and the ending date is yesterday.
Currently I have it working so that the starting date of the range is 7 days in the past however I don't know how to set the ending date to yesterday.
I have tried the following, but it doesn't work as I expect it to:
var mindate = new Date();
mindate.setDate(mindate.getDate() - 7);
$('#date').datepicker({
language: 'en',
range : true,
minDate : mindate,
maxDate : new Date() - 1, //I guess the problem is here
multipleDates: true,
multipleDatesSeparator: " - "
})
One approach would be to compute a maxdate using the same technquie as you have used to compute mindate and then apply that max date value to the maxData parameter of the datepicker() instance:
var mindate = new Date();
mindate.setDate(mindate.getDate() - 7);
/* Compute max date of "yesterday" using same method as
min date */
var maxdate = new Date();
maxdate.setDate(maxdate.getDate() - 1);
$('#date').datepicker({
language: 'en',
range : true,
minDate : mindate,
maxDate : maxdate, /* Apply max date to date picker */
multipleDates: true,
multipleDatesSeparator: " - "
});
The datepicker() plugin also allows you to specify minDate and maxDate via the number of days relative to today's date. That means you can achieve the same result as shown above without needing to calculate mindate and maxdate by specifying minDate and maxDate as shown:
$('#date').datepicker({
language: 'en',
range : true,
minDate : -7, /* 7 days ago */
maxDate : -1, /* Yesterday */
multipleDates: true,
multipleDatesSeparator: " - "
});
minDate and maxDate can the amount of days from today.
https://api.jqueryui.com/datepicker/#option-minDate
So all you need to do is
minDate: -1,
maxDate: -7,
In HTML5 you already have a <input type="date"> so you don't need any kind of jQuery.
Unless you need support for legacy browsers I can only recommend using HTML5 over jquery.
HTML
<input type="date" id="date">
Vanilla JS
function getHtmlDateString(date) {
var dd = date.getDate();
var mm = date.getMonth()+1; //January is 0!
var yyyy = date.getFullYear();
if(dd<10){
dd='0'+dd
}
if(mm<10){
mm='0'+mm
}
return yyyy+'-'+mm+'-'+dd;
}
var min = new Date();
min.setDate(min.getDate()-7);
document.getElementById("date").setAttribute("min", getHtmlDateString(min));
var max = new Date();
max.setDate(max.getDate()-1);
document.getElementById("date").setAttribute("max", getHtmlDateString(max));
JSFiddle: https://jsfiddle.net/hmqe4sb6/
Related
I am using bootstrap-timepicker (https://jdewit.github.io/bootstrap-timepicker/) for 2 inputs: start_date and end_date. As I see the start date has a default and is the closest :00 or :30 minute. I want the end_date to have by default the closest :00 or :30 minute + 1 hour. How can I achieve this?
$('.timepicker-input-end').timepicker({
showInputs: false,
defaultTime: ????
});
It should be simple if you have javascript date object:
var defDate = new Date ();
// you can do 00 or 30 min logic here
defDate.setHours(defDate.getHours() + 1);
$('.timepicker-input-end').timepicker({
showInputs: false,
defaultTime: defDate.toString("hh:mm tt")
});
Update: because you use timepicker with 12 hour format you can use datejs to convert time easily.
I fount this the simplest solution, I forgot that fullcalendar library use moment.
$('.timepicker-input-end').timepicker({
showInputs: false,
defaultTime: moment($('input[name="appointment[start_time]"]').val(), "hh:mm TT").add(30, 'minutes').format("hh:mm A")
});
What do you think?
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
todayDateReport = year + "-" + month + "-" + day;
$("#currentDate").html(todayDateReport);
startDate = todayDateReport + " 00:00:00";
endDate = todayDateReport + " 01:00:00";
$("#startDateInput").val(startDate);
$("#endDateInput").val(endDate);
$('#startDate').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
collapse:false,
sideBySide:true,
useCurrent:false,
showClose:true,
maxDate : currentDate
});
$('#endDate').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
collapse:false,
sideBySide:true,
useCurrent:false,
showClose:true,
});
So i seem to have found a problem im not sure if this is jQuery bug or it's just not possible but if any one has managed this could they tell me how.
I have a Date picker and i don't want to allow users to select dates in the past.
var d = new Date($(this).val());
var nowDate = new Date();
var nowDateParse = ""+
nowDate.getFullYear()+
(nowDate.getMonth()+1 < 10? "0"+(nowDate.getMonth()+1): (nowDate.getMonth()+1))+
(nowDate.getDate()+1 < 10? "0"+(nowDate.getDate()+1): (nowDate.getDate()+1));
var selDate = ""+
d.getFullYear()+
(d.getMonth()+1 < 10? "0"+(d.getMonth()+1): (d.getMonth()+1))+
(d.getDate()+1 < 10? "0"+(d.getDate()+1): (d.getDate()+1));
if(parseInt(nowDateParse) > parseInt(selDate)){
alert("You can only select dates in the future!");
$("#searchDate").attr("value", ""+
nowDate.getFullYear()+"-"
(nowDate.getMonth()+1 < 10? "0"+(nowDate.getMonth()+1): (nowDate.getMonth()+1))+"-"+
(nowDate.getDate()+1 < 10? "0"+(nowDate.getDate()+1): (nowDate.getDate()+1))
)
return false;
}
as you can see i have tired $("#searchDate").attr("value" as well as $("#searchDate").val( but both seem to cause the same problem.
So Date starts on the current date: 27/06/2016 (UK format for: 2016-06-27)
if the user selects a date before that E.G 26/06/2016 (UK format for: 2016-06-26)
it shows the alert but fails to change the date back to today's date.
I'm not against using Standard Javascript with out jQuery calls if thats what is needed.
NOTES:::
As a note this code looks quite complex due to the fact it's doing a date comparison and not a datetime comparison as Javascript's Date object is a datetime not just a date
Add this after the control of the date validity:
var dToday = new Date();
var day = ("0" + dToday.getDate()).slice(-2);
var month = ("0" + (dToday.getMonth()+1)).slice(-2);
today = dToday.getFullYear() + "-" + month + "-" + day;
$("#searchDate").val(today);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="date" id="searchDate">
You must create a new date object and set it as minDate when you initialize the datepickers
<label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/>
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
http://jsfiddle.net/dssoft32/qvmqawfd/
I am using bootstrap date-picker on HTML form
<script>
$(document).ready(function() {
$('.datepicker').datepicker({
autoclose: true,
});
});
Now i have two date fields on my form called start-date and end-date. I want to set start-date to be the 1st day of the month and end -date to be the last date of the month . Is it possible to set it on Bootstrap date-picker ? sample code will be appreciated.
var dateToday = new Date();
var fromDate = (dateToday.getMonth() + 1) + "/01/" + dateToday.getFullYear()
var toDate = (dateToday.getMonth() + 1) + "/" + dateToday.getDate() + "/" + dateToday.getFullYear()
see more of my answer here. JQuery DatePicker on ASP.net
or this
var month = 0; // January
var d = new Date(2008, month + 1, 0);
alert(d); // last day in January
from Calculate last day of month in javascript
I want to select any date and convert it to same date of next upcoming month. For example- I select 1st jun 2014 then it show 1st july 2014 and so on..
Fiddle
HTML
<input type='text' id='txtDate' readonly='true' />
<input type='button' id='btnConvert' value='Convert' /><br/>
Current Date : <span id='spnCurrentDate'></span><br/>
Next Month Date : <span id='spnNewDate'></span>
JS
$("#txtDate").datepicker({
changeMonth: true
});
$("#btnConvert").click(function(){
$("#spnCurrentDate").html($("#txtDate").val());
$("#spnNewDate").html($("#txtDate").val());
If you are just asking how to add one month to a Date object, you can't just add one to the month as 2014-01-31 + 1 month -> 2014-02-31 which is converted to 2014-03-03.
So if you roll over to the following month, you probably want to set the day to the last of the previous month:
function addOneMonth(date) {
var o = new Date(+date);
date.setMonth(date.getMonth() + 1);
// If have rolled over an extra month, set to last
// day of previous month
if (date.getDate() != o.getDate()) {
date.setDate(0);
}
return date;
}
addOneMonth(new Date(2014,0,31)); // 2014-02-28
or not…
DEMO here
var date1 = new Date();
date1.setMonth(date1 .getMonth() + 1);
now date1 is an object holding a date which is 1 months later
If you want to set it to the jQuery UI DatePickers, you can do this
$("#txtDate").datepicker({
changeMonth: true
});
$("#btnConvert").click(function(){
var date1 = new Date($("#txtDate").val());
date1.setMonth(date1 .getMonth() + 1);
$("#txtDate").datepicker("setDate", date1 );
});
Try This Demo : http://jsfiddle.net/PQfDc/151/
$("#txtDate").datepicker({
changeMonth: true,
minDate:'0',
onClose: function( selectedDate ) {
var d = new Date(selectedDate)
d.setMonth(d.getMonth() + 1);
$("#txtDate").datepicker("setDate", d );
$("#spnSelectedDate").text(selectedDate);
$("#spnNewDate").text($('#txtDate').val());
}
});
$("#txtDate1").datepicker({
changeMonth: true,
minDate:'0'
});
$("#btnConvert").click(function(){
var d1 = new Date($("#txtDate1").val());
var date = d1.getDate();
var month = d1.getMonth()+1;
var year = d1.getFullYear();
var newDate = month + "/" + date + "/" + year
$("#spnSelectedDate1").text($("#txtDate1").val());
$("#spnNewDate1").text(newDate);
});
I have an datepicker from - to.
For the date -to i use an select value (stands for x month later).
My code works only, f.e when i set a number like 6 (date.setMonth(date.getMonth() + 6 );).
What is wrong?
My code is http://jsfiddle.net/uFcX7/3/
$(function (form) {
var month = $('select[name=GetMes]').val();
$(".fecha_inicio").datepicker({
dateFormat: "dd/mm/yy",
onSelect: function (dateText, instance) {
date = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings);
date.setMonth(date.getMonth() + month);
//date.setMonth(date.getMonth() + 6);
$(".fecha_fin").datepicker("setDate", date);
}
});
$(".fecha_fin").datepicker({
dateFormat: "dd/mm/yy"
});
});
When i use select value, the date are wrong.
This is because Javascript month has the range of 0 - 11. You would need to work out the difference and add a year. For instance:
if((date.getMonth() + month) > 11)
you will want to add 1 year to the date and then add the difference on months i.e.
date.setMonth(date.getMonth() + (month - 11));