Datepicker set today's day as a default - javascript

So I have a datepicker and when I select a day, the day of the week is inserted into another input.
$( "#datepicker" ).datepicker({
dateFormat: "dd-mm-yy",
onSelect: function(){
var seldate = $(this).datepicker('getDate');
var day = seldate.getUTCDay();
var weekday=new Array();
weekday[0]="Maandag";
weekday[1]="Dinsdag";
weekday[2]="Woensdag";
weekday[3]="Donderdag";
weekday[4]="Vrijdag";
weekday[5]="Zaterdag";
weekday[6]="Zondag";
var dayOfWeek = weekday[day];
$('#DagWeek').val(dayOfWeek);
}
});
This works perfectly fine. But I wanted to set today's date + day as default before they select anything.
So I did this for the date:
var myDate = new Date();
var month = myDate.getMonth() + 1;
var dag = myDate.getDate();
if(dag < 10) dag = "0" + dag;
if (month < 10) month = "0" + month;
var vandaag = dag + '-' + month + '-' + myDate.getFullYear();
$("#datepicker").val(vandaag);
And it works too, but I want now to set today's day also as a default. So i tried to copy the same code
as in the onSelect function but it didn't work.
The question is: Can you tell me how to set this outside of the onSelect function? because I tried but it didn't work.
Just in case, this is what I tried:
var day = vandaag.getUTCDay();
alert("test? " + day);
var weekday=new Array();
weekday[0]="Maandag";
weekday[1]="Dinsdag";
weekday[2]="Woensdag";
weekday[3]="Donderdag";
weekday[4]="Vrijdag";
weekday[5]="Zaterdag";
weekday[6]="Zondag";
var dayOfWeek = weekday[day];
$('#DagWeek').val(dayOfWeek);
EDIT: this is the HTML:
<td colspan="13">
<input type="text" id="DagWeek" name="DagNewSchema" size="12" readonly>
<input type="text" id="datepicker" name="NSchemaDatum" size="15" required>
</td>
As a result, this is what I get when I open the page for the first time:
And this is what I get when I actually select a date from the datepicker:

do this:
function updateWeekDay($datepicker){
var seldate = $datepicker.datepicker('getDate');
var day = seldate.getUTCDay();
var weekday=new Array();
weekday[0]="Maandag";
weekday[1]="Dinsdag";
weekday[2]="Woensdag";
weekday[3]="Donderdag";
weekday[4]="Vrijdag";
weekday[5]="Zaterdag";
weekday[6]="Zondag";
var dayOfWeek = weekday[day];
$('#DagWeek').val(dayOfWeek);
};
$( "#datepicker" ).datepicker({
dateFormat: "dd-mm-yy",
onSelect: function(){
updateWeekDay($(this));
}
});
var myDate = new Date();
var month = myDate.getMonth() + 1;
var dag = myDate.getDate();
if(dag < 10) dag = "0" + dag;
if (month < 10) month = "0" + month;
var vandaag = dag + '-' + month + '-' + myDate.getFullYear();
$("#datepicker").val(vandaag);
updateWeekDay($("#datepicker"));
I might have some syntax errors as I typed this without testing but you get the idea, pull the code into a function an call it.

Related

How do I restrict past dates in HTML5 input type Date?

