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);
});
Related
Hi I am trying to get first date of current month in HTML date picker.
From <input type="date" id="fdate" value=""/>
To<input type="date" id="tdate" value=""/>
I get today date in id="tdate like this given below but starting date of current month not able to get as I get current date.
var date = new 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;
var today = year + "-" + month + "-" + day;
document.getElementById("tdate").value = today;
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
document.getElementById("tdate").value = firstDay;
date input fields must be in YYYY-MM-DD format. Your code:
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
Will give back a string, e.g. Tue Sep 01 2020 00:00:00 GMT-0400 (Eastern Daylight Time), which is not what you want.
You can combine a couple of existing StackOverflow answers to accomplish what you want:
// https://stackoverflow.com/a/23593099/378779
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2)
month = '0' + month;
if (day.length < 2)
day = '0' + day;
return [year, month, day].join('-');
}
// https://stackoverflow.com/a/13572682/378779
function getFstDayOfMonFnc() {
var date = new Date();
return new Date(date.getFullYear(), date.getMonth(), 1)
}
Assuming fdate should be the first of the month and tdate should be today's date:
document.getElementById('fdate').value = formatDate( getFstDayOfMonFnc() );
document.getElementById('tdate').value = formatDate( new Date() );
var date = new Date();
var monthStart = Date.UTC(date.getFullYear(), date.getMonth())
monthStart = toIsoDateString(monthStart);
console.log(monthStart);
var nextMonthStart = Date.UTC(date.getFullYear(), date.getMonth() + 1);
nextMonthStart = toIsoDateString(nextMonthStart);
console.log(nextMonthStart);
function toIsoDateString(utcDate) {
var date = new Date(utcDate);
return date.toISOString().split('T')[0];
}
I also had made such a program but there were a few changes, instead of just the first date I was getting the current time, the first day of the month and also the last date of the month.
This is the code I used:
<html>
<head>
<title>JavaScript Dates</title>
</head>
<body>
<script>
var date = new Date();
document.write("Current Date: " + date );
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
document.write("<br>"+firstDay);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
document.write("<br>"+lastDay);
</script>
</body>
</html>
You can edit this code and try working out.
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,
});
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 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));
I'm working on a project utilizing the jQuery datepicker, and am trying to use the showWeek attribute to display the week number next to the calender.
My problem is that I don't want 'week 1' to start on the first of January, but instead on the first of August.
Is there any way I can Implement this?
Thanks
working with the next month not working for prev month so i have disabled prev month.
calender always open with August month if current month less than August than calender start from previous year August.
Working Demo http://jsfiddle.net/cse_tushar/dR429/4
$(document).ready(function () {
i = 0;
month_set = 8;
var d = new Date();
week = (Math.ceil(Math.round(((new Date(d.getFullYear() + 1, 1)) - (new Date(d.getFullYear(), 1))) / 86400000) / 7));
current_year = ((d.getMonth() + 1) >= month_set) ? d.getFullYear() : d.getFullYear() - 1;
function myWeekCalc() {
i++;
return i = (i > week) ? 0 : i;
}
$("#d1").datepicker({
showWeek: true,
defaultDate: new Date(current_year, month_set-1, 1),
calculateWeek: myWeekCalc,
onClose: function () {
i = 0;
},
onChangeMonthYear: function (year, month) {
var diff = month - month_set;
var d = new Date(month + ' 1' + ',' + year);
if (d.getDay() != '0') {
i--;
}
if (month == month_set) {
i = 0;
}
if (current_year != year && month == month_set) {
week = (Math.ceil(Math.round(((new Date(year + 1, 1)) - (new Date(year, 1))) / 86400000) / 7));
}
}
}).focus(function () {
$(".ui-datepicker-prev").remove();
});
});
Using jQuery Date Picker custom Week of Year calculation and Moment library to calculate the week of year based on your locale.
Please refer to this working example:
https://jsfiddle.net/amansour/sez8fLgt/
function myWeekCalc(dt) {
var dat = moment(dt).locale("en-US");
return dat.week();
// return dat.isoweek(); // you will have to use firstDay : 1
}
$(function(){
$("[type='date']").datepicker({
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 0, // 1 being Monday, 0 being Sunday, 6 being Friday
calculateWeek: myWeekCalc,
dateFormat: "yy-mm-dd",
yearRange: "-12:+12"
});
});