Datepicker and clone function from JQuery issue? - javascript

this is the part from the js, which does the cloning stuff.
$(document).on("click", ".adauga_incasare", function () {
$('.incasari:last').clone(true).insertAfter('.incasari:last');
$(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
$(".incasari:last").find(".suma_incasare_container label b").remove();
$(".coscos").css("padding-top", "4px");
$(".incasari:first").find(".coscos").css("padding-top", "20px");)
};
this is the html code :
<div class="incasari first hasData">
<div class="data_incasare_container">
<label><b>Data</b>
</label>
<input class="data_incasare datepicker_incasare" name="data_incasare" type="text">
<label class="data_incasare_hidden">
<?php echo $value->date; ?></label>
</div>
<div class="suma_incasare_container">
<label><b>Suma</b>
</label>
<input class="suma_incasare" type="text" maxlength="8" name="suma_incasare">
<label class="suma_incasare_hidden">
<?php echo $value->received; ?></label>
</div>
<div class="coscos"> <a class="stergereIncasare" href="javascript:void(0);"><i class="icon-trash sterge_incasare" id = "<?php echo $value->id; ?>"></i></a>
<div style="clear:both;"></div>
<div class="incasare_action">
<input class="btn btn-success salveaza_incasare" type="button" style="margin-left:50px;width:80px;height:30px;float:left;" value="Salveaza"></input>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div> + Adauga incasare noua
and the code from the datepicker :
$('.datepicker_incasare').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
The problem appears when I press a button, which does the cloning stuff, and after that the datepicker does not work on the input.
In the image below you can see the result:
When I save a new row and it refreshes the page, it works. But it does not work after cloning.
What should I do ? thx
for this script :
$foo = $('.incasari:last').clone(true).insertAfter('.incasari:last');
$(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
$(".incasari:last").find(".suma_incasare_container label b").remove();
$(".coscos").css("padding-top", "4px");
$(".incasari:first").find(".coscos").css("padding-top", "20px");
$foo.datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
this is the result:

you have to initialize the cloned datepicker by simpy put the call into your click handler
$(document).on("click", ".adauga_incasare", function () {
$foo = $('.incasari:last').clone(true).insertAfter('.incasari:last');
$(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
$(".incasari:last").find(".suma_incasare_container label b").remove();
$(".coscos").css("padding-top", "4px");
$(".incasari:first").find(".coscos").css("padding-top", "20px");)
$foo.datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
};

As in my comment you need to bind after insertion.
$(document).on("click", ".adauga_incasare", function () {
$foo = $('.incasari:last').clone(true).insertAfter('.incasari:last');
$(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
$(".incasari:last").find(".suma_incasare_container label b").remove();
$(".coscos").css("padding-top", "4px");
$(".incasari:first").find(".coscos").css("padding-top", "20px");)
$foo.datepicker({ //really this should be just the init executed in a callback
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
};
function initDatePicker(){
$('.datepicker_incasari').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
}
then in your document load call initDatePicker for first initialization
$(function() {
initDatePicker();
});

Related

Get no of days in selected month in jQuery UI datepicker

I'm using JqueryUI datepicker. I want to calculate no of days on selected month & display in textbox.
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<input name="noofdays" id="noofdays" />
The onChangeMonthYear callback is used when a month or year is changed in the datepicker. For reference
Also, include the Jquery UI after including the Jquery.
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst){
var year = inst.selectedYear, month = inst.selectedMonth+1;
$(this).datepicker('setDate', new Date(year, month, 0));
$("#noofdays").val(new Date(year, month, 0).getDate())
},
onChangeMonthYear:function(year, month, date){
$("#noofdays").val(new Date(year, month,0).getDate());
}
});
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<input name="noofdays" id="noofdays" />

How to disable click on month in calendar

As you can see on the image I want to disable click on December 2017 (black box). How can I do this?
My javascript function for the calendar.
$('#datepicker').datepicker({
changeYear: true,
multidate: true,
maxViewMode: 0,
startDate: today,
})
Maybe you could use changeMonth option as following :
$('#datepicker').datepicker({
changeYear: true,
changeMonth: false,
multidate: true,
maxViewMode: 0,
startDate: new Date(),
});
$('#datepicker2').datepicker({
changeYear: true,
changeMonth: true,
multidate: true,
maxViewMode: 0,
startDate: new Date(),
});
input {
width: 25%;
margin: 1%;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/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.min.js"></script>
<input type="text" id="datepicker" placeholder="You can't change my month !" />
<input type="text" id="datepicker2" placeholder="You can change my month !" />

How to do something when date is selected from date picker

I am using this date picker http://bootstrap-datepicker.readthedocs.io/en/latest/events.html#hide.
The code is written as,
<div class="form-group" id="purchasedatediv">
<label class="col-sm-3 control-label">Purchase Date *</label>
<div class="col-sm-9">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="text" value="<?php if($result != '') echo date('m/d/Y', $result->purchasedate->sec); ?>"
name="purchasedate" id="purchasedate" class="form-control required">
</div>
</div>
</div>
$('#purchasedatediv .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: formatToApply
});
I am trying to find the event when the date is selected and do something on that event but in this document, I am not able to find that. Please help!
Please Try
$('#datepicker').datepicker().on("change", function(e) {
console.log("Date changed: ", e.target.value);
});
Since you are using bootstrap plugin for datepicker, you can check reference manual for it.
Trigger to changeDate event event like
$('#purchasedatediv .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: formatToApply
}).on('changeDate', function(e) {
//Print e variable
console.log('date changed', e);
//Do your stuff here, read date, parse it, whatever.
});
Date is stored in callback parameter e.date.
$('#purchasedatediv .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: formatToApply
}). on(picker_event, function(e){
//do your stuf
}) ;
this code will hold everything you need
Try to below code
<input type="text" value=""
name="purchasedate" id="purchasedate" class="form-control required" onChange="functionname(this)">
JS Code
function functionname(e){
your logic
}
Click Here to show demo in jsFiddle
$('#purchasedate').off('change').on('change', function(){
// enter code here
})

bootstrap-datepicker update value doesn't work

I'm trying to update the value of a datepicker for bootstrap when clicking a div, however it just does nothing (no errors). The datepicker itself works perfectly fine. Here's the javascript with the options:
$('#datepicker').datetimepicker({
format: 'DD-MM-YYYY',
pickTime: false,
defaultDate: moment(),
minDate: moment(),
maxDate: moment().add(10,'y'),
showClose: true,
autoclose: true,
keepOpen: false,
});
The javascript I am trying to change the date with:
$('.someDiv').click(function() {
$("#datepicker").datetimepicker('setDate', '2016-03-05');
});
And finally the HTML:
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" id="date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Docs can be found under following link, however the provided method doesn't work: https://bootstrap-datepicker.readthedocs.org/en/latest/
$(function () {
$('#datepicker').datetimepicker({
pickTime: false,
format: 'DD-MM-YYYY',
pickTime: false,
defaultDate: moment(),
minDate: moment(),
maxDate: moment().add(10,'y'),
showClose: true,
autoclose: true,
keepOpen: false
});
$('.date-setter').click(function() {
alert('jj');
$('#datepicker').data("DateTimePicker").setDate('03-05-2016');
});
});
Answer to the current version
$('#deadline_picker').data("DateTimePicker").date(deadline);

Check valid datepicker

i have form search
<b><span>#Html.Raw(Generic.ToDate):&nbsp</span></b><span>#Html.DateEmpty("ToDate", (DateTime?)ViewBag.ToDate)</span>
<b><span>#Html.Raw(Generic.FromDate):&nbsp</span></b><span>#Html.DateEmpty("FromDate", (DateTime?)ViewBag.FromDate)</span>
I have code js input datepicker:
$("input[type=date]").each(function () { this.type = "input" }).datepicker();
I want check validate fromdate < todate and date > "30/9/2013". please who can help me.
Read date range
js
$(function () {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
HTML
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />

Categories