I am trying to restrict past dates in input type="date". I am able to restrict future dates, but how can I restrict past dates?
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var minDate= year + '-' + month + '-' + day;
$('#txtDate').attr('min', minDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="txtDate" />
You can try this
var maxDate = year + '-' + month + '-' + day;
alert(maxDate);
$('#txtDate').attr('min', maxDate);
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var maxDate = year + '-' + month + '-' + day;
// or instead:
// var maxDate = dtToday.toISOString().substr(0, 10);
alert(maxDate);
$('#txtDate').attr('min', maxDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="txtDate" />
Here is a PHP solution that gets today's date and sets it as the minimum.
<input type="date" id="txtDate" min="<?php echo date("Y-m-d"); ?>">
This will put it in the correct double-digit format for the day and month. https://www.php.net/manual/en/function.date.php
Programmatically you can do something like this to disable past dates from being selectable:
<input type='date' min={new Date().toISOString().split('T')[0]} />
The below code may help you. It is normal HTML5 code:
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
See this working example.
In HTML:
<input type="date" id="ExpiryDate" class="form-control" min="9/10/2018"/>
Using Jquery new version:
function SetMinDate() {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear() + "-" + (month) + "-" + (day);
$('#ExpiryDate').val(today);
$('#ExpiryDate').attr('min', today); }
<input type="date" id="date">
var date = new Date().toISOString().slice(0,10);
//To restrict past date
$('#date').attr('min', date);
//To restrict future date
$('#date').attr('max', date);
$(function() {
$(document).ready(function () {
var todaysDate = new Date();
var year = todaysDate.getFullYear();
var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);
var day = ("0" + todaysDate.getDate()).slice(-2);
var maxDate = (year +"-"+ month +"-"+ day);
$('.class_of_input_field').attr('min',maxDate);
});
});``
To select To date greater than from date we can use this code
$(document).on("change", "#from", function () {
debugger
var date = $(this).val();
$('#to').attr('min', date);
});
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var minDate= year + '-' + month + '-' + day;
$('#date').attr('min', minDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="date" />
If you are using laravel then just do it like this
<input type="date" name="start_date" required min="{{date('Y-m-d')}}" />
and for regular HTML just specify the date
<input type="date" name="start_date" required min="2022-07-18" />
in laravel 5.8,
<input type="date" class="form-control" name="from_date" id="from_date"required min="{{date('Y-m-d')}}" value="{{ old('from_date') }}">
here, i used min="{{date('Y-m-d')}}"
I've found this working (HTML) method. (i.e this works with only textbox with date mode, not with calendars or date-time pickers.)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var today = new Date();
var month = ('0' + (today.getMonth() + 1)).slice(-2);
var day = ('0' + today.getDate()).slice(-2);
var year = today.getFullYear();
var date = year + '-' + month + '-' + day;
$('[id*=txtExpDate]').attr('min', date);
});
</script>
<asp:TextBox ID="txtExpDate" runat="server" TextMode="Date"></asp:TextBox>

How to get nth Weekday of Current date in javascript

