How to change header format n bootstrap datepicker? - javascript

I am using bootstrap datepicker in my application.
Below is my code,
<div class='input-group date' id='dtpCalendar'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
$('#dtpCalendar').datepicker({
startView: "months",
Default: 'MMMM',
format: 'mm/dd',
multidate: true
});
Currently the datepicker looks like below,
I want to change the header format from MMMM YYYY to just MMMM.
I tried to change below code from bootstrap-datepicker.js but it doesn't work,
this.picker.find('#dtpCalendarthead .datepicker-switch')
.text(DPGlobal.formatDate(new UTCDate(month), titleFormat, this.o.language));
What else can I try?

Related

Disable Past Dates in Metronic Template datetimepicker plugin

I'm using Metronic Template in my Laravel project.
Here I wanted to disable past dates in datetime picker plugin.
I have searched some blogs and most answers were to use minDate:0 property.
But it seems this doesn't work in Metronic template.
Please help me if you have experience in such case.
Here is my code.
<div class="input-group date">
<input type="text" class="form-control m-input" readonly="" name="followup_deadline" placeholder="Select date & time" id="datePicker">
<div class="input-group-append">
<span class="input-group-text">
<i class="la la-calendar-check-o glyphicon-th"></i>
</span>
</div>
</div>
And javascript/jquery code is here
$("#datePicker").datetimepicker({
todayHighlight: !0,
autoclose: !0,
pickerPosition: "bottom-left",
format: "yyyy-mm-dd hh:ii:00"
});
Other details needed?
Looking forward your kind answer.
Hi I solved it using this format
Javascript
let todayDate = new Date().getDate();
let endD = new Date(new Date().setDate(todayDate));
$('.form_datetime').datetimepicker({
startDate : endD,
weekStart: 7,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
});
As you can see I have created a Date object and assigned it to startDate this then will disable all date behind the current date (even the time).
Html
<div class="input-group date form_datetime">
<input type="text" size="16" id="datee" class="form-control" name="date_needed" required>
<span class="input-group-btn">
<button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>

Bootstrap datetimepicker with hh:mm:ss format

I am working on an application, and I'm a little stuck on the datetimepicker. The datepicker should be able to show a data format of yyyy-mm-dd hh:mm:ss (year, month and date with current hour, minutes and seconds...). It's working fine, but after when i select the date the datepicker has to autoclose or hide. But it's not going off. I tried a lot with different scripts, still not able to work. Following is the HTML:
<span>Select time with Date</span>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" id='datetimepicker2' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
Following is the JS:
<script type="text/javascript">
$(function() {
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
autoclose: true
});
});
</script>
I guess the script is not supporting autoclose call. Any idea how I can fix this?
You can just listen to the datetimepicker dp.change event and force closing the datetimepicker when the date is changed like:
$(function() {
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss'
});
// Hide datetimepicker on date change
$("#datetimepicker2").on("dp.change", function() {
$(this).data("DateTimePicker").hide();
});
// Show datetimepicker on input text click
$('#datetimepicker2 > input').on('click', function() {
$(this).closest('.date').data('DateTimePicker').show();
});
});

How to display selected month dates only in date picker with respect to selecting month in another text box?

I have 2 text boxes, one is to choose month and year, and another with dates. My both date pickers are working fine, but what I need is when I select month and year from one text box, my date picker for another text box needs to display selected month's dates only.
Here is my code:
<div class="col-lg-3">
<label>Month</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="txtMonth">
<div class="input-group-addon bg-purple">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
<div class="col-lg-3">
<label>Date From</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="txtDateFrom">
<div class="input-group-addon bg-purple">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
My Javascript:
<script>
$(function () {
$('#txtMonth').datepicker({
autoclose: true,
format: "MM yyyy",
viewMode: "months",
minViewMode: "months"
})
$('#txtDateFrom').datepicker({
autoclose: true,
format: 'dd/mm/yyyy'
})
})</script>
This is my month selection textbox. If I select Sep 2019 it means, only sep month dates need to display in dates displaying datepicker.
Or if removing those previous and next icons on date calendar also enough for my requirement.
How can I achieve this?
what you can do is get the index of month you clicked and match it with the month of dates calender if both matches you can show that month date specifically OR give the same id to both year month and date month calender and run a for loop if both matches show it otherwise display hidden

