FAQ Database Discussion Community


Bootstrap DatePicker CSS Styling not Working

jquery,css,twitter-bootstrap,datepicker,bootstrap-datepicker
I am trying to use the datepicker from the datepicker site, but the CSS is not working as it should. Here is my output and what I want it to look like: Here's a jsFiddle here and the relevant code: <div class="input-daterange"> <input type="text" class="input" value="2012-04-05" /> <span class="add-on">to</span> <input...

Angular Ui bootsrap datepicker not working

angularjs,bootstrap-datepicker,angular-bootstrap
i've a card view of a doctor with button "book appointment" button which pops up a datepicker. i've been trying to apply angular ui bootstrap datepicker but its not working. however I was able to apply <datepicker min="minDate" show-weeks="false"></datepicker> I have checked other questions in stackoverflow about the same issue...

Bootstrap Datepicker, maxdate, 2 days from the first date selection

javascript,jquery,twitter-bootstrap,bootstrap-datepicker
Lets say for example that I make the first selection within Check-In on May 10th, it automatically goes to the Check-Out section with May 10th selected as well and rest of the days afterwards available. What I'm trying to do is make it so that the day selected and the...

Require Bootstrap date picker always in open mode

twitter-bootstrap,bootstrap-datepicker
How can i get Require Bootstrap date picker always in open mode? I am using bootstrap date picker in one of my application. Requirement is like date picker should be open when page load and it should be always in open mode after selection as well. I found that it...

click trigger on bootstrap datepicker jQuery addClass not work

javascript,jquery,twitter-bootstrap,bootstrap-datepicker
I'm using bootstrap DatePciker , and I want to add a Click event on days (td), When I click on any day, add class to that day (td). but it does not work. $('#calendar').datepicker({ multidate: true, todayHighlight: true, todayBtn: true }); $('tbody').on('click','td.day',function(e){ e.preventDefault(); $(this).addClass('clicked'); }); working example on JSFiddle...

Make a Span open and close an In-Line Bootstrap Date Picker Calendar

javascript,jquery,twitter-bootstrap,bootstrap-datepicker
Explanation: I am building a plugin for an application that uses thisa Bootstrap Datepicker plugin here http://www.eyecon.ro/bootstrap-datepicker/ So I am trying to utilize the same plugin for a Date Picker in my plugin for the app that already uses that Date Picker library. My app is a Project Management app...

Bootstrap datepicker not woking in modal

