jquery bootstrap datepicker click event just firing once - javascript

I have the following code
(i am using the following bootstrap datepicker : http://www.eyecon.ro/bootstrap-datepicker/)
The datepicker must be closed when you click on a day. (not the changedate event because a moth of year can also be changed)
everything works fine for just one time.
The function is just firing once.
Also I want to retrieve the date from the datepicker
How can you achieve this
(function () {
var setDate = $('_Date').val();
//$('#_datepicker').datepicker('setValue', now);
$('#_datepicker').datepicker('setValue', setDate);
$('#_Date').change(function () {
setDate = $('#_Date').val();
$('#_datepicker').datepicker('setValue', setDate);
console.log('day2');
});
})(jQuery)
$(function () {
$('.datepicker-days td.day').click(function (e) {
e.preventDefault();
console.log('day');
//$('#_datepicker').datepicker('hide');
//alert($('#_datepicker').getDate());
//return false;
});
});
HTML / ASPX:
<div class="col-sm-2" runat="server" id="block_date">
<div class="input-group input-append date" id="datepicker_addcase" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<asp:TextBox runat="server" ID="cn_Date" CssClass="form-control" type="date-local" placeholder="Date" Text="Date"></asp:TextBox>
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar add-on"></span>
</div>
</div>
</div>

$('.datepicker-days').on('click', 'td.day', function (e) {
e.preventDefault();
$('#datepicker_addcase').datepicker('hide');
return false;
});

remove first b.stopPropagation() in "bootstrap-datepicker,min.js" and try:
$(document).on('click','td.day:not(\'.disabled\'):not(\'.active\')',function(e){
// MY LOGIC
});

Related

Bootstrap datetimepicker does not firing change event on time change

I am using only time input (Custom Formats example 3 given on this link) http://eonasdan.github.io/bootstrap-datetimepicker/
I only wants to listen for change in time when user click up or down for hour or minute changes. I tried change.dp, change and dp.change but none are working
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" id="start_time"/>
<input type="hidden" name="book_meeting[start_date]" id="book_meeting_start_date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
$("#start_time").on("change", function(e) {
alert("helloi");
});
$("#book_meeting_start_date").on("change", function(e) {
alert("helloi");
});
$("#book_meeting_start_date").on("change.dp", function(e) {
alert("helloi");
});
After searching i found it's answer.i ended up using dp.hide which is working as expected.
$('#datetimepicker3').datetimepicker({
stepping: 5,
format: 'HH:mm'
}).on('dp.hide', function (event) {
});

How to force Bootstrap calendar to focus and open under the <i> tag when click on input?

I have a Bootstrap calendar. It opens when I click on the calendar icon but it does not open when I click on the input. I want to make the calendar open under the calendar icon not under the input element when click on input.
<div class="input-append date" id="dp3" data-date="11/03/2017" data-date-format="dd/mm/yyyy">
<input class="span2" id="dp2" size="16" type="text" value="11/03/2017">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<script>
$(document).ready(function() {
$('#dp3').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(){
$('#dp3').datepicker('hide');
});
$('#dp2').click(function(event){
event.preventDefault();
$('#dp3').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(){
$('#dp3').datepicker('hide');
});
});
</script>
I think simple questions are not answered here. Instead of clicking to the vote down button it would be useful to provide a working example link. Anyway took more then half an hour but made it to work it was very simple. didn't think to use $('#dp3').datepicker('show');
$(document).ready(function() {
$("#dp3").datepicker();
$('#dp2').click(function () {
$('#dp3').datepicker('show');
});
});

Set form to dirty state (AngularJS) after change in datetimepicker (bootstrap)

I'm have a Bootstrap 3 DateTimePicker input filed on my webpage and I'm trying to enable 'Edit' button whenever change is made to existing data. The problem is that change of datetime using datatimepicker is not marking my form as 'dirty', so button is greyed out permanently.
<input type="submit" value="{{!myCtrl.thing.id ? 'Add' : 'Update'}}" class="btn btn-primary btn-sm" ng-disabled="myForm.$invalid || myForm.$pristine">
I know how to catch datatime change event using JQuery, but I don't have any idea how to access 'myForm' to change it's state to dirty.
<form ng-submit="myCtrl.submit()" name="myForm" class="form-horizontal">
<label class="col-md-2 control-label" for="date">Date:</label>
<div class="col-md-7">
<div class="input-group date" id='datetimepicker'>
<input class="form-control" name="date" id="datetimepicker1" placeholder="select date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker').datetimepicker({
});
});
$("#datetimepicker").on("dp.change", function(e) {
//CODE TO set myForm to 'dirty' state.
});
</script>
</form>
You can manually set it using the general form [formName].$setDirty(). So for you it would be: myForm.$setDirty().
Why don't you try to set a directive to handle jQuery stuff?
mainModule.directive('datePickerHandler', function () {
return {
restrict: 'A',
link: function (scope, el) {
angular.element(document).ready(function () {
$(el).datetimepicker({}).on('dp.change', function(e) {
scope.myForm.$setDirty();
});
});
}
}
});
Then you can have access to the scope directives like form.

Jquery to get an instance and write it to input field

<div class="form-group">
<div class='input-group' id='datepicker-start'>
<input type='text' class="form-control" id='start' />
<span class="input-group-addon date"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Hi Guys this my date picker css with bootstrap
I am using Zebra Date Picker but using bootstrap icon instead of Zebra icon which is red and i don't like it
Following is my date picking Jquery
$(document).ready(function() {
$('#datepicker-start').Zebra_DatePicker({
onSelect: function () {
$zdp = $('#datepicker-start').data('Zebra_DatePicker');
$('#start').val(zdp);
},
direction: true,
});
});
What I am trying to do is copy entered date into $zdp and set it to the value of input tag whose id is start.
I am new to javascript and jquery kindly guide what I am doing wrong casue this code is not running
I think, you need to use the onSelect handler like
$(document).ready(function () {
$('#datepicker-start').Zebra_DatePicker({
onSelect: function (str1, str2, date, $el) {
$('#start').val(str1);
},
direction: true,
});
});

OnSelect datepicker doesn't work

i've got a probleme with my date picker. I need to custom this datepicker but when i try to custom them it doesn't work.
Example:
I have this html code:
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" data-target="#job-date_start" name="date_start" title="" id="datestart" class="xlarge required" readonly>
<input type="hidden" id="job-date_start" value="" name="job[date_start]" />
</div>
And on javascript i try that:
$('#datestart').datepicker( {
onSelect: function(date) {
alert(date);
},
});
And my problem is, when i click on a date in my datepicker the console.log(test) don't appear.
Thanks you
Inlcude jquery and jquery ui libraries and then on document ready add your code http://jsfiddle.net/m443no17/
$(document).ready(function () {
$('#datestart').datepicker({
onSelect: function (date) {
alert(date);
},
});
});
Ofcourse , it will work the way you wrote . But , is not needed if you are having only one helper.
$('#datestart').datepicker( {
onSelect: function(date) {
alert(date);
}
});
Hope you have imported all the libraries required for datepicker and ofcourse jQuery proper version.
FYI :- Your DOM should be ready before you are executing this script

Categories