I need to retrieve nth weekday of the current date in js. like 1st Sunday, 2nd Sunday
var d=new Date();
var weekDay=d.getDay();
here weekDay gives me 4 that means its Wednesday(3rd Wednesday). So far its good.
from weekDay i can say that its wednesday.
how to calcuate the "3rd" index of this wednesday?
Thank you
What du you actually mean? To get the dates you could use Date(). Like for instance creating a variable "today" and setting it to be todays date.
var today = new Date();
In a greater context you could go as far as showing everything from weekdays, date, year etc etc! I'll provide a code bit below. The code shows a dynamic clock/date in HTML.
You can format this the way you want, and choose which variables to show! This is btw the same code as found here: Other thread/question
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today=new Date();
var day = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = "Date: " + day + "/" + month + "/" + year + " " + "Clock: " + h+":"+m+":"+s;
var t = setTimeout(function(){startTime()},500);
}
function checkTime(i) {
if (i<10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
Is this what you mean?
Something like this
function getNth(dat) {
var days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday','saturday'],
nth = ['st', 'nd', 'rd', 'th', 'th'],
d = dat ? dat instanceof Date ? dat : new Date(dat) : new Date(),
date = d.getDate(),
day = d.getDay(),
n = Math.ceil(date / 7);
return n + nth[n-1] + ' ' + days[day];
}
document.body.innerHTML = '' +
'today ....: ' + getNth() + '<br>' +
'1/31/2015 : ' + getNth('1/31/2015') + '<br>' +
'1/16/2015 : ' + getNth('1/16/2015');
body {font-family: monospace}
As per my understanding you want what date will be 1st, 2nd sunday/Monday from today. If it is that then you can use this
//consider sun=o,mon=1,....,sat:6
function getWeekday(n,day)
{
var today = new Date();
var presentDay = today.getDay();
var presentTime = today.getTime();
if(day < presentDay)
{
day = day +6;
}
var diff = day - present day;
var daysAfter = (n-1)*7 + diff;
var timeAfter = presentTime+daysAfter*86400000;
var next date = new Date(timeAfter);
}
// if you want to get 1st sunday from today just call this
var sunday1 = getWeekday(1,0)
// to get second monday from today
var monday2 = getWeekday(2,1)

Get current date in DD-Mon-YYY format in Jquery [duplicate]

How can I format the date using jQuery. I am using below code but getting error:
$("#txtDate").val($.format.date(new Date(), 'dd M yy'));
Please suggest a solution.
add jquery ui plugin in your page.
$("#txtDate").val($.datepicker.formatDate('dd M yy', new Date()));
jQuery dateFormat is a separate plugin. You need to load that explicitly using a <script> tag.
An alternative would be simple js date() function, if you don't want to use jQuery/jQuery plugin:
e.g.:
var formattedDate = new Date("yourUnformattedOriginalDate");
var d = formattedDate.getDate();
var m = formattedDate.getMonth();
m += 1; // JavaScript months are 0-11
var y = formattedDate.getFullYear();
$("#txtDate").val(d + "." + m + "." + y);
see: 10 ways to format time and date using JavaScript
If you want to add leading zeros to day/month, this is a perfect example:
Javascript add leading zeroes to date
and if you want to add time with leading zeros try this:
getMinutes() 0-9 - how to with two numbers?
Here's a really basic function I just made that doesn't require any external plugins:
$.date = function(dateObject) {
var d = new Date(dateObject);
var day = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
if (day < 10) {
day = "0" + day;
}
if (month < 10) {
month = "0" + month;
}
var date = day + "/" + month + "/" + year;
return date;
};
Use:
$.date(yourDateObject);
Result:
dd/mm/yyyy
I'm using Moment JS. Is very helpful and easy to use.
var date = moment(); //Get the current date
date.format("YYYY-MM-DD"); //2014-07-10
ThulasiRam, I prefer your suggestion. It works well for me in a slightly different syntax/context:
var dt_to = $.datepicker.formatDate('yy-mm-dd', new Date());
If you decide to utilize datepicker from JQuery UI, make sure you use proper references in your document's < head > section:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
I hope this code will fix your problem.
var d = new Date();
var curr_day = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();
var curr_sec = d.getSeconds();
curr_month++ ; // In js, first month is 0, not 1
year_2d = curr_year.toString().substring(2, 4)
$("#txtDate").val(curr_day + " " + curr_month + " " + year_2d)
Add this function to your <script></script> and call from where ever you want in that <script></script>
<script>
function GetNow(){
var currentdate = new Date();
var datetime = currentdate.getDate() + "-"
+ (currentdate.getMonth()+1) + "-"
+ currentdate.getFullYear() + " "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes() + ":"
+ currentdate.getSeconds();
return datetime;
}
window.alert(GetNow());
</script>
or you may simply use the Jquery which provides formatting facilities also:-
window.alert(Date.parse(new Date()).toString('yyyy-MM-dd H:i:s'));
I love the second option. It resolves all issues in one go.
If you are using jquery ui then you may use it like below, you can specify your own date format
$.datepicker.formatDate( "D dd-M-yy", new Date()) // Output "Fri 08-Sep-2017"
Just use this:
var date_str=('0'+date.getDate()).substr(-2,2)+' '+('0'+date.getMonth()).substr(-2,2)+' '+('0'+date.getFullYear()).substr(-2,2);
Though this question was asked a few years ago, a jQuery plugin isn't required anymore provided the date value in question is a string with format mm/dd/yyyy (like when using a date-picker);
var birthdateVal = $('#birthdate').val();
//birthdateVal: 11/8/2014
var birthdate = new Date(birthdateVal);
//birthdate: Sat Nov 08 2014 00:00:00 GMT-0500 (Eastern Standard Time)
You can add new user jQuery function 'getDate'
JSFiddle: getDate jQuery
Or you can run code snippet. Just press "Run code snippet" button below this post.
// Create user jQuery function 'getDate'
(function( $ ){
$.fn.getDate = function(format) {
var gDate = new Date();
var mDate = {
'S': gDate.getSeconds(),
'M': gDate.getMinutes(),
'H': gDate.getHours(),
'd': gDate.getDate(),
'm': gDate.getMonth() + 1,
'y': gDate.getFullYear(),
}
// Apply format and add leading zeroes
return format.replace(/([SMHdmy])/g, function(key){return (mDate[key] < 10 ? '0' : '') + mDate[key];});
return getDate(str);
};
})( jQuery );
// Usage: example #1. Write to '#date' div
$('#date').html($().getDate("y-m-d H:M:S"));
// Usage: ex2. Simple clock. Write to '#clock' div
function clock(){
$('#clock').html($().getDate("H:M:S, m/d/y"))
}
clock();
setInterval(clock, 1000); // One second
// Usage: ex3. Simple clock 2. Write to '#clock2' div
function clock2(){
var format = 'H:M:S'; // Date format
var updateInterval = 1000; // 1 second
var clock2Div = $('#clock2'); // Get div
var currentTime = $().getDate(format); // Get time
clock2Div.html(currentTime); // Write to div
setTimeout(clock2, updateInterval); // Set timer 1 second
}
// Run clock2
clock2();
// Just for fun
// Usage: ex4. Simple clock 3. Write to '#clock3' span
function clock3(){
var formatHM = 'H:M:'; // Hours, minutes
var formatS = 'S'; // Seconds
var updateInterval = 1000; // 1 second
var clock3SpanHM = $('#clock3HM'); // Get span HM
var clock3SpanS = $('#clock3S'); // Get span S
var currentHM = $().getDate(formatHM); // Get time H:M
var currentS = $().getDate(formatS); // Get seconds
clock3SpanHM.html(currentHM); // Write to div
clock3SpanS.fadeOut(1000).html(currentS).fadeIn(1); // Write to span
setTimeout(clock3, updateInterval); // Set timer 1 second
}
// Run clock2
clock3();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="date"></div><br>
<div id="clock"></div><br>
<span id="clock3HM"></span><span id="clock3S"></span>
Enjoy!
You could make use of this snippet
$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1900:+0',
defaultDate: '01 JAN 1900',
buttonImage: "http://www.theplazaclub.com/club/images/calendar/outlook_calendar.gif",
dateFormat: 'dd/mm/yy',
onSelect: function() {
$('#datepicker').val($(this).datepicker({
dateFormat: 'dd/mm/yy'
}).val());
}
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>
selector: <input type="text" class="datepicker">
</p>
<p>
output: <input type="text" id="datepicker">
</p>
Simply we can format the date like,
var month = date.getMonth() + 1;
var day = date.getDate();
var date1 = (('' + day).length < 2 ? '0' : '') + day + '/' + (('' + month).length < 2 ? '0' : '') + month + '/' + date.getFullYear();
$("#txtDate").val($.datepicker.formatDate('dd/mm/yy', new Date(date1)));
Where "date" is a date in any format.
Take a look here:
https://github.com/mbitto/jquery.i18Now
This jQuery plugin helps you to format and translate date and time according to your preference.
Use dateFormat option when creating date picker.
$("#startDate").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy/mm/dd'
});
you can use the below code without the plugin.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$( function() {
//call the function on page load
$( "#datepicker" ).datepicker();
//set the date format here
$( "#datepicker" ).datepicker("option" , "dateFormat", "dd-mm-yy");
// you also can use
// yy-mm-dd
// d M, y
// d MM, y
// DD, d MM, yy
// &apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy (With text - 'day' d 'of' MM 'in the year' yy)
} );
</script>
Pick the Date: <input type="text" id="datepicker">
You can try http://www.datejs.com/
$('#idInput').val( Date.parse("Jun 18, 2017 7:00:00 PM").toString('yyyy-MM-dd'));
BR
This worked for me with slight modification and without any plugin
Input : Wed Apr 11 2018 00:00:00 GMT+0000
$.date = function(orginaldate) {
var date = new Date(orginaldate);
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (day < 10) {
day = "0" + day;
}
if (month < 10) {
month = "0" + month;
}
var date = month + "/" + day + "/" + year;
return date;
};
$.date('Wed Apr 11 2018 00:00:00 GMT+0000')
Output: 04/11/2018
I have achieved through this, I have resolved this without any plugin or datepicker.
GetDatePattern("MM/dd/yyyy");
function GetDatePattern(pattern)
{
var monthNames=["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
var todayDate = new Date();
var date = todayDate.getDate().toString();
var month = todayDate.getMonth().toString();
var year = todayDate.getFullYear().toString();
var formattedMonth = (todayDate.getMonth() < 10) ? "0" + month : month;
var formattedDay = (todayDate.getDate() < 10) ? "0" + date : date;
var result = "";
switch (pattern) {
case "M/d/yyyy":
formattedMonth = formattedMonth.indexOf("0") == 0 ? formattedMonth.substring(1, 2) : formattedMonth;
formattedDay = formattedDay.indexOf("0") == 0 ? formattedDay.substring(1, 2) : formattedDay;
result = formattedMonth + '/' + formattedDay + '/' + year;
break;
case "M/d/yy":
formattedMonth = formattedMonth.indexOf("0") == 0 ? formattedMonth.substring(1, 2) : formattedMonth;
formattedDay = formattedDay.indexOf("0") == 0 ? formattedDay.substring(1, 2) : formattedDay;
result = formattedMonth + '/' + formattedDay + '/' + year.substr(2);
break;
case "MM/dd/yy":
result = formattedMonth + '/' + formattedDay + '/' + year.substr(2);
break;
case "MM/dd/yyyy":
result = formattedMonth + '/' + formattedDay + '/' + year;
break;
case "yy/MM/dd":
result = year.substr(2) + '/' + formattedMonth + '/' + formattedDay;
break;
case "yyyy-MM-dd":
result = year + '-' + formattedMonth + '-' + formattedDay;
break;
case "dd-MMM-yy":
result = formattedDay + '-' + monthNames[todayDate.getMonth()].substr(3) + '-' + year.substr(2);
break;
case "MMMM d, yyyy":
result = todayDate.toLocaleDateString("en-us", { day: 'numeric', month: 'long', year: 'numeric' });
break;
}
}
I'm not quite sure if I'm allowed to answer a question that was asked like 2 years ago as this is my first answer on stackoverflow but, here's my solution;
If you once retrieved the date from your MySQL database, split it and then use the splitted values.
$(document).ready(function () {
var datefrommysql = $('.date-from-mysql').attr("date");
var arraydate = datefrommysql.split('.');
var yearfirstdigit = arraydate[2][2];
var yearlastdigit = arraydate[2][3];
var day = arraydate[0];
var month = arraydate[1];
$('.formatted-date').text(day + "/" + month + "/" + yearfirstdigit + yearlastdigit);
});
Here's a fiddle.
Here is the full code example I have show on browser, Hope you also helpful thanks.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker" ).datepicker({
minDate: -100,
maxDate: "+0D",
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
$(this).val(datetext);
},
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker"></p>
</body>
</html>
using Moment JS
moment js
$("#YourDateInput").val(moment($("#YourDateInput").val()).format('YYYY-MM-DD'));
u can use this coding
$('[name="tgllahir"]').val($.datepicker.formatDate('dd-mm-yy', new Date(data.tgllahir)));