twitter-bootstrap-3,bootstrap-modal,bootstrap-datepicker
When I use a datepicker inside a modal the datepicker is not working. I use the event show.bs.modal to modify some content of the modal on show: $(function(){ $('#statusModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget); var title = button.data('title'); var input_date = button.data('date'); var modal = $(this); modal.find('.modal-title').text('Clicked: '...

Meteor bootstrap datetimepicker throwing errors and positioned incorrectly

meteor,bootstrap-datepicker,meteor-autoform
I'm getting the following errors and positioning in the screen shot below when I use the autoform bootstrap datepicker. Error: 2meteor.js:887 Exception from Tracker afterFlush function: undefined is not a function TypeError: undefined is not a function at null. (http://localhost:3000/packages/aldeed_autoform-bs-datetimepicker.js?279246d1cf7d4b5603ac030d7466e9bc6e5ac0d1:171:11) Here is the code I have: Packages: aldeed:autoform # Auto...

validating dates start and end

jquery,bootstrap-datepicker
I am trying to validate my Departure and Return dates. At the moment you can select any dates starting from today onwards. what I need is the dates shown in the return date to disable any dates from showing or being selected before the start date. my html <input class="fromDate"...

Change the month in the second date picker based on the first in angular date picker

javascript,angularjs,date,datepicker,bootstrap-datepicker
How can I change the month of my second datepicker dynamically to display as the selected month based on the first date picker selection?But it is showing the current date. Example: I selected 15-10-2104 from the first time picker.Hence the second date picker should open with the date starting from...

Check if Bootstrap Datepicker script has loaded

javascript,jquery,html,twitter-bootstrap,bootstrap-datepicker
I am receiving the error: Uncaught TypeError: undefined is not a function When I try to set up the datepicker: $('.datepicker').datepicker(); How can I determine if the datepicker has loaded or not? To be clear, I'm not using jQuery UI...

Datepicker in Angular ui modal not opening

angularjs,angular-ui-bootstrap,bootstrap-modal,bootstrap-datepicker
I have a datepicker within a form in my modal. The datepicker is not opening no matter what I try. My code is : //In my parent controller - Called on button click $scope.openModal = function(indx){ var modalInstance = $modal.open({ animation:true, templateUrl:'myModal.html', controller: 'MyModalController' }); }; //In MyModalController $scope.open =...

How to use date picker with form_for in rails?

ruby-on-rails,bootstrap-datepicker
I'm new to rails,Any clues ? and it would be better if you can suggest me what to read as well. Im adding a date picker plugin into an existing rails4 app. i found this plugin on Github. i followed the instruction and configured everything in my app. Visiting http://localhost:3000/bookings/new...

How close Bootstrap datepicker when it is in viewMode: year?

bootstrap-datepicker
I need to close datepicker when user finally select full date. This mean that user first select year, then month and after that date, but after last action datepicker remain open. How can I make this close on last user action? I'm not sure is any code needed here.

How to get the value of the selected date from bootstrap datepicker?

javascript,jquery,angularjs,bootstrap-datepicker
I am using bootstrap datepicker to choose the date. This is my html code <div> <input type="text" name="From" class="form-control" datepicker-popup="yyyy-MM-dd" ng-click="open($event)" ng-model="Filters.Date" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="X" /> </div> I have written a function to display previous day date by default. But I am not able to get the selected date....

Why are Angular date pickers so slow?

javascript,angularjs,datepicker,bootstrap-datepicker
Why do Angular JS date pickers use so much CPU? When you have a few of them on a page they significantly slow a site down. Is there any way to mitigate this? For example, the official Angular for Bootstrap directive: And the mobinni/material-date-picker: ...

Select week date range and month using Bootstrap Datepicker

javascript,jquery,twitter-bootstrap-3,bootstrap-datepicker
How to select a range of week date and month using Bootstrap Datepicker? I am currently using jQuery UI datepicker to select months and weeks. ...

Bootstrap datepicker change minDate/startDate from another datepicker

javascript,jquery,twitter-bootstrap,bootstrap-datepicker
There are two datepickers in my page and both are of bootstrap. The condition is only that Start date never High with respect to End Date. Means End date Attribute (minDate) must be changed when Start Date changed by datepicker and same when End Date Changed, the minrange of calendar...

How to use eternicode bootstrap datepicker

twitter-bootstrap,bootstrap-datepicker
I have been unable to get even the basic calendar pop-up to occur. Here are the scripts I have, and the code: Note: I am using jquery 1.10.2 and it is included first. bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/bootstrap-datepicker.js", "~/Scripts/respond.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/bootstrap-datepicker3.css", "~/Content/site.css", "~/Content/override.css")); <div class="input-group date">...

Date incrementing issue in bootstrap date picker

javascript,angularjs,date,datepicker,bootstrap-datepicker
I'm using bootstrap datepicker where the date when selected ,the ng-model $scope.taskInfo.startDate contains the selected date as Mon Jun 01 2015 00:00:00 GMT+0530 (India Standard Time) ie., $scope.taskInfo.startDate = Mon Jun 01 2015 00:00:00 GMT+0530 (India Standard Time) But when I perform date manipulation on my model,the date seems to...

minDate not being set in date picker

knockout.js,bootstrap-datepicker
This is how I am using date picker in my view: <input type="text" class="form-control datepicker" name="ChartStartDate1" id="dailySummaryDt" data-bind="datePicker: targetDate, minDate: viewModel.datePickerMinDate()" /> <span id="temp" data-bind="text:viewModel.datePickerMinDate()"></span> The last line with span works perfectly. I created that span just to check if my model has correct value or not. But the date...

Rails bootstrap Datepicker not working

ruby-on-rails,datepicker,bootstrap-datepicker
I am trying to implement datepicker to a rails app , so i have been able to run it in reference with these two links : http://jakoblaegdsmand.com/blog/2012/05/rails-datetime-picker/ https://github.com/Nerian/bootstrap-datepicker-rails For some reason it runs just fine when i run it with a scaffold but when i try to run it by...

Bootstrap datepicker return focus after select

javascript,jquery,twitter-bootstrap,datepicker,bootstrap-datepicker
If you initialize a bootstrap datepicker from eternicode with autoclose: true, two undesirable behaviors happen: After the picker closes, when you tab into the next field, you'll start at the beginning of the document again. This can be quite cumbersome on long forms. Because the picker changes the value programatically,...

Can't position Bootstrap date picker in the right position

twitter-bootstrap,datepicker,bootstrap-datepicker
I have the following HTML where I want to position the datepicker between the Quantity select and the Submit button. It only shows up in the page after the button. <div class="container"> <form class="form-inline" role="form"> <!-- *** This should show-up first *** --> <div class="form-group col-sm-2"> <label label-default="label-default" for="Qty">Qty</label> <span...