Knockout binding to a date picker

Question

I'm trying to pass the selected date from a Bootstrap date picker to Javascript code. Plus by default, the date picker should select today's date.

Currently, when clicking the search button, the current date is shown in the alert. However, I'm having trouble actually binding it to the date picker. What am I missing/doing wrong?

Date picker code:

<form class="form form-horizontal" style="background-color:white"> <div class="form-group"> <div class="col-lg-2"> <div class="input-group addon"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input id="searchDate" readonly style="cursor: pointer;" data-bind="datePicker: SearchDate" class="form-control pad-bottom-when-small" type="text" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-autoclose="true"/> </div> </div> <div class="col-lg-3"> <button class="btn btn-success" onclick="search()">Search</button> </div> </div> </form>

My attempt to data bind:

<script> ko.applyBindings({ SearchDate: ko.observable(moment().toDate()), }); </script> <script type="text/javascript"> self.SearchDate = ko.observable(moment().toDate()); function search() { alert(self.SearchDate()); } </script>

we can't answer unless you give more info, like what datepicker library you are using, show us the custom bindinghandler where you call said datepicker, maybe create a code snippet or jsfiddle to show us an entire example, it's a lot easier to pick up from what you have than trying to find this all out ourselves — Sam
– Sam, Commented Oct 29, 2019 at 15:55
@Sam Sorry, updated the OP to mention its a Bootstrap datepicker. What do you mean by the bindinghandler? I've included the ko.applyBindings that I've got so far. — Bhav
– Bhav, Commented Oct 29, 2019 at 16:09
This code data-bind="datePicker: SearchDate" implies that there exists a binding handler in your project called datePicker, and you're feeding it the observable from your VM. We'd want to see it. — Brother Woodrow
– Brother Woodrow, Commented Oct 29, 2019 at 19:21

Sam · Accepted Answer · 2019-10-30 07:51:29Z

It seems that you require some reading up on the knockout-side, specifically on the custom binding handler section, it is -a- way of hooking up non-knockout code with your knockout viewmodel in a clean manner. This also creates a reusable piece of code should you need the calendar picker in another part of your application. I've created a very basic concept of what you will require, as an exercise I'll let you sort out the error-handling when entering false dates, or maybe try to come up with an idea where you could implement the addition of having an empty/null input box.

ko.bindingHandlers.datePicker = { init: function(element, valueAccessor, allBindingsAccessor) { var options = { format: 'dd-mm-yyyy', weekStart: 1, autoclose: true }; $(element).datepicker(options); $(element).datepicker().on('changeDate', function(e) { valueAccessor()(e.date); }); }, update: function(element, valueAccessor, allBindingsAccessor) { var date = ko.unwrap(valueAccessor()); $(element).datepicker('setDate', date); } }; ko.applyBindings(() => { var self = this; self.foo = ko.observable(new Date()); self.bar = ko.computed(() => { var date = self.foo(); return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear(); }); });

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <input type="text" data-bind="datePicker: foo" /> <div data-bind="text: bar"></div>

Collectives™ on Stack Overflow

Knockout binding to a date picker

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related