Using Javascript to roll back a date in a specific format

I'm not sure how to do this part, or even how to pose it as a question. I've been working on a project for my job in which we have a start date and an end date that the user enters either through a datepicker, or typing it in, within certain formatting requirements which then sends a query to our database to request information. The start and end date are auto-populated when the page loads, with the start date going back 14 days to give the user an auto two weeks information unless they wanted to get more/less. Here's the problem:
1: Both input boxes (html of course) were working, up until we hit October because it's a 2 digit month.
2: The rollback date of -14 gives a negative number instead of rolling back the date to September XX.
I've tried var StartDay = StartDate.setDate(StartDate.getDate() - 14); and all that gives is the date and time which SQL does not recognize. So I'm trying to figure out how to either:
1: Get it to roll back to the correct date which I can then populate the box with, or
2: Re-format the datetime given to a format that will be yyyy-mm-dd
So far I've spent all day searching for an answer and I've found multiple that are close but not quite all that I'm looking for.
$(function () {
$("#StartDate").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true });
$("#EndDate").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true });
var StartDate = new Date();
var StartDay = StartDate.setDate(StartDate.getDate() - 14);
var StartMonth = StartDate.getMonth() + 1;
var StartYear = StartDate.getFullYear();
//if (StartMonth < 10) StartMonth = "0" + Month;
//if (StartDay < 10) StartDay = "0" + StartDay;
var StartDateBox = StartDate;
var EndDate = new Date();
var EndDay = EndDate.getDate();
var EndMonth = EndDate.getMonth() + 1;
var EndYear = EndDate.getFullYear();
//alert('the new date is ' + EndDay);
if (EndMonth < 10) EndMonth = "0" + Month;
if (EndDay < 10) EndDay = "0" + EndDay;
var EndDateBox = EndYear + "-" + EndMonth + "-" + EndDay;
$("#StartDate").attr("value", StartDateBox);
$("#EndDate").attr("value", EndDateBox);
});
Everything labled "End" works fine. It's the rollback of 14 days that I'm having the issue with. I have the "if" commented out because the number is a negative and therefore crashes the function.
*edit Awesome! Much appreciated, now that I see it, it makes more sense. However, it's set to August, so it's missing the +1 after .getMonth. I'll try to figure that out.
I would make a function for formatting your dates, to reuse that code.
function formatDate(date) {
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
return year + "-" + month + "-" + day;
};
$(function () {
$("#StartDate").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true });
$("#EndDate").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true });
var StartDate = new Date();
StartDate.setDate(StartDate.getDate() - 14);
var StartDateBox = formatDate(StartDate);
var EndDate = new Date();
var EndDateBox = formatDate(EndDate);
$("#StartDate").attr("value", StartDateBox);
$("#EndDate").attr("value", EndDateBox);
});

