将一个默认日期添加到knockout js datepicker

时间:2017-04-06 06:33:46

标签: jquery knockout.js datepicker

使用knockout js datepicker。需要将今天的日期设置为此日期的默认值,并将今年1月1日设置为第二个日期,现在与第一个日期相同。

这是我的js部分

 public JSONObject getjsondataofcart(){
    JSONObject modelList = new JSONObject();
    JSONArray myara   = new JSONArray();
    String query = "select * from "+ cart_table;
    SQLiteDatabase db = this.getWritableDatabase();
    Cursor cursor = db.rawQuery(query,null);
    JSONObject data = new JSONObject();
    try {

      if (cursor.moveToFirst()) {
        do {

          data.put("id", cursor.getInt(1));
          data.put("qty", cursor.getInt(2));
          data.put("amount", cursor.getInt(7));
          data.put("tax_id","0");
          data.put("sub_total", cursor.getInt(6));
          myara.put(data);
        } while (cursor.moveToNext());

        modelList.put("product_detail",myara);
      }
    }
    catch (JSONException e)
    {
    }

    return modelList;
  }

};

这是html部分:

ko.bindingHandlers.datepickerCtrl = {
init: function (element, setup, allBindingsAccessor, viewModel, bindingContext ) {
    var widget = $(element);
    var vl = setup();
    var valueName = vl.valueName;
    var id = vl.id == null ? valueName : vl.id;
    var enableExpr = vl.enableExpr;
    var innerHtml = '<div id="' + id + '" class="input-group date" data-provide="datepicker" style="max-width:110px!important" ' +
                'data-bind="' + (enableExpr != null ? 'enable: ' + enableExpr + ',' : '') + 'validationOptions: { insertMessages: false}">' +
                    '<input type="text" class="form-control" data-bind="' + (enableExpr != null ? 'enable: ' + enableExpr + ',' : '') + 'value: ' + valueName + '">' +
                    '<span class="input-group-addon" style="padding-bottom: 1px!important;padding-top: 1px!important;padding-right: 3px!important;padding-left: 3px!important;"><i class="glyphicon glyphicon-calendar"></i></span></div>' +
                    '<p class="validationMessage" data-bind="validationMessage: ' + valueName + '"></p>';
    widget.html(innerHtml);
    ko.utils.registerEventHandler(widget.find("span"), "click", function (event) {
        widget.find("input").focus();
    });
},

1 个答案:

答案 0 :(得分:0)

请查看此Link

&#13;
&#13;
ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        //initialize datepicker with some optional options
        var options = {
            format: 'DD/MM/YYYY HH:mm',
            defaultDate: valueAccessor()()
        };

        if (allBindingsAccessor() !== undefined) {
            if (allBindingsAccessor().datepickerOptions !== undefined) {
                options.format = allBindingsAccessor().datepickerOptions.format !== undefined ? allBindingsAccessor().datepickerOptions.format : options.format;
            }
        }

        $(element).datetimepicker(options);

        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "dp.change", function (event) {
            var value = valueAccessor();
            if (ko.isObservable(value)) {
                value(event.date);
            }
        });

        var defaultVal = $(element).val();
        var value = valueAccessor();
        value(moment(defaultVal, options.format));
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var thisFormat = 'DD/MM/YYYY HH:mm';

        if (allBindingsAccessor() !== undefined) {
            if (allBindingsAccessor().datepickerOptions !== undefined) {
                thisFormat = allBindingsAccessor().datepickerOptions.format !== undefined ? allBindingsAccessor().datepickerOptions.format : thisFormat;
            }
        }

        var value = valueAccessor();
        var unwrapped = ko.utils.unwrapObservable(value());

        if (unwrapped === undefined || unwrapped === null) {
            element.value = new moment(new Date());
            console.log("undefined");
        } else {
            element.value = unwrapped.format(thisFormat);
        }
    }
};


var viewModel = {};

function QuoteViewModel(data) {
    var self = this;
    self.QuoteDateTime = ko.observable(data.QuoteDateTime);

    self.print = function () {
        console.log(self.QuoteDateTime())
    }

};

var defaultModel = {
    QuoteDateTime: "/Date(1427368178400)/"
}

viewModel = new QuoteViewModel(defaultModel);
ko.applyBindings(viewModel);
&#13;
&#13;
&#13;