I have date picker and want my date picker to be able get below data that is available, no matter if a user select last year date. eg. 2019-12-04.
On my jquery request I can only get this year date, anyone who can help me to achieve such logic. The logic is below if perhaps I am not making a sense.
HTML:
<!---DatePicker for startDate and endDate ---->
<div class="d-flex justify-content-start">
<div class="col-xl-10.5 col-lg-10.5 col-md-10 col-sm-10.5 col-10.5">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="from" placeholder="startdate" />
<span class="input-group-addon">To</span>
<input type="text" class="input-sm form-control" placeholder="enddate" />
</div>
</div>
</div><br/>
<br/>
<br/>
Javascript:
// date functionality
$(document).ready(function() {
$('.input-daterange').datepicker({
dateFormat: "dd-mm-yy",
autoclose: true
});
});
//checking equality for channel fields on thingspeak.
$(function() {
$("#download").click(function(e) {
e.preventDefault();
var isTemperature = $('#temperature').is(':checked');
var isButtonState = $('#button_state').is(':checked');
if (isTemperature && isButtonState) {
window.open('https://api.thingspeak.com/channels/952961/feeds.csv?api_key=FDJCRN71YJM2R0FM&start=2020-01-06T00:00+02&end=2020-01-10T23:59+02:00&timezone=Africa/Johannesburg');
} else {
if (isTemperature) {
window.open('https://api.thingspeak.com/channels/952961/fields/1.csv?api_key=FDJCRN71YJM2R0FM&timezone=Africa/Johannesburg');
} else {
if (isButtonState) {
window.open('https://api.thingspeak.com/channels/952961/fields/8.csv?api_key=FDJCRN71YJM2R0FM&start=2020-01-06T00:00+02&end=2020-01-10T23:59+02:00&timezone=Africa/Johannesburg');
}
}
}
});
});
I made some attempts and finally got it working, but doing this logic below;
// date functionality
$(document).ready(function() {
var year = (new Date).getFullYear();
$('.input-daterange').datepicker({
format: "dd-mm-yyyy",
autoclose:true,
minDate: new Date(year, 0, 1),
maxDate:new Date(year, 11, 31)
});
});
Related
I'm using Boostrap datetime picker to make reservations in fullcalendar.
I would like to pre-fill my datetime piker with the selected date and time when clicking the calendar.
With the following code I can pre-fill the time but not the date and I don't know why. I found that I should just change the format I want to display, but after doing that, the date is not being pre-filled.
select: function(inform) {
var date_from= new Date(inform.startStr);
var date_to= new Date(inform.endStr) ;
let currentDate = new Date();
if (date_from >= currentDate) {
$('#exampleModalToggle').modal('show');
console.log(' date clicked bigger than current date, you can do reservation')
$(".fc-highlight").css("background", "#ffc800", "important!");
$(function() {
$("#start_date_picker").datetimepicker({
format: 'yyyy-MM-dd',
locale: "fr",
useCurrent:false,
defaultDate: date_from,
});
$("#start_hour_picker").datetimepicker({
format: 'HH:mm',
useCurrent:false,
defaultDate: date_from,
});
$("#end_date_picker").datetimepicker({
format: 'yyyy-MM-dd',
useCurrent:false,
defaultDate: date_to,
});
$("#end_hour_picker").datetimepicker({
format: 'HH:mm',
useCurrent:false,
defaultDate: date_to,
})
});
}
},
<!--Start Date-->
<div id="start_date" class="add_reservation_subtitles pb-3" style="margin-left: 28px;">
<input id="start_date_input" data-provide="datepicker" name="start_date" type="date"
lang="fr" id="datepicker_second" class="datepicker1" style="margin-left: 28px;" required>
<input name="start_hour" type="time" lang="fr" class="timepicker modal_rigth_elements"
required>
</div>
<!--End Date-->
<div id="end_date" style="margin-left: 28px;" class="add_reservation_subtitles pb-3 ">
<input id="end_date_input" type="date" lang="fr" class="date-picker"
style="margin-left: 28px;" required>
<input name="end_hour" type="time" lang="fr" class="timepicker modal_rigth_elements"
required>
</div>
I have tried different formats, like yyyy-mm-dd, 'mm-dd-yyyy' , 'mm/dd/yyyy' and nothing is working. I don't even have error messages. So I don't know what is happening.
I'm using this datetimepicker :
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
Thansk a lot for all your help
I am working on a website in which I want the disable the past dates in calendar.
The HTML and JQuery codes which I have used in order to make the calendar are:
$("#startdate_datepicker").datepicker({numberOfMonths:[1, 2]});
$("#enddate_datepicker").datepicker({numberOfMonths:[1, 2]});
<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<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>
<div class="dates">
<div class="start_date" style="width:50%;margin-right:3%;">
<input readonly="readonly" class="form-control start_date mb-4" type="text" placeholder="start date" id="startdate_datepicker">
</div>
<div class="end_date" style="width:50%;margin-left:3%;">
<input readonly="readonly" class="form-control end_date mb-4" type="text" placeholder="end date" id="enddate_datepicker">
</div>
</div>
Problem Statement:
I am wondering what changes I should make in the code above so that after selecting the start date, the dates before the start date should get disabled on selecting the end date.
You can use the option=beforeShowDay of JQuery UI, then customize the styles for each day like below demo:
As JQuery UI Guide for beforeShowDay:
A function that takes a date as a parameter and must return an array
with:
[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date
let startDateUI = $("#startdate_datepicker").datepicker({
numberOfMonths:[1, 2],
todayHighlight: true,
beforeShowDay: function (calDate) {
return calDate - new Date() < 0 ? [false, '', ''] : [true, '','']
}
});
$("#enddate_datepicker").datepicker({
numberOfMonths:[1, 2],
todayHighlight: true,
beforeShowDay: function (calDate) {
let selectedStartDate = $( "#startdate_datepicker" ).datepicker( "getDate" )
return calDate - selectedStartDate < 0 ? [false, 'disable-day', 'not available day!!!'] : [true, '','']
}
});
.disable-day{
background-color:red;
}
<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<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>
<div class="dates">
<div class="start_date" style="width:50%;margin-right:3%;">
<input readonly="readonly" class="form-control start_date mb-4" type="text" placeholder="start date" id="startdate_datepicker">
</div>
<div class="end_date" style="width:50%;margin-left:3%;">
<input readonly="readonly" class="form-control end_date mb-4" type="text" placeholder="end date" id="enddate_datepicker">
</div>
</div>
Use .datepicker("option", "minDate", <value of start date>) to set the earliest selectable date. "maxDate" will allow you to set the latest selectable date.
Is it possible to show only dates in Bootstrap datepicker ?
I am showing only months and years using following methods -
$("#year").datepicker({
format: " yyyy",
viewMode: "years",
minViewMode: "years"
});
$("#month").datepicker({
format: " mm",
viewMode: "months",
minViewMode: "months",
maxViewMode: 0
});
A live demo showing only year and month selection in Year and Month field. I want to show only date from 1 to 31 without Month, Year at the top and also without day's name, at the Date field.
Yes, it is possible, but a bit complicated, you have to:
Set the format option to d (or dd)
Set maxViewMode option to 0 (minViewMode is 0 by default)
Hide prev/next month buttons and the month name button, you can do it using CSS:
the days view of the datepicker is inside a table that has .datepicker-days class
the prev and next button are inside the .datepicker-days table and they have .prev and .next classes
the month name is in the same table and it has the .datepicker-switch class
The date datepicker should show the right number of days, so you have to dinamically update defaultViewDate when year and month are selected (see changeDate event)
Since the picker has no setter method for defaultViewDate, you can destroy it and then re-init it.
Here a full working sample:
$(document).ready(function() {
var dateOpt = {
format: 'dd',
maxViewMode: 0
};
$("#year").datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years"
}).on('changeDate', function(e) {
var month = $('#month').datepicker('getDate');
if( !month ){
month = new Date();
}
dateOpt.defaultViewDate = {
year: e.date.getFullYear(),
month: month.getMonth(),
day: 1
};
// Reset date datepicker
$('#date').datepicker('destroy');
// Re-init with defaultViewDate option
$('#date').datepicker(dateOpt);
});
$("#month").datepicker({
format: "mm",
viewMode: "months",
minViewMode: "months",
maxViewMode: 0
}).on('changeDate', function(e) {
var year = $('#year').datepicker('getDate');
if( !year ){
year = new Date();
}
dateOpt.defaultViewDate = {
year: year.getFullYear(),
month: e.date.getMonth(),
day: 1
};
$('#date').datepicker('destroy');
$('#date').datepicker(dateOpt);
});
$("#date").datepicker(dateOpt)
});
/* Hide prev/next buttons and month name*/
.datepicker-days>table>thead>tr>th.prev,
.datepicker-days>table>thead>tr>th.datepicker-switch,
.datepicker-days>table>thead>tr>th.next {
display: none;
}
/* Hide days of previous month */
td.old.day{
visibility: hidden;
}
/* Hide days of next month */
td.new.day{
display: none;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div class="container">
<div class="form-group row">
<label class="form-control-label col-md-3" for="year">Year</label>
<div class="col-md-9">
<input type="text" id="year" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="form-control-label col-md-3" for="year">Month</label>
<div class="col-md-9">
<input type="text" id="month" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="form-control-label col-md-3" for="year">Date</label>
<div class="col-md-9">
<input type="text" id="date" class="form-control">
</div>
</div>
</div>
I'm creating a web app in angularJS with ASP.NET, here is my JavaScript of a datepicker:
$('#sandbox-container input').datepicker({
autoclose: true
});
$('#sandbox-container input').on('show', function (e) {
console.debug('show', e.date, $(this).data('stickyDate'));
if (e.date) {
$(this).data('stickyDate', e.date);
} else {
$(this).data('stickyDate', null);
}
});
$('#sandbox-container input').on('hide', function (e) {
console.debug('hide', e.date, $(this).data('stickyDate'));
var stickyDate = $(this).data('stickyDate');
if (!e.date && stickyDate) {
console.debug('restore stickyDate', stickyDate);
$(this).datepicker('setDate', stickyDate);
$(this).data('stickyDate', null);
}
});
The code in ASPX is the following:
<div id="sandbox-container" class="row">
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-2">
<div class="row">
<input type="text" ng-model="datefrm" date-format="dd-MM-yyyy" class="textboxandbutton" placeholder="From" date-only />
</div>
</div>
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-2">
<div class="row">
<input type="text" ng-model="dateto" date-format="dd-MM-yyyy" class="textboxandbutton" placeholder="To" date-only>
</div>
</div>
</div>
The current format is MM/dd/yyyy. This is how the date is showing:
02/08/2017
I need to change the date format to:
dd-MM-yyyy
The data which I want to see is:
08-02-2017
All the help is appreciated!
Just add format option of datepicker:
format: 'dd-mm-yyyy'
Please find below snippet for more information
$('#sandbox-container input').datepicker({
autoclose: true,
format: 'dd-mm-yyyy'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/>
<div id="sandbox-container">
<input type="text" type="text" class="form-control" />
</div>
The following code will work:
var date = "01/24/1977";
var datearray = date.split("/");
var newdate = datearray[0] + '-' + datearray[1] + '-' + datearray[2];
In am using a calendar in bootsrtap datepicker, in that I have displaying only month and year (mm-yyy). I want to disable future months from current month. I have searched a lot but I didn't find an answer. Please help me, I have attached my code below
JS :
$(document).ready(function () {
var cou = $('#rolecount').val();
var c;
for (c = 0; c <=cou; c++){
$('#datepicker'+c).datepicker({
format: 'mm-yyyy',
endDate: '+0d',
viewMode: "months",
minViewMode: "months",
});
$('#datepicker'+c).datepicker().on('monthSelected', function(ev){
$(this).datepicker('hide');
});
}
});
HTML:
<div class="input-group date">
<input type="text" id="datepicker<?=$j?>" required name="joindate<?=$j?>" class="date_picker form-control" placeholder="show datepicker" maxlength="100" autocomplete="off"><span class="input-group-addon" id="basic-addon2"><i class="fa fa-calendar"></i></span>
<input type="hidden" name="roleid<?=$j?>" value="<?=$str[$j]?>" />
</div>
You need to redefine your endDate option value:
$('.input-daterange').datepicker({
format: 'mm-yyyy',
// You used '+0d' that is for days instead of '+0m' that is for months.
endDate: '+0m',
viewMode: "months",
minViewMode: "months"
})