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>
Related
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
I have just installed an amsul datepicker, and I'm unable to figure out how do you disable dates? For example, if I want the calendar to show today's date and future dates until 1 year. E.g: 2nd May 2019 -> 2nd May 2020. I want to disable all previous dates.
Also, I'm trying to build a From -> to date picker, so for example if a user selects 3rd May 2019 on the from input he/she should only be allowed to select dates from 3rd May 2019 till 3rd May 2020 in the "to" input.
Thanks.
Amsul: https://amsul.ca/pickadate.js/
// DatePicker
var dPicker;
var initialDateSet = false;
var backup = "";
$('.datepickerCheckin').pickadate({
onSet: function() {
if (!initialDateSet) {
$('.timepickerCheckin').click();
} else {
var tempString = dPicker.get();
var tempString2 = backup.substr(backup.indexOf("at"), backup.length);
$('.datepickerCheckin').val(tempString + " " + tempString2);
backup = $('.datepickerCheckin').val();
}
},
onOpen: function() {
dPicker = this;
if (initialDateSet) {
var index = $('.datepickerCheckin').val().indexOf("at");
if ($('.datepickerCheckin')[0].selectionStart > index) {
dPicker.close(true);
$('.timepickerCheckin').click();
}
}
},
format: 'dd mmm, yyyy',
today: '',
clear: '',
close: '',
});
// TimePicker
$('.timepickerCheckin').pickatime({
onSet: function() {
var tempString;
if (!initialDateSet) {
tempString = $('.datepickerCheckin').val() + " at " +
$('.timepickerCheckin').val();
$('.datepickerCheckin').val(tempString);
backup = tempString;
initialDateSet = true;
} else {
tempString = backup.substr(0, backup.indexOf("at"));
$('.datepickerCheckin').val(tempString + "at " +
$('.timepickerCheckin').val());
backup = $('.datepickerCheckin').val();
}
},
clear: '',
format: 'HH:i'
})
// DatePicker Checkout
$('.datepickerCheckout').pickadate({
onSet: function() {
$('.timepickerCheckout').click();
},
format: 'dd mmm, yyyy',
today: '',
clear: '',
close: '',
});
// TimePicker Checkout
$('.timepickerCheckout').pickatime({
onSet: function() {
var tempString = $('.datepickerCheckout').val() + " at " +
$('.timepickerCheckout').val();
$('.datepickerCheckout').val(tempString);
},
clear: '',
format: 'HH:i'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>
<label>from</label>
<input type="text" class="datepickerCheckin">
<label>to</label>
<input type="text" class="datepickerCheckout">
As per the documentation you provided you can set a date range with min max options. ie.
$('.datepicker').pickadate({
weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
min: new Date(2015,3,20),
max: new Date(2015,7,14)
})
On a landing page a datepicker is loaded as you can see in the image. I want to be able to change the background colors of specific dates on the calendar.
For example :
If 27-11-2017 slot is booked, then on load I want the color to change for that date.
My Script code:
<script>
$(document).ready(function () {
// I am getting a data on this loop so how can i change same date background color
#if(!empty($BookeData))
#foreach($BookeData as $key => $value)
#if($value->event_date)
#endif
#endforeach
#endif
/* Gt data in $BookeData
array:13 [
"id" => 8
"source_type" => "App\Venue"
"source_id" => 7
"event_date" => "2017-11-28"
"session" => "1"
"payment" => "5000"
"status" => "Booked"
"created_at" => "2017-11-27 10:30:22"
"updated_at" => "2017-11-27 10:30:22"
]*/
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#datepicker').datepicker({
changeYear: true,
multidate :true,
maxViewMode: 0,
startDate: today
}).on('changeDate', function(e) {
var $date = $.datepicker.formatDate('yy-mm-dd', e.date);
$("#event_date").val($date);
//e.preventDefault();
//var formData = $('form').serialize();
$.ajax({
type: 'GET',
url: "{{ route('admin.calendar.add') }}",
data: {'date':$date},
cache: false,
success: function(response){
$("#calendar div.divForm").html(response);
$("<input type='hidden' value='' name='event_date' id='event_date' />").appendTo('#calendar div.dateDiv');
$("#event_date").val($date);
$("#calendar").show();
}
});
});
$(".close").on("click", function() {
$("#calendar").hide();
});
});
As i understand your issue, try as like below:
<input type="text" id="datepicker" />
var booked_date = ["27/11/2017"]; //Take your booked date here from your data
$("#datepicker").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
beforeShowDay: function(date){
var d = date;
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
var formattedDate = curr_date + "/" + curr_month + "/" + curr_year
if ($.inArray(formattedDate, booked_date) != -1){
return {
classes: 'activeClass'
};
}
return;
}
});
The activeClass can be any form of CSS. In my example i have just changed the background color. In your example you could offset an image and apply it to the day.
.activeClass{
color: yellow;
background: white;
}
Hope this helps you OR you can get some idea!
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
I am comparing some dropdownlist value, basically the Start date must be earlier than end date
I found a lot of sample source codes through goggle and others, but they only provide DD/MM/YYYY. I only need MM/YYY only, when ever i tried to remove "DD" there would be errors, if i am right its because of the date keyword/element.
Is there any solution to it? any help or ref link would be good. Thanks
P.s The codes below are working for DD/MM/YYYY
function y2k(number) {
return (number < 1000) ? number + 1900 : number;
}
function padout(number) {
return (number < 10) ? '0' + number : number;
}
function validate(what) {
var startday = what.startday.options[what.startday.selectedIndex].value;
var startmonth = what.startmonth.options[what.startmonth.selectedIndex].value;
var startyear = what.startyear.options[what.startyear.selectedIndex].text;
var endday = what.endday.options[what.endday.selectedIndex].value;
var endmonth = what.endmonth.options[what.endmonth.selectedIndex].value;
unvalidstartdate = startday + '/' + startmonth + '/' + startyear;
unvalidenddate = endday + '/' + endmonth;
var startdate = new Date(startyear - 0, startmonth - 1, startday - 0);
var enddate = new Date(endmonth - 1, endday - 0);
var validstartdate = padout(startdate.getDate()) + '/'
+ padout(startdate.getMonth() + 1) + '/'
+ y2k(startdate.getYear())
var validenddate = padout(enddate.getDate()) + '/'
+ padout(enddate.getMonth() + 1) + '/' + y2k(enddate.getYear());
if (unvalidstartdate != validstartdate) {
alert('Start Date: '
+ what.startday.options[what.startday.selectedIndex].text
+ ' '
+ what.startmonth.options[what.startmonth.selectedIndex].text
+ ' '
+ what.startyear.options[what.startyear.selectedIndex].text
+ ' is invalid');
return false;
}
if (unvalidenddate != validenddate) {
alert('End Date: '
+ what.endday.options[what.endday.selectedIndex].text + ' '
+ what.endmonth.options[what.endmonth.selectedIndex].text
+ ' '
+ ' is invalid');
return false;
}
starttime = Date.UTC(y2k(startdate.getYear()), startdate.getMonth(),
startdate.getDate(), 0, 0, 0);
endtime = Date.UTC(y2k(enddate.getYear()), enddate.getMonth(), enddate
.getDate(), 0, 0, 0);
if (starttime < endtime) {
alert('VALID');
// valid
} else {
alert('NOT VALID');
return false;
}
currentdate = new Date();
currenttime = Date.UTC(y2k(currentdate.getYear()), currentdate
.getMonth(), currentdate.getDate(), 0, 0, 0);
if (endtime < currenttime) {
// valid
} else {
alert('End Date is not less than todays date');
return false;
}
what.startdate.value = validstartdate;
what.enddate.value = validenddate;
return true;
}
//-->
</script>
<form>
Start Date: <select name="startday">
<option value="01">1st
<option value="02">2nd
<option value="03">3rd
</select> <select name="startmonth">
<option value="01">january
<option value="02">february
<option value="03">march
</select> <select name="startyear">
<option>1990
<option>1991
<option>1992
</select>
<p>
End Date: <select name="endday">
<option value="01">1st
<option value="02">2nd
<option value="03">3rd
</select> <select name="endmonth">
<option value="01">january
<option value="02">february
<option value="03">march
</select> <input type="hidden" name="startdate"> <input type="hidden"
name="enddate">
<p>
<input type="button" onClick="validate(this.form)" value="Validate">
</form>
var startDateFinal = "your startdate element value";
var endDateFinal = "your enddate element value";
var startDate = new Date (startDateFinal);
var endDate = new Date(endDateFinal);
if(endDate.getTime() > startDate.getTime()){
// some logic
}
else{
// some logic
}
var invalid=false;
var startDate="03/2011";//start date in mm/yyyy format
var endDate="04/2012";//end date in mm/yyyy format
var startMonth=startDate.substring(0,2);
var endMonth=endDate.substring(0,2);
var startYear=startDate.substring(3);
var endYear=endDate.substring(3);
if(startYear>endYear)
{
invalid=true;
}
else if(startYear<endYear && startMonth>endMonth)
invalid=true;
The Date constructor only needs year and month and you can use strings, so you can use the values directly from the form controls like:
var start = new Date(startyear, --startmonth);
var end = new Date(endyear, --endmonth);
if (start < end) {
// start is before end
}
Oh, and you should be using getFullYear to get the full year number. For compatibility with Java, the original getYear method only returns a two digit year.
The below code will give you two date fields the start date field will be smaller than end date field. the code works fine
you will get the jquery, jqueryui/calendar on http://jquery.com/ and http://jquery.com/ sites.
include below code in HEAD section
include jquery-1.5.1.min.js, jquery-ui-1.8.13.custom.min.js, jquery-ui-1.8.11.custom.css" ,calendar.css" files
$(function() {
var dates = $( "#txt_startdate, #txt_enddate" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
dateFormat: 'yy-mm-dd',
onSelect: function( selectedDate ) {
var option = this.id == "txt_startdate" ? "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 );
}
});
});
enter below code in body section of your html
<input name="txt_startdate" id="txt_startdate" type="text" />
<input name="txt_enddate" id="txt_enddate" type="text" />
Hope this helps you
try this
function test()
{
var date1,date;
date1 = new Date(2011,11,1);
// startdate drop down values
//2011-->year 11--> startmonth 1-->startdate(this you keep always as 1 for startdate and end date) since you only wants to compare mm/yyyy
date2 = new Date(2002,11,1);
// enddate drop down values
//2011-->year 11--> endmonth 1-->enddate(this you keep always as 1 for startdate and end date) since you only wants to compare mm/yyyy
if(date1>date2)
alert("date1 is > date2")
else
alert("date2 is > date1")
}
check this date