I have the below code, how can I hide the calendar when I pick the month?
<div class="col-lg-3 col-sm-3" id="div_monthly_cal" style="display:none;">
<div data-date-minviewmode="months" data-date-viewmode="months" data-date-format="mm-yyyy" data-date="" class="input-append date dpMonths" id="dtpk2">
<input name="month_pick" id="month_pick" type="text" value="<?php echo date('m-Y'); ?>" class="form-control" readonly="readonly" />
<span class="input-group-btn add-on">
<button class="btn btn-primary" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
If you are using jquery calendar, than you can use below code :-
$('#example1').datepicker().on('changeDate', function (ev) {
$('#example1').Close();
});
Update 1:
You can also use the autoclose option, shown below :-
$('#dp1').datepicker({
format: 'mm-dd-yyyy',
autoclose: true
});
Update 2: Another option
$('#dp1').datepicker()
.on('changeDate', function(ev){
$('#dp1').datepicker('hide');
});
Related
I'm new on PHP and everything in general, I'm building an application where a date picker is shown. I want to submit the date following a specific format (year : "y" and month : "m") to end up with a url like http://localhost/index.php?m=06&y=2019...
the datepicker i'm using is https://getdatepicker.com/5-4/
and the code:
HTML:
<div class="col-xl-4 col-md-6 col-12">
<div class="float-left">
<form action="">
<div class="input-group">
<input name="datepicker" id="datepicker" class="form-control py-2 border-right-0 borderdate-pickerwidth:auto" value="04/01/2021" />
<button class="input-group-append">
<i class="mdi mdi-calendar align-middle font-c-x-large border-left-0 border px-2"></i>
</button>
</div>
</form>
</div>
</div>
JS:
$(function () {
$('#datepicker').datetimepicker({
format: 'DD/MM/YYYY'
});
});
Actually if I submit a form the value is:
?datepicker=04%2F01%2F2021
but I want:
?m=01&y=2021
So my question is: How can I submit the information displayed on the datepicker and format it as commented above?
Thank you in advice.
The select date seem to be empty when I added startDate: '+1d' into the javascript. Otherwise, it is just displaying today's date. I need it to display one day ahead and in some situations, two days ahead as well.
Javascript below:
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: false,
startDate:'+1d',
dateFormat: 'dd-mm-yy'
}).datepicker('update', new Date());
HTML Code below:
<div class="form-group">
<div class="col-sm-2"></div>
<label for="inputName" class="col-sm-3 control-label">Select Date Range</label>
<div class="col-sm-4">
<div class='col-sm-6'>
<div class="form-group">
<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
<input class="form-control" type="text" readonly id="start"/>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div id="datepicker2" class="input-group date" data-date-format="dd-mm-yyyy">
<input class="form-control" type="text" readonly id="end"/>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
</div>
</div>
you can use moment.js for this type of date/time manipulation
var tomorrow = moment().add(1, 'day').format('DD/M/YYYY');
outputs
03/11/2016
see jsbin:
here is the full working jsfiddle: https://jsbin.com/haxamaxaqe/edit?html,output
$('#txtDate').datepicker('setDate', "+1d");
I face this problem today when I try to show datepicker on Bootstrap Modal.
I'm using bootstrap-datepicker as datepicker library.
Here is my modal form :
<div class="form-group">
<label for="message-text" class="control-label">Start Date</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date">
</div>
</div>
And here is my datepicker script :
$('#datepicker2').datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
zIndexOffset: 10000
});
I already using zIndexOffset but it's not working, the calendar still shown behind the modal.
Can anyone suggest the solution ?
Thank you.
You should try adding the date picker container inside the modal div. You could give the modal an id like this:
<div class="form-group" id="myModalWithDatePicker">
<label for="start_date" class="control-label">Start Date</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date">
</div>
</div>
Then you can use the container option like the following:
$('#datepicker2').datepicker({
autoclose: true,
container: '#myModalWithDatePicker',
format: 'yyyy-mm-dd'
});
I used this option to fix.
.modal-open .ui-datepicker{z-index: 2000!important}
this option has been applied when modal open (class modal-open added to body)
I have seen many examples about adding and removing normal text fields. BUt on date picker i got the problem.
I have these codes to choose the date.
I want to add more than one date so how i can new date fields dynamicly. And also remove. There are manye xamples only for adding.
<div class="form-group">
<label class="control-label col-md-3">Dates</label>
<div class="col-md-2">
<input class="form-control form-control-inline input-medium date-picker" size="16" type="text" value="" />
<span class="help-block">Choose a date </span>
</div>
<div class="col-md-1">
<div class="input-group">
<span class="input-group-btn">
<button id="plus" class="btn btn-success" type="button" name="add">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
</div>
</div>
</div>
I got these code which is working for normal text field dynamic adding.
var template = '<div class="input-group"><input type="text" class="form-control"/></div>',
minusButton = '<span class="btn input-group-addon delete-field">(-)</span>';
$('.add-field').click(function() {
var temp = $(template).insertBefore('.help-block');
temp.append(minusButton);
});
$('.fields').on('click', '.delete-field', function(){
$(this).parent().remove();
});
I am using bootstrap date picker and bootsrap version is 3.3.6.
Thanks in advance.
You can attach datepicker to the element after inserting it to the DOM.
$('.add-field').click(function() {
var temp = $(template).insertBefore('.help-block');
temp.find("input[type=text]").datetimepicker();
temp.append(minusButton);
});
I am implementing a "JQuery add/remove input fields" solution:
I need to use some JQuery plugins to make everything work. For example I use a Datepicker, SelectPicker and Autosize..
So, for the markup that's already there (without the ADD functionality) this code works:
$(document).ready(function() {
$('.autosize').autosize();
$('input, textarea').placeholder();
$('.datetimepickaa').datetimepicker({
pickTime: false
});
$('.selectpicker').selectpicker();
// Remove the specific row
$("button.removee").click(function(){
$(this).closest(".conteiner").remove();
});
});
The problem is that when I try to add the ADD functionality, the jquery plugins don't work for the new elements, so I have to repeat the calls inside the add code to make it work:
$(document).ready(function() {
$('.autosize').autosize();
$('input, textarea').placeholder();
$('.datetimepickaa').datetimepicker({
pickTime: false
});
$('.selectpicker').selectpicker();
// Remove the specific row
$("button.removee").click(function(){
$(this).closest(".conteiner").remove();
});
// ADD FUNCTIONALITY
$("#add").click(function() {
var row = '\
<div class="form-group conteiner">\
<div class="row">\
<div class="col-md-2">\
<label for="date">Date:</label>\
<div class="input-group date datetimepickaa" id="datetimepickerloop" data-date-format="YYYY/MM/DD">\
<input type="text" class="form-control datetimepickaa" placeholder="Enter the date..." data-date-format="YYYY/MM/DD" />\
<span class="input-group-addon">\
<span class="glyphicon glyphicon-calendar"></span>\
</span>\
</div>\
</div>\
<div class="col-md-9">\
<label for="notes">Notes:</label>\
<textarea class="form-control autosize" id="" name=""></textarea>\
</div>\
<div style="" class="col-md-1">\
<button type="button" class="removee btn btn-primary btn-md pull-right" style="margin-top:25px">\
<span class="glyphicon glyphicon-remove"></span> Delete\
</button>\
</div>\
</div>\
</div>';
$("#wrapper").append(row);
// REPETITION OF THE CODE ABOVE!!!!!! //////////////////////////////
$('.autosize').autosize();
$('input, textarea').placeholder();
$('.datetimepickaa').datetimepicker({
pickTime: false
});
$('.selectpicker').selectpicker();
// Remove the specific row
$("button.removee").click(function(){
$(this).closest(".conteiner").remove();
});
});
});
Do you have any clue on how to do that the best way without repeting any code?
Thank's in advance!!
Extract them into a function and call that function?
function initializeThings()
{
$('.autosize').autosize();
$('input, textarea').placeholder();
$('.datetimepickaa').datetimepicker({
pickTime: false
});
$('.selectpicker').selectpicker();
// Remove the specific row
$("button.removee").click(function(){
$(this).closest(".conteiner").remove();
});
}
$(document).ready(function() {
initializeThings();
// ADD FUNCTIONALITY
$("#add").click(function() {
var row = '\
<div class="form-group conteiner">\
<div class="row">\
<div class="col-md-2">\
<label for="date">Date:</label>\
<div class="input-group date datetimepickaa" id="datetimepickerloop" data-date-format="YYYY/MM/DD">\
<input type="text" class="form-control datetimepickaa" placeholder="Enter the date..." data-date-format="YYYY/MM/DD" />\
<span class="input-group-addon">\
<span class="glyphicon glyphicon-calendar"></span>\
</span>\
</div>\
</div>\
<div class="col-md-9">\
<label for="notes">Notes:</label>\
<textarea class="form-control autosize" id="" name=""></textarea>\
</div>\
<div style="" class="col-md-1">\
<button type="button" class="removee btn btn-primary btn-md pull-right" style="margin-top:25px">\
<span class="glyphicon glyphicon-remove"></span> Delete\
</button>\
</div>\
</div>\
</div>';
$("#wrapper").append(row);
initializeThings();
});