How to set auto select +7 days. User set first value e.g. 22.02.2022 and datapicker marks 01.03.2022 it means that endDate must be startDate +7
$('input[name="daterange"]').daterangepicker(
{
dateFormat: "MMMM D, YYYY",
timePicker: true,
startDate: moment(),
endDate: moment().startOf("days").add(7, "days"),
opens: "left",
applyButtonClasses: "Search",
},
var startDate = $("#datarange").data("daterangepicker").startDate._d;
var startDate_iso = startDate.toISOString();
if (
startDate_iso.substring(0, 10) == new Date().toISOString().substring(0, 10)
) {
//[wyl] dateCurrent = new Date();
//[wyl] interval_do = dateCurrent.toISOString();
var startDate = $("#datarange").data("daterangepicker").startDate._d;
var startDate_iso = startDate.toISOString();
var endDate = $("#datarange").data("daterangepicker").endDate._d;
var endDate_iso = endDate.toISOString();
interval = startDate_iso + "/" + endDate_iso;
console.log("A new date was set: " + startDate_iso + " to " + endDate_iso);
}
else {
var startDate = $("#datarange").data("daterangepicker").startDate._d;
var startDate_iso = startDate.toISOString();
var endDate = $("#datarange").data("daterangepicker").endDate._d;
var endDate_iso = endDate.toISOString();
interval = startDate_iso + "/" + endDate_iso;
console.log("A new date was set: " + startDate_iso + " to " + endDate_iso);
console.log("==================== Select date ================");
}
I have tried min / max but this is not the expected solution. it just allows me to return a date from the default to +7 days.
Thank you very much for any help.
Related
Based on this link
This where I will go if i wanna change my date format
defaults: {
formatDate: function(date) {
var formatted = $.datePicker.utils.pad(date.getDate(), 2) + '/' + $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' + date.getFullYear();
return formatted;
},
parseDate: function(string) {
var date = new Date();
var parts = string.match(/(\d{1,2})\/(\d{1,2})\/(\d{4})/);
if ( parts && parts.length == 4 ) {
date = new Date( parts[3], parts[2] - 1, parts[1] );
}
return date;
},
selectDate: function(date) {
return true;
},
limitCenturies: true,
closeOnPick: true,
appendTo: null
},
How can I make this to MM/DD/YYYY? I tried everything I change it but when Im selecting dates the value goes on different dates
Here is the error
According to the documentation, this should work:
defaults: {
formatDate: function(date) {
//var formatted = $.datePicker.utils.pad(date.getDate(), 2) + '/' + $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' + date.getFullYear();
var formatted = $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' + $.datePicker.utils.pad(date.getDate(), 2) + '/' + date.getFullYear();
return formatted;
},
parseDate: function(string) {
var date = new Date();
if ( string ) {
formatted_date = string.split('/');
date = new Date( formatted_date[2], formatted_date[0] - 1, formatted_date[1] );
}
return date;
},
selectDate: function(date) {
return true;
},
limitCenturies: true,
closeOnPick: true,
appendTo: null
}
See it in action: Demo.
Try this out
var date = new Date('2014-01-06');
var newDate = date.toString('dd-MM-yy');
I am having great difficulty getting the current date to be inputted into a text box within a form i am creating as a default value. at the moment i have the following code, which i believe creates the current date, followed by the text box code which i am unsure on how to modify in order for the date to be displayed inside.
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring();
}
<input type="text" name="frmDateReg" required id="frmDate" value="getDate()">
if anyone could suggest how to create todays date and input it into the textbox as default it would be greatly appreciated. (Please excuse any format issues as i am new to stack overflow) Thanks
You've got the right idea. It's just out of order:
<input type="text" name="frmDateReg" required id="frmDate" value="">
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring;
}
getDate();
Your code is correct, except that adding the function call in the value doesn't do anything. You need something else to trigger the function. The way I have it there, it will execute automatically when the page loads.
Aslo, datestring is not a function. It's just a variable. So you can leave off the ()
Try this Jquery code, this will work
$(document).ready(function () {
var dateNewFormat, onlyDate, today = new Date();
dateNewFormat = today.getFullYear() + '-';
if (today.getMonth().length == 2) {
dateNewFormat += (today.getMonth() + 1);
}
else {
dateNewFormat += '0' + (today.getMonth() + 1);
}
onlyDate = today.getDate();
if (onlyDate.toString().length == 2) {
dateNewFormat += "-" + onlyDate;
}
else {
dateNewFormat += '-0' + onlyDate;
}
$('#mydate').val(dateNewFormat);
});
razor view for this
#Html.TextBoxFor(m => m.StartedDate, new { #id = "mydate", #type = "date", #class = "form-control" })
This simple solution worked out for me. You can show the current date using window.onload function of javascript. See the output.
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
window.onload = function(){
document.getElementById("date").value = datestring;
}
<input type="text" id="date"/ >
<html>
<body onload="myFunction()">
Date: <input type="text" id="demo"/>
<script>
function myFunction() {
document.getElementById('demo').value= Date();
}
</script>
</body>
</html>
Use this code. this will helpful
<input type="text" name="frmDateReg" required id="frmDate" >
<script>
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring; //don't need ()
}
document.getElementById("frmDate").onload = getDate();
</script>
html
<input type="text" id="frmDate"></input>
JavaScript
var date = new Date();
document.getElementById("frmDate").value = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
Jsfiddle Demo
<script TYPE="text/javascript" LANGUAGE=JAVASCRIPT>
var currentDate = new Date();
var date1 = currentDate.getMonth()+1;
var mon = currentDate.getDate();
if (mon<10)
mon="0"+mon
var year = currentDate.getYear();
var hour = currentDate.getHours();
var dn="pm"
if (hour<12)
dn="am"
if (hour>12)
hour=hour-12
if (hour==0)
hour=12
var minute = currentDate.getMinutes();
if (minute < 10){
minute = "0" + minute
}
var second = currentDate.getSeconds();
if (second < 10){
second = "0" + second
}
var today = date1+"/"+mon+"/"+year+" Time: "+hour+":"+minute+":"+second+" "+dn
var filePath = "\\\\servername\\maindirectory\\somedirectory\\filenametopostto.xlsx";
function setDate()
{
f1.tDate.value=today;
}
</script>
Result in your text box is:
5/28/2019 Time: 3:03:01 pm
If you want to show the current date on the input field date
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
// today = yyyy + '/' + mm + '/' + dd;
today = `${yyyy}-${mm}-${dd}`;
document.getElementById('dateto1').value = today;
<div class="col-lg-4">
<label>Date</label>
<input type="date" name="dateto1" id="dateto1" class="form-control">
</div>
I want to have the dateformat in this format: 2015-08-04T00:00:00Z.
so first year, month, day.
beforeShowDay: function (date) {
var dt = $.datepicker.formatDate('yy-mm-dd', date, "getDate")
return [$('#form_one3 > option:gt(0)[value="' + dt + 'T00:00:00Z"]').length != 0];
},
onSelect: function (dateText, inst) {
var dt = $.datepicker.formatDate('yy-mm-dd', dateText, "getDate")
alert(dt);
var hallo = $("#form_inp1").val() + 'T00:00:00Z';
alert(dateText);
alert(hallo);
//$("#form_inp1").datepicker("getDate");
//alert($("#form_inp1").formatDate('yy-mm-dd', dateText, "getDate")
},
But If I do an alert(dateText) I see the format as: 4-8-2015 and it has to be: 2015-08-04.
Thank you
If I try it like this:
onSelect: function (dateText, inst) {
dateText = dateText.split("-");
dateText = new Date('' + dateText[2] + '-' + dateText[1] + '-' + dateText[0] + '');
alert(dateText);
}
I get invalid date
So this var hallo = $("#form_inp1").val() + 'T00:00:00Z';
returns: 4-8-2015T00:00:00Z . But it has to be:2015-08-04T00:00:00Z.
Thank you
Quick fix is to change the date format using plain Javascript. This can be achieved by following script.
dt= dt.split("-");
dt = new Date('' + dt[2] + '-' + dt[1] + '-' + dt[0] + '');
to add zero in case the day, month and year is below 10, use following method.
function AddTrailingZero(i) {
if (i < 10) { i = "0" + i }; // add zero in front of numbers < 10
return i;
}
Let me know if you have any question related to the code snippet above.
I have two input fields fromDate and toDate(both are date).I am using datepicker for input field fromDate. toDate is readonly and is dependent on the fromDate.That is date of toDate is is 6+.For example,if fromDate is 11/30/2014 then toDate is 12/6/2014.
My jsp code is
<input type="text" class="form-control dpd1" id="fromDate" name="fromDate">
<span class="input-group-addon">To</span>
<input type="text" class="form-control dpd2" id="toDate" name="toDate" readonly/>
and js code is:$('.dpd1').datepicker();
Thanks
You can do this with jQuery and change(). In change, You can get the value of fromDate and with Date object create new value for the toDate input.
$(function() {
$('#fromDate').change(function() {
var fromDateValue = $(this).val();
var toDateValue = new Date();
// some operations
$('#toDate').val(yourToDate);
});
})
You can add 6 days with this:
var today = new Date();
var todayplus6days= new Date(today);
todayplus6days.setDate(today.getDate()+6);
UPDATE:
jsFiddle: http://jsfiddle.net/8dx0sLey/1/
$(function() {
$('#fromDate').change(function() {
var fromDateValue = $(this).val();
var toDateValue = new Date(fromDateValue);
toDateValue.setDate(toDateValue.getDate()+6);
var sDate = toDateValue.getFullYear() + '-' + (toDateValue.getMonth()+1) + '-' + toDateValue.getDate();
$('#toDate').val(sDate);
});
})
I think you're looking for this.
$("#from").datepicker({
onClose: function (selectedDate, instance) {
if (selectedDate != '') { //added this to fix the issue
$("#to").datepicker("option", "minDate", selectedDate);
var date = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings);
date.setDate(date.getDate() + 6);
console.log(selectedDate, date);
$("#to").datepicker("option", "minDate", date);
}
}
});
I tried using input type date:
http://jsfiddle.net/washington_guedes/dafbz0qo/
$(document).ready(function(){
$("#fromDate").on("blur", function(){
var year = parseInt( $(this).val().substring(0,4) );
var month = parseInt( $(this).val().substring(5,7) );
var day = parseInt( $(this).val().substring(9,11) );
month += 6;
if( month > 12){
month %= 12;
year++;
}
$("#toDate").val(year + "-" +
((month<10)?"0":"") +
month + "-" +
((day<10)?"0":"") + day);
});
});
Code:
$('#fromDate').datepicker();
$('#fromDate').change(function(){
var toDate = new Date($(this).val());
toDate.setDate(toDate.getDate()+6);
month = toDate.getMonth()+ 1;
year = toDate.getFullYear();
$('#toDate').val(month+'/'+toDate.getDate()+'/'+year );
});
Demo
I have a datepicker that highlights a selected week. It is using an ajax request. Which is where I am having a problem. When I select a week i.e. 29/08/11 and the page refreshes the highlighted week is no longer highlighted.
Datepicker.js
$(function()
{
var startDate;
var endDate;
var selectCurrentWeek = function()
{
window.setTimeout(function () { $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')}, 1000);
}
function check(d) {
if(d.length() == 2) {
dd = d;
return dd;
} else {
dd = "0" + myDateParts[0];
return dd;
}
}
var selectedWeek;//remember which week the user selected here
$('.week-picker').datepicker( {
beforeShowDay: $.datepicker.noWeekends,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = 'yy-mm-dd'
var newDate = $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
var oldDate = document.getElementById('startDate');
var date_textnode = oldDate.firstChild;
var date_text = date_textnode.data;
myDateParts = date_text.split("-");
var dd = myDateParts[2];
var mm = myDateParts[1];
var yy = myDateParts[0];
selectCurrentWeek();
window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd; <<
At this point above this is where the window is refreshed and it GETs the URL. So that when I select a date it outputs like the following http://0.0.0.0:3000/timesheet?week_commencing=2011-09-05
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
index.html.erb
window.onload = function getURL(){
var url = document.location.href;
urlSplit = url.split("/timesheet");
if(urlSplit[1]== "")
{
var d = getMonday(new Date());
dd = zeroPad(d.getDate(),2);
mm = zeroPad(d.getMonth()+1,2);
yy = d.getFullYear();
document.getElementById('startDate').innerHTML = yy + "-" + mm + "-" + dd;
//window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;
}
else
{
week = url.split("week_commencing=");
//return week[1];
document.getElementById('startDate').innerHTML = week[1];
}
}
Note
The window.onload URL function gets the week commencing from the url
Jsfiddle - Including datepicker
http://jsfiddle.net/YQ2Zw/12/
Update
You can use the defaultDate to set the initial date selected on the datepicker, and simulate a click event on the calendar to highlight the week:
var selectDate = '09/29/2011';
$('.week-picker').datepicker({
defaultDate: selectDate
}).click(function(event) {
// highlight the TR
$(".ui-datepicker-current-day").parent().addClass('highlight');
// highlight the TD > A
$(".ui-datepicker-current-day:eq(0)").siblings().find('a').addClass('white');
}).click();
Example: http://jsfiddle.net/william/YQ2Zw/15/
Update
Assuming Datepicker.js is loaded in timesheet, you should be able to do that with two more lines:
window.onload = function getURL(){
var url = document.location.href;
urlSplit = url.split("/timesheet");
if(urlSplit[1]== "")
{
var d = getMonday(new Date());
dd = zeroPad(d.getDate(),2);
mm = zeroPad(d.getMonth()+1,2);
yy = d.getFullYear();
document.getElementById('startDate').innerHTML = yy + "-" + mm + "-" + dd;
//window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;
$('.week-picker').datepicker({
defaultDate: mm + '/' + dd + '/' + yy
}).click();
}
else
{
week = url.split("week_commencing=");
//return week[1];
document.getElementById('startDate').innerHTML = week[1];
}
}