Twitter bootstrap datepicker issue in conditional knockout statement

Question

I have application where i need to display datepicker in conditional statement. I am using hot towel with durandal and knockout. Conditional statement parent is bound with knockout as shown below.

<section data-bind="foreach: resourceProperty">


    <span data-bind="text: associatedStandardResourceProperty().name " style="width:150px;float:left;"></span>

    <!-- ko if: associatedStandardResourceProperty().isDateTime   -->
                <div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                    <input class="span2" size="16" type="text" value="12-02-2012" class="datepicker">
                    <span class="add-on"><i class="icon-th"></i></span>
                </div>

    <!-- /ko -->

Also , i have initiated binding in my view model in viewAttached event as shown below.

function viewAttached(view) {
    $(view).find('#dummyDiv').datepicker();
    $(view).find('#dp3').datepicker();


    return true;
}

Here dummyDiv is temporary div which i am using for checking if datepicker is working proeprly without knockout statement and it is outside ko foreach . I have checked and there i am able to get binding properly for dummy datepicker outside of foreach.

I would like to know how to implement/enable date picker when we use it inside knockout for each with if condition as shown above.

Thanks.

My question is : Can i use datepicker inside foreach each loop with conditional visiable statement as shown above ? As it is not working , i would like to know if any one have any workaround or possible alternavtives — parth1729, Jun 13 '13 at 14:38
This is a duplicate question, yes you can do this, yes you can do it dynamically, please use the search feature http://stackoverflow.com/questions/11121960/bootstrap-datepicker-with-knockout-js-databind — PW Kad, Jun 13 '13 at 15:52
@kadumel I have checked the link before posting question on stackoverflow. It gives custom knockout binding but not solving problem i have which is due to knockout foreach and if condition before my datepicker div. I have already set custom ko binding for datepicker. Please let me know if you have understood the question or you need more information. — parth1729, Jun 14 '13 at 10:21

score 1 · Answer 1 · answered Jun 14 '13 at 13:27

Why not just add a class to your div like so:

<div class="input-append date" class="custom-dp" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                    <input class="span2" size="16" type="text" value="12-02-2012" class="datepicker">
                    <span class="add-on"><i class="icon-th"></i></span>
</div>

Then in your viewAttached function just call:

$('.custom-dp').datepicker();

score 1 · Answer 2 · answered Jul 18 '13 at 21:53

i have this in my form

<tbody data-bind='foreach: viewModel.contents'>
                <tr>
                    <td>
                        <input type="text" class='span2 datepicker' data-bind='value: parseJsonDateString(scec_dt_sop)' />
                    </td>
                    <td>
                        <input type="text" class='number span2' data-bind='value: scec_life_time, uniqueName: true' />
                    </td>
                </tr>
            </tbody>

I have this in my javascript

 var parseJsonDateString = function (date_string) {
            if (date_string) {
                var value = new Date(parseInt(date_string.replace(/(^.*\()|([+-].*$)/g, '')));
                var date =  value.getDate() + "-" + (value.getMonth() +1) +"-" + value.getFullYear();
                return date;  
            }
            return "";
        };

        var initialData = @if (Model != null && Model.ScenarioContentGrid != null)
                          {
                              @Html.Raw(new JavaScriptSerializer().Serialize(Model.ScenarioContentGrid))
                          };

        var viewModel = {
            contents: ko.observableArray(initialData),
            showCalendar: function() {
                $('.datepicker').datepicker({
                    autoclose: true,
                    format: 'dd-mm-yyyy'}); 
            },


        };

        $(document).ready(function() {
            $(function () {
                $('.datepicker').datepicker({
                    autoclose: true,
                    format: 'dd-mm-yyyy'});
            });

            ko.applyBindings(viewModel);

          });

I created a function showCalendar() in order to provide the feasibility to show the popup calendar after the page has loaded, then i can call it in the event of some controls, for example, a button click i create another datepicker and i call this function to show the popup calendar.

NB: Don't forget to include bootstrap-datepicker components (javascript and css)

Twitter bootstrap datepicker issue in conditional knockout statement

2 Answers2