bootstrap-datepicker

I'm trying to create an AngularJS application using bootstrap-datepicker . Here is my HTML: <div id="test" class="input-append date"> <input type="text" ng-model="datepicker.date" class="span4"> <span class="add-on"><i class="icon-th"></i></span> </div> {{ datepicker.date }} The last line is for debugging purposes. When this page is in action, the datepicker works fine and writes any date I pick into the input box. The issue is, as I click on a date, the {{ datepicker.date }} part does not show anything until I manually type something into the input box. I would like it to actively show any

I'm using the datepicker from Bootstrap ( http://bootstrap-datepicker.readthedocs.org/en/latest/i18n.html ). When using datepicker without the "language" property, it works, but when I try to specify a language ("sv"), it fails with the message (i.e when trying to select a date in the widget): Uncaught TypeError: Cannot read property 'length' of undefined These are the versions I'm using: jQuery v1.8.3 jQuery UI 1.8.22 Boostrap 2.3.1 From looking at the debugger it seems that this is the code that crashes (Datetimepicker.prototype, the row with "p: "): formatDate: function (date, format,

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 can manageable through autoclose: false property but, if i click out side of date picker it's getting close. It should be there always in open mode. I hope there is any property which can make it possible, Please find following function which i am using. HTML <input type="text" id="select_date" class="selecteShipDate" /> Script

This datepicker it is already created with other default options, but I need to update it with the following new options and it does not seem to work: // new options var new_options = { format: 'dd/mm/yyyy', autoclose: true, language: 'es' } // update values $("#fecha_periodo").datepicker("update", new_options ); I would also like to update other options like daysOfWeekDisabled , viewMode and so on. Unfortunately, there is no API to change options dinamically, all availables methods are listed here (you can use setDaysOfWeekDisabled to set dinamically days of week disabled). You can use

I am trying to change the color of selected date in bootstrap datepicker and tried changing the background color of datepicker container but there seems to be no options available to change and customize. Please let me know if anything available to customize the calendar design. $('#date_of_completion').datepicker({ format: 'dd/mm/yyyy', autoclose: true }); You have 2 possibilities to do this 1) Compile your own style based on the projects less files and override the background color in less: This is the class you should override &.active, &.active.highlighted { .button-variant(@btn-primary

The eternicode twitter bootstrap datepicker pops up as soon as the <input> field it is attached to gets focus , as you can see by tabbing onto the datepicker field on the official demo page . Instead, I want it to only open on click . Ideally the datepicker would just pop up on click of the calendar icon. How can I prevent it from popping up on focus? In the current version of the library, there's no official support for what you want to do. The docs list all the kinds of markup you can instantiate a datepicker on and what the resulting behaviours are. It's very clear that when instantiating a

I'm using angularjs bootstrap datepicker directive and when I set a date from model it picks a day before the selected date. <button type="button" class="btn btn-sm btn-default" ng-click="dt = '2014-09-24'">2014-09-24</button> Here is a plunk with the issue. Is there any solution? Antiga This is due to the way JS handles dates natively. AngularUI team mentions this in the docs. Here's one solution: Angular-UI One day is subtracted from date in ui-date For anyone needing a solution in the .NET Web Api world, this line worked well for me: GlobalConfiguration.Configuration.Formatters

I created a small program to select the date using bootstrap-datepicker and write it to MySQL. The catch is that this date must be local to Europe/Berlin regardless where the user is at the moment. $(....).datepicker({ startDate: 'today' }); My question is: how do I set startDate to be local to specific timezone without using server side code (PHP) or any other libraries ? I tried using moment + moment-timezone but it's also showing the local browser date. var todaysDate = moment().tz('Europe/Berlin').format(); $(...).datepicker({ startDate: todaysDate }); Thanks. Just needed moment.tz

I am trying to use bootstrap-datepicker with Vue.js Trying to create a simple datepicker component. The problem is, when I write into input, component's data is updated. But when I use datepicker gui, it doesn't work. Data is not updated. Why? What is missing exactly? Here is my code: Vue.component('picker', { 'props': { 'date': { 'twoWay': true } }, 'template': '\ <div class="form-group">\ <div class="input-group date datepicker">\ <input type="text" class="form-control" v-bind:value="this.date">\ <span class="input-group-addon">\ <span class="glyphicon glyphicon-calendar"></span>\ </span>\ <

Having trouble disabling the DatePickerhere . Im able to disable the input field but the calender glyphicon will still open the picker when pressed. I've tried setting the disabled and readonly property of the picker but that only applies to the input field. I can't disable to glyphicon to disable the control completely. QUESTION: How do i disable the control completely ? Here's what i've tried so far: <div class="input-group input-append date" id="dateRangePicker"> <input type="text" class="form-control" name="date" id="kalib_dato" disabled readonly /> <span class="input-group-addon add-on">