Select month date range and month using Bootstrap Datepicker - javascript

How to select a range of month date and month using Bootstrap Datepicker?
I am currently using jQuery UI datepicker to select months and weeks.
here is the example of for week date range i try into convert in month. but getting issue
here is the link for js fiddle https://jsfiddle.net/prtk/znbx32j1/1/
html
<div class="form-group col-md-8 col-md-offset-2" id="week-picker-wrapper">
<label for="week" class="control-label">Select Week</label>
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-rm week-prev">«</button>
</span>
<input type="text" class="form-control week-picker" placeholder="Select a Week">
<span class="input-group-btn">
<button type="button" class="btn btn-rm week-next">»</button>
</span>
</div>
</div>
js
var weekpicker, start_date, end_date;
function set_week_picker(date) {
start_date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
end_date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
weekpicker.datepicker('update', start_date);
weekpicker.val((start_date.getMonth() + 1) + '/' + start_date.getDate() + '/' + start_date.getFullYear() + ' - ' + (end_date.getMonth() + 1) + '/' + end_date.getDate() + '/' + end_date.getFullYear());
}
$(document).ready(function() {
weekpicker = $('.week-picker');
console.log(weekpicker);
weekpicker.datepicker({
autoclose: true,
forceParse: false,
container: '#week-picker-wrapper',
}).on("changeDate", function(e) {
set_week_picker(e.date);
});
$('.week-prev').on('click', function() {
var prev = new Date(start_date.getTime());
prev.setDate(prev.getDate() - 1);
set_week_picker(prev);
});
$('.week-next').on('click', function() {
var next = new Date(end_date.getTime());
next.setDate(next.getDate() + 1);
set_week_picker(next);
});
set_week_picker(new Date);
});


You need to modify prev and next calculations on click events. Check this fiddle (Check the console to see the values).
use setMonth() and getMonth() instead of setDate() and getDate(). Also you may need to adjust/set the Day value to get accurate results.
Update : This is the updated fiddle

Related

time wont formatt correctly when using inputs

<?php
$date = trim(preg_replace('/ +/', ' ', preg_replace('/[^A-Za-z0-9- ]/', ' ', urldecode(html_entity_decode(strip_tags($_POST['date']))))));
$date2 = trim(preg_replace('/ +/', ' ', preg_replace('/[^A-Za-z0-9- ]/', ' ', urldecode(html_entity_decode(strip_tags($_POST['date2']))))));
?>
<!doctype html>
<html lang="en">
<head>
<title>date</title>
</head>
<body>
<form action="" method="post">
<label for="message" class="form-label">Date:</label>
<input type="date" class="form-control" id="date" name="date">
<br>
<label for="message" class="form-label">Date2:</label>
<input type="date" class="form-control" id="date2" name="date2">
<input id="saveForm" onclick="" class="button_text" type="submit" name="submit" value="Submit " />
</form>
<script>
var date = new Date();
var month = date.getMonth() + 1;
var day = date.getDate();
var year = date.getFullYear();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
var today = month + "-" + day + "-" + year;
document.getElementById('date').value = today;
console.log(today);
//date works but output is diffrent
var date = new Date();
var month = date.getMonth() + 1;
var day = date.getDate();
var year = date.getFullYear();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
var today = year + "-" + month + "-" + day;
document.getElementById('date2').value = today;
console.log(today);
</script>
</html>
So the bottom one works when loaded and displays correctly however when submitted or console logged looks like this 2023-01-13 and when I change it to the correct format it stops working but will then console log correctly but will still echo out wrong... What is going on here? how can I make the date auto populate when page is loaded and still console log and echo out correctly like month/day/year ?????
```
<!doctype html>
<html lang="en">
<head>
<title>date</title>
</head>
<body>
<form action="" method="post">
<label for="message" class="form-label">Date:</label>
<input type="date" class="form-control" id="date" name="date">
<br>
<label for="message" class="form-label">Date2:</label>
<input type="date" class="form-control" id="date2" name="date2">
<input id="saveForm" onclick="" class="button_text" type="submit" name="submit" value="Submit "/>
</form>
<script>
var date = new Date();
var month = date.getMonth() + 1;
var day = date.getDate();
var year = date.getFullYear();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
var today = month + "-" + day + "-" + year;
document.getElementById('date').value = today;
console.log(today);
//date works but output is diffrent
var date = new Date();
var month = date.getMonth() + 1;
var day = date.getDate();
var year = date.getFullYear();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
var today = year + "-" + month + "-" + day;
document.getElementById('date2').value = today;
console.log(today);
</script>
</html>
<?php
$date = trim(preg_replace('/ +/', ' ', preg_replace('/[^A-Za-z0-9- ]/', ' ', urldecode(html_entity_decode(strip_tags($_POST['date']))))));
$date2 = trim(preg_replace('/ +/', ' ', preg_replace('/[^A-Za-z0-9- ]/', ' ', urldecode(html_entity_decode(strip_tags($_POST['date2']))))));
echo '<hr><br>';
echo $date;
echo '<br>';
echo $date2;
?>
```
I assume when i change this it should output correctly but instead only makes it half work
var today = month + "-" + day + "-" + year;