Disable minutes selection in Bootstrap Datetimepicker

I wan't datetimepicker to show only rounded hours and disable minutes selection. So user will be able to pick only hours, like 02:00. However I can't achieve this simple task. Here is my code (in a Laravel view):
$("#date_from").datetimepicker({
format: 'yyyy-mm-dd hh:00',
startDate: "{{date('Y-m-d')}}",
minuteStepping: 60,
autoclose: true }).on('hide', function(e) {
$("#date_to").datetimepicker(
"setStartDate", new Date($('#date_from').val())
)....
I've tried steps: 60, stepping:60, minView: 1 and others.
Still I'm getting this
Here is one example for you, i think it will help you.
jsfiddle.net/tmk0293z/7/
There is changedate event bind with a function and changes the another startdate of other field.
Thanks,
Nishit Zinzuvadiya
Here is the actual code
(HTML):
<div class="input-append date form_datetime" id="first">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<div class="input-append date form_datetime" id="second">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<span id="selected"></span>
JS:
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
minView:1,
autoclose:true
});
$("#first").datetimepicker().on("changeDate", function(e){
var first = new Date(e.date.setMinutes(0));
first.setHours(first.getHours()+first.getTimezoneOffset()/60); //timezone correction
$("#second").datetimepicker('setStartDate', first);
//other = $("#first").find("input").val();
//$("#second").datetimepicker('setStartDate', other); //works also
});
see the option viewMode and format
https://eonasdan.github.io/bootstrap-datetimepicker/Options/
try using step: 60 not steps
please check this link also :click here

Bootstrap date-picker on change event on text box is not working?

I had a date-picker which was working correctly.And its change event was also working fine. Now i implemented a icon and make text box read-only. Now the change event is not fired neither in read-only textbox case nor in non-read-only textbook case.I have changes only html.
HTML of working case:
<label class="control-label">Date</label>
<input type="text" class="form-control date-picker" id="StateDatePicker" placeholder="MM/DD/YYYY">
Javascript of working case:
$StateDatePicker = $("#StateDatePicker");
$(".date-picker").datetimepicker({
format: "MM/DD/YYYY"
})
This is how i called change event.
$StateDatePicker.on("dp.change", function () {
//Performing functionality
});
This was working fine.It was no icon in working case, now i added icon showing in picture:
Now i have changed the following:
HTML:
<div class='date-picker input-group date'>
<input type='text' class="form-control" id="StateDatePicker" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Date-picker is working fine, only change event is not called
There is no change in JS. Why its change event is not called is not working?
Finally i got my answer
I tried this and it working now
<div class='date-picker input-group date' id="StateDatePicker"> //Set id to div
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Try to use like this where you have placed
This may help you (Not Sure)
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
in your HTML :
on your javascript :
$('.form_date').datetimepicker({
language: 'id',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
You can use the datepicker's onSelect event.
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
}
});
If you like, of course, you can make the change event on the input fire:
$(".date").datepicker({
onSelect: function() {
$(this).change();
}
});
Try something like:
$("#StateDatePicker").datetimepicker({
format: "MM/DD/YYYY"
}).on("changeDate", function () {
//Performing functionality
});
or maybe change your HTML to this: (give id for div tag, not input field)
<div class="input-group input-append date" id="StateDatePicker">
<input type="text" class="form-control" placeholder="MM/DD/YYYY">
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Its working demo.
Html Section
<div class="form-group input-group">
<label class="input-group-btn" for="date-fld1">
<span class="btn btn-default">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</label>
<input type="text" class="form-control date-input" id="date-fld1" readonly/>
</div>
And in script-----------
$(".date-input").datepicker().on("changeDate",function(){
alert('hi');
});
CDN files used
- http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js
and http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css

Categories