Bootstrap datepicker show dates only - javascript

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>

Related

How does JqueryUI read data on your jquery request when downloading data?

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)
});
});

Select only 2 days of Workdays?

I have to select only 2 workdays after today at my datepicker.
Ps: If today is Friday, I can't select Saturday and Sunday, the datepicker have to skip to Monday and Thursday
I'm using PHP, JS, Bootstrap.
My current code:
$('.datepickerVencBoleto').datetimepicker({
format: "DD/MM/YYYY",
minDate: new Date(),
daysOfWeekDisabled: [0, 6],
});
// DATEPICKER
$('.datepicker,.datepickerHojeMin').datetimepicker({
format: "DD/MM/YYYY",
showTodayButton: true,
locale: moment.locale('pt-br'),
showClear: true,
showClose: true
});
The red circle means the days I have to enable. (Image Example)
You can use enabledDates to specify which days should be enabled.
You can determine which days should be enabled depending on the day of the week (see momentjs isoWeekday for example).
Here a live sample using clone() and add():
function next2Workdays(){
var today = moment().startOf('day');
if( today.isoWeekday()>=1 && today.isoWeekday()<=4 ){ // Today is Monday - Wednesday
return [ today.clone(), today.clone().add(1, 'd') ];
} else if( today.isoWeekday() == 5 ){ // Today is Friday
return [ today.clone(), today.clone().add(3, 'd') ];
} else if( today.isoWeekday() > 5 ){ // Today is Saturday or Sunday
var startWeek = today.clone().startOf('isoWeek');
var newWeek = startWeek.clone().add(1, 'week');
return [ newWeek.clone().isoWeekday(1), newWeek.clone().isoWeekday(2)];
}
}
$('.datepickerVencBoleto').datetimepicker({
format: "DD/MM/YYYY",
minDate: moment().startOf('day'),
enabledDates: next2Workdays(),
locale: 'pt-br',
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date datepickerVencBoleto'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>

Can I disable few date ranges in Bootstrap datepicker?

I implement bootstrap datepicker to my project on Symfony and user can save reservation dates in DB.
Does exist any possibility to disable date rages from database? For example, I have date range from 22.12.2016 to 26.12.2016 and form 31.12.2016 to 03.01.2017 and I want to disable these dates in datepicker.
Thanks.
Hope this will useful to you
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen" />
<style>
.datetimepicker table tr td.disabled, .datetimepicker table tr td.disabled:hover {
color: rgb(255, 0, 0);
cursor: not-allowed;
}
</style>
<div class="form-group required">
<label class="col-sm-2 control-label" for="datestart">Reservation Start date</label>
<div class="col-sm-4">
<div class="start-date">
<div class='input-group date' id="time-start">
<input type='text' class="clearfix form-control col-sm-5" name="datestart" id="datestart" placeholder="Reservation Start date" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<label class="col-sm-2 control-label" for="dateend">Reservation End date</label>
<div class="col-sm-4">
<div class="end-date">
<div class='input-group date' id="time-end">
<input type='text' class="clearfix form-control col-sm-5" name="dateend" id="dateend" placeholder="Reservation End date" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// use this date formate 'MM/dd/yyyy HH:mm'
// start time
var datestart = '<?php echo $reservation_start_date; ?>';
// end time
var dateend = '<?php echo $reservation_end_date; ?>';
jQuery('#datestart').val(datestart);
jQuery('#dateend').val(dateend);
var today = new Date();
jQuery('#time-start').datetimepicker({
format: 'mm/dd/yyyy hh:ii',
autoclose: true,
pickerPosition: datestart,
maxView: 3,
minuteStep: 15,
defaultDate: datestart,
startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes())
}).on("changeDate", function (e) {
jQuery('#start-time-before').html(e.date);
var TimeZoned = new Date(e.date.setTime(e.date.getTime() + (e.date.getTimezoneOffset() * 60000)));
jQuery('#time-end').datetimepicker('setStartDate', TimeZoned);
jQuery('#time-start').datetimepicker('setDate', TimeZoned);
jQuery('#start-time-adjusted').html(TimeZoned);
});
jQuery('#time-end').datetimepicker({
format: 'mm/dd/yyyy hh:ii',
pickerPosition: dateend,
autoclose: true,
maxView: 3,
minuteStep: 15,
defaultDate: dateend,
startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes())
}).on("changeDate", function (e) {
jQuery('#end-time-before').html(e.date);
var TimeZoned = new Date(e.date.setTime(e.date.getTime() + (e.date.getTimezoneOffset() * 60000)));
jQuery('#time-start').datetimepicker('setEndDate', TimeZoned);
jQuery('#time-end').datetimepicker('setDate', TimeZoned);
jQuery('#end-time-adjusted').html(e.date);
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>

How do I convert this date range (month,year) date picker to show the output of the month in numeric format

$( "#SAProstarteDate, #SAProendDate" ).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MMyy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
var other = this.id == "SAProstarteDate" ? "#SAProendDate" : "#SAProstarteDate";
var option = this.id == "SAProstarteDate" ? "maxDate" : "minDate";
if ((selectedDate = $(other).val()).length > 0) {
year = selectedDate.substring(selectedDate.length-4, selectedDate.length);
month = jQuery.inArray(selectedDate.substring(0, selectedDate.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker( "option", option, new Date(year, month, 1));
}
}
});
----------
<div class="col-lg-4 col-md-4">
<div class="form-horizontal">
<div class="form-group">
<label for="SAProstarteDate" class="col-sm-4 control-label">Start Date</label>
<div class="col-sm-8">
<input type="text" class="form-control" validate="true" match="^(19|20)\d\d[- ](0[1-9]|1[012])[-](0[1-9]|[12][0-9]|3[01])$" error="* Please enter a valid Dispatch Date" id="SAProstarteDate" name="SAProstarteDate" placeholder="YYYY-MM" readonly="readonly">
<div class="text-danger error" role="alert">This is the error msg!</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="form-horizontal">
<div class="form-group">
<label for="SAProendDate" class="col-sm-4 control-label">End Date</label>
<div class="col-sm-8">
<input type="text" class="form-control" validate="true" match="^(19|20)\d\d[- ](0[1-9]|1[012])[-](0[1-9]|[12][0-9]|3[01])$" error="* Please enter a valid Dispatch Date" id="SAProendDate" name="SAProendDate" placeholder="YYYY-MM" readonly="readonly">
<div class="text-danger error" role="alert">This is the error msg!</div>
</div>
</div>
</div>
</div>
How do I convert this date range (month,year) date picker to show the output of the month in numeric format- the month and date should be in numeric format (mmyy) Plz help convert this in to that format
Hi I just solved this problem, and put the steps in the following link:After changing the date format in jquery month picker, why the from<to function not works anymore.
Just be careful of the substr function, as I made mistakes on that.

How to disable future months from current months in bootstrap datepicker

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"
})

Categories