How to disabled bootstrap date picker previous dates from current date and how to restrict or disabled after 90 day dates form date picker

I'm trying to disabled a previous dates from current date it's working fine. but when it try to disabled "to Date date picker" after 90Days but it's not working any one can you please help on it. actually here i have a two date pickers like FROM Date and TO Date but i am not able to disabled dates after 90days here I want to allow the from date only current date To date enabled only next 90 days from current date.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
</head>
<body>
<label for="date">From:</label>
<input id="date" data-provide="datepicker">
<label for="todate">To:</label>
<input id="todate" data-provide="datepicker">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"> </script>
<script>
var date = new Date();
date.setDate(date.getDate());
$('#date').datepicker({
startDate: date
});
var todates = new Date();
todates.setDate(dates.getDate()+90D);
$('#todate').datepicker({
endtDate: todates
});
</script>
</body>
</html>

Checkout snippet with output as you expected. In datepicker you need to add some specific formatted date. And using that we disabled un wanted days as per requirement.
For adding days in javascript date :
var todates = new Date();
todates.setDate(cur_date.getDate() + 90);
Here 90 are actual days you can modify it as per usage.
var cur_date = new Date()
var todaydate = cur_date.toISOString().split('T')[0]
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 [day, month, year].join('-');
}
todaydate = formatDate(todaydate);
$('#fromdate').datepicker({
beforeShowDay: function(date){
if (todaydate == formatDate(date))
{
return { enabled: true }
}
else
{
return { enabled: false }
}
},
startDate: cur_date,
endDate: cur_date,
});
var todates = new Date();
todates.setDate(cur_date.getDate() + 90);
$('#todate').datepicker({
startDate: cur_date,
endDate: todates
});
.disabled {
background: #ccc;
pointer-events: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
<label for="fromdate">From:</label>
<input id="fromdate" data-provide="datepicker">
<label for="todate">To:</label>
<input id="todate" data-provide="datepicker">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"> </script>
If you want to add more functional things like this you can try out more here

Formatic UI DatePicker is out of screen

Pretty new here, so sorry if the solutions are a bit "obvious":)
I'm using a datepicker/calendar of "formatic UI", dealing with two issues:
When clicking the input, the pop-up picker is out off screen. I've tried to fix it with css positions (also a bit js) but really stack how to do it only to the pop up picker and not to the input. Also, my language is Hebrew so there might be a problem regarding to rtl issues (I've tried a rtl CDN, still was not that helpful=/)
This picker is used to filter my data. The problem is when a user click on the popup picker, the picker is changed, but only when clicking again the input, data is filtered. Filtering function supposed to be on "keyup, click, change" but still, not working when value is changed. (for other inputs- when value is changed - it indeed working. Only this picker has an issue)
my code:
$(document).ready(function () {
$('#start_date_picker,#end_date_picker').on("keyup click change", filterAll);
});
var today = new Date();
$('#rangestart').calendar({
type: 'date',
endCalendar: $('#rangeend'),
text: {
days: ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ש'],
months: ['ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני', 'יולי', 'אוגוסט', 'ספטמבר', 'אוקטובר', 'נובמבר', 'דצמבר'],
monthsShort: ['ינ', 'פב', 'מרץ', 'אפר', 'מאי', 'יונ', 'יול', 'אוג', 'ספט', 'אוק', 'נוב', 'דצמ'],
today: 'היום',
now: 'כעת'
},
minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() ),
monthFirst: false,
formatter: {
date: function (date, settings) {
if (!date) return '';
var day = date.getDate();
var month = date.getMonth() + 1;
var year= date.getFullYear().toString().substr(-2);
return day + '.' + month + '.' + year;
}
}
});
$('#rangeend').calendar({
type: 'date',
startCalendar: $('#rangestart'),
text: {
days: ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ש'],
months: ['ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני', 'יולי', 'אוגוסט', 'ספטמבר', 'אוקטובר', 'נובמבר', 'דצמבר'],
monthsShort: ['ינ', 'פב', 'מרץ', 'אפר', 'מאי', 'יונ', 'יול', 'אוג', 'ספט', 'אוק', 'נוב', 'דצמ'],
today: 'היום',
now: 'כעת'
},
monthFirst: false,
formatter: {
date: function (date, settings) {
if (!date) return '';
var day = date.getDate();
var month = date.getMonth() + 1;
var year= date.getFullYear().toString().substr(-2);
return day + '.' + month + '.' + year;
}
}
});
var start_date_picker = document.getElementById('start_date_picker');
var end_date_picker = document.getElementById('end_date_picker');
var month_picker_start = today.getMonth()+1;
var year_picker_start= today.getFullYear().toString().substr(-2);
var week_from_today = new Date();
week_from_today.setDate(week_from_today.getDate() + 7);
var month_week_from_today = week_from_today.getMonth()+1;
var year_from_today= week_from_today.getFullYear().toString().substr(-2);
if(start_date_picker) {start_date_picker.value = today.getDate()+ "." + month_picker_start+ "." + year_from_today;}
if(end_date_picker) {end_date_picker.value = week_from_today.getDate()+ "." +month_week_from_today + "." + year_from_today;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-calendar/0.0.8/calendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-calendar/0.0.8/calendar.min.css" />
<i class="ui calendar" id="rangestart">
<div class="ui transparent input right icon">
<i class="calendar alternate outline icon grey icon"></i>
<input type="text" id="start_date_picker" style="text-align:right;">
</div>
</i>
-
<i class="ui calendar" id="rangeend">
<div class="ui transparent input right icon">
<input type="text" id="end_date_picker" style="text-align:right;">
</div>
</i>

How can I get future date month and year by inputting opening date and duration month using JavaScript

when I select date and input month duration then other field will display the target date
how can I implement this,Please anybody help me to do that.my form is that
// I have tried to do that
$("#duration").keyup(function(){
var duration = $(this).val();
var open_date = $("#openDate").val();
// i want to use same function and method
// here will next code
var targetDate = new Date(open_date);
targetDate.setMonth(targetDate.getMonth() + duration);
var dd = targetDate.getDate();
var mm = targetDate.getMonth() + 1;
var yyyy = targetDate.getFullYear();
var dateString = dd + "/" + mm + "/" + yyyy;
$('#targetDate').val(dateString);
// i have do that but do not get my espect out put
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Open Date :
<input type="date" id="openDate"><br><br>
Duration Month:
<input type="text" id="duration" placeholder="mm"><br><br>
Target Date :
<input type="text" id="targetDate" placeholder="dd-mm-yyyy">

Please try this:
$("#duration").keyup(function(){
var duration = $(this).val();
var open_date = $("#openDate").val();
// i want to use same function and method
// here will next code
var targetDate = new Date(open_date);
targetDate.setMonth(targetDate.getMonth() + parseInt(duration));
var dd = targetDate.getDate();
var mm = targetDate.getMonth() + 1;
var yyyy = targetDate.getFullYear();
var dateString = dd + "/" + mm + "/" + yyyy;
$('#targetDate').val(dateString);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Open Date :
<input type="date" id="openDate"><br><br>
Duration Month:
<input type="text" id="duration" placeholder="mm"><br><br>
Target Date :
<input type="text" id="targetDate" placeholder="dd-mm-yyyy">

jQuery set defaul value of date picker input

I am building a web app that uses a date picker to filter the search results of some event items.
The form submits via ajax just fine, (I am getting results) but I am having issues with setting a default value into the datepicker. The input type is text based, but it functions like a javascript DatePicker. Thanks for any help.
Note: I did not build the form from scratch, but it is customized to do what I need it to.
jQuery:
// Get current date
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate();
var year = date.getFullYear();
var currentDate = day + "-" + month + "-" + year;
$("#CAT_Custom_2_Min").val(currentDate)
$("#calendar-form").submit();
Form HTML:
<form id="calendar-form" action="/Default.aspx?CCID=17654&FID=197248&ExcludeBoolFalse=True&PageID=11940414" method="post" name="catcustomcontentform95560">
<table cellspacing="0" cellpadding="2" border="0" class="webform">
<tbody>
<tr>
<td><label>Event Start Time Min/Max:</label><br />
<input type="text" onfocus="displayDatePicker('CAT_Custom_2_Min');return false;" style="background-color: #f0f0f0;" readonly="readonly" class="cat_textbox" id="CAT_Custom_2_Min" name="CAT_Custom_2_Min" />
And <input type="text" onfocus="displayDatePicker('CAT_Custom_2_Max');return false;" style="background-color: #f0f0f0;" readonly="readonly" class="cat_textbox" id="CAT_Custom_2_Max" name="CAT_Custom_2_Max" /></td>
</tr>
<tr>
<td><input type="submit" value="Search" class="cat_button" /></td>
</tr>
</tbody>
</table>
</form>
Live Page: http://sevenclanscasino.designangler.com/warroad/warroad-calendar
jsfiddle: http://jsfiddle.net/VJQYb/

// Get current date
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate();
var currentDate = date.getFullYear() + '/' +
(month<10 ? '0' : '') + month + '/' +
(day<10 ? '0' : '') + day;
// Date for 7 days from current date
var futureDate = new Date();
futureDate.setDate(date.getDate() + week);
$("#CAT_Custom_2_Min").val(currentDate);
$("#CAT_Custom_2_Max").val(futureDate);
$("#calendar-form").submit();
I removed the variable d as it wasn't being declared, and added a # in front of CAT_Custom_2_Min and CAT_Custom_2_Max

you can try
<input type="text" id="date1" />
<script type="text/javascript">
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var cdate = month + "/" + day + "/" + year;
document.getElementById("date1").value=cdate;
</script>
just an example to clear the idea of showing date in input box...

Categories

Resources