Datepicker on AngularJS error with values

The thing I'm trying to do here is when a user selects a StartDate and an EndDate when he clicks on the previous arrow he should fetch data 7 days before every time in order to see the progress.
JavaScript:
$scope.getDiffPrev = function(startDate, endDate, computeDiff) {
var start = startDate;
var date1 = (start.getDate() -7);
var month1 = (start.getMonth() +1);
var year1 = start.getFullYear();
var end = endDate;
var date2 = (end.getDate() -7);
var month2 = (end.getMonth() +1);
var year2 = end.getFullYear();
$http.get('/admin/api/stats?start=' + date1 +'-'+ month1 +'-'+ year1 + '&end=' + date2 +'-'+ month2 +'-'+ year2 +'&computeDiff=true').success(function(data) {
$scope.stats = data;
});
}
HTML:
<label>From</label>
<input type="text" datepicker-popup="dd-MM-yyyy" ng-model="startDate"/>
<label>To</label>
<input type="text" datepicker-popup="dd-MM-yyyy" ng-model="endDate"/>
<button class="btn btn-success" ng-click="getDiffPrev(startDate, endDate, computeDiff)">←</button>
don't we all love javascript's date? ;)
var start = angular.copy(startDate)
start.setDate(start.getDate() + computeDiff);
var date1 = start.getDate();
var month1 = start.getMonth() + 1; // i hate em for this one -.-
var year1 = start.getFullYear();
and here an example
in the line start.setDate(start.getDate() + computeDiff); we use the Date()'s intern calculation to get the right date.
EDIT:
if you can add other libraries have a look at moment.js
moment().subtract('days', 7).format('yourFormatStringHere')

Categories

Resources