I used this datepicker and it works fine, but I can't find how to display the contents of this datepicker in a <div> without the pop.
My code:
<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
<input class="form-control" type="text" readonly />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<script type="text/javascript">
jQuery(function () {
jQuery("#datepicker").datepicker({
startDate: new Date(),
minDate: 0,
language: "fr",
autoOpen: true,
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
});
</script>
EDIT:
I can't get the value date from the input
<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy"></div>
<input type="hidden" id="my_hidden_input" class="form-control">
<script type="text/javascript">
jQuery('#datepicker').datepicker();
jQuery('#datepicker').on('changeDate', function() {
jQuery('#my_hidden_input').val( jQuery('#datepicker').datepicker('getFormattedDate'));
});
jQuery(document).ready(function () {
jQuery("#datepicker").datepicker({
startDate: new Date(),
language: "fr",
autoOpen: true,
autoclose: true,
todayHighlight: true
//datesDisabled: ['22/02/2017', '28/02/2017']
}).datepicker('update', new Date());;
});
jQuery("input[type=hidden]").bind('change', function() {
alert(jQuery(this).val());
});
</script>
As the docs say:
Instantiating the datepicker on a simple div will give an embedded picker that is always visible.
Here a working sample:
jQuery(function () {
jQuery("#datepicker").datepicker({
startDate: new Date(),
minDate: 0,
language: "fr",
autoOpen:true,
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
jQuery('#datepicker').on('changeDate', function(e) {
jQuery('#my_hidden_input').val(e.date);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.fr.min.js"></script>
<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
</div>
<input type="hidden" id="my_hidden_input" class="form-control">
EDIT:
You are adding the the changeDate listner in the wrong place, put it after datepicker initialization. Moreover changeDate event has the date property that contains Date object representing the selected date.
Related
I recently started learning polymer and am trying to use iron-ajax iron-list and templates together. For some reason the values are showing blank on screen, but cards are getting created. Taking example from this question, I created two polymer-elements search-list and search card. Search card for showing data and search list for fetching data and populating a list with card. Search list is following:
<link rel="import" href="../search-card/search-card.html">
<dom-module id="search-list">
<template>
<div>
<iron-ajax id="ajax" auto url="/data.json" handle-as="json" last-response="{{data}}"></iron-ajax>
<iron-list items="[[data]]" as="item">
<div class="flex">
<template is="dom-repeat" items="{{data}}">
<search-card></search-card>
<span>Hi</span>
<span>[[item.profile]]</span>
</template>
</div>
</iron-list>
</div>
</template>
<script>
(function () {
Polymer({
is: 'search-list',
properties: {
items: {
type: Array,
notify: true,
}
},
ready: function() {
this.items = [];
}
});
})();
</script>
</dom-module>
Search-card is the follwing:
<dom-module id="search-card">
<style>
</style>
<template>
<paper-material style="margin:15px;">
<a href="[[item.profile]]">
<img width="100" height="100" src="[[item.pic]]">
</a>
<div class="">
<div>Name: <span>[[item.name]]</span></div>
<div>Location: <span>[[item.location]]</span></div>
<div>Email: <span>[[item.email]]</span></div>
</div>
</paper-material>
</template>
<script>
(function () {
Polymer({
is: 'search-card',
properties: {
item: {
type: Object,
notify: true,
}
},
ready: function() {
this.item = {}
}
});
})();
</script>
</dom-module>
All the span fields consisting of item data are showing blank. What am I doing wrong ? How to fix it ?
For a start, you have to put the contents of the iron-list element within a template.
<iron-list items="[[data]]" as="item">
<template>
<div class="flex">
<template is="dom-repeat" items="{{data}}">
<search-card></search-card>
<span>Hi</span>
<span>[[item.profile]]</span>
</template>
</div>
</template>
</iron-list>
Hi in my apps I have a form with checkbox group, and I can't retrived selected at submit.
Here is some code
The form content from declare.handlebars:
<form class="declare">
<div class="hidden-fields" style="display:none">
{{view Ember.TextField valueBinding="declaration_type" class="form-control half" type="text"}}
</div>
<fieldset>
...
</fieldset>
<fieldset>
<div class="form-group">
<label>Type de support</label>
<p>
{{render 'publication/declaration_support_types' Sampick.supportTypes}}
</p>
</div>
...
</fieldset>
<div class="actions-bottom">
<button {{action "sendDeclaration" content}} class="button button-select"><i class="icon-download"></i> Confirm</button>
</div>
</form>
The handlebars code for the render of publication/declaration_support_types:
{#each }}
<label class="checkbox-inline">
{{input type="checkbox" name="publication_declaration_support_type" checked=isChecked}} {{ description }}
</label>
{{/each}}
Then I have the following controller for the render 'publication/declaration_support_types':
Sampick.PublicationDeclarationSupportTypesController = Ember.ArrayController.extend({
sortProperties: ['description'],
sortAscending: false,
itemController: 'publicationDeclarationSupportType',
selected: Ember.computed.filterBy('[]', 'isChecked', true),
selectedItems: Ember.computed.mapBy('selected', 'description')
});
Sampick.PublicationDeclarationSupportTypeController = Ember.ObjectController.extend({
isChecked: false,
toggle: function() {
this.toggleProperty('isChecked');
}
});
and finaly the route for the previous html
Sampick.PublicationDeclareRoute = Ember.Route.extend({
actions: {
sendDeclaration: function(content) {
var self = this;
if (content.get("prints") == 1) {
self.validateRecipient(content);
} else {
self.submitDeclaration(content);
}
}
}
});
My issue is that in my sendDeclaration action I can't get the selected checkbox from declarationSupportTypes using the selectedItems propertie define in the controller.
Thanks for your helps
Working fiddle: http://emberjs.jsbin.com/legozucega/1/
There was a typo in IndexRoute, action=>actions.
I am using Knockout JS in my project. I want to include a template after all the bindings are applied.
Example:
<script type="text/javascript" src="ko.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<h2>Participants</h2>
<button onClick="addOnRuntime()">Insert</button>
<div id="ab">Click Me</div>
Here are the participants:
<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'person-template', data: seller }"></div>
<div data-bind="template: { name: 'person-template', data: killer }"></div>
<script type="text/html" id="person-template">
<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>
</script>
<script type="text/javascript">
function MyViewModel() {
this.buyer = { name: 'Franklin', credits: 250 };
this.seller = { name: 'Mario', credits: 5800 };
this.killer = { name: 'Dj', credits: 10000 };
}
ko.applyBindings(new MyViewModel());
function addOnRuntime()
{
$.ajax({
dataType:'script',
url:'/ab.html',
error:function(jsc){
var temp=document.getElementById("person-template");
temp.innerHTML=jsc.responseText;
ko.cleanNode(temp);
ko.applyBindings(MyViewModel(),temp);
},
success:function(res){
}
});
}
</script>
I want to inject an html within the above block. But when I inject html within it there is no change taking place. I googled a lot and saw that we need to first unbind knockout by using ko.cleanNode(viewModel) and then again apply bindings using ko.applyBindings(viewmodel), but still no change.
This is the html that is getting injected
<h1 data-bind="text: name"></h1>
<p>Credits: <span data-bind="text: credits"></span></p>
This is how it looks after injection of code
<script id="person-template" type="text/html">
<h1 data-bind="text: name"></h1>
<p>Credits: <span data-bind="text: credits"></span></p>
</script>
Try using ko.applyBindingsToDescendants or ko.applyBindingsToNode to newly added html. http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html
I want button to call removeAlbum function in controller. But it does nothing. When i click the button nothing happens and there are no errors... What should i do to fix that?!
This is my template:
<script type="text/x-handlebars" data-template-name="albums">
{{#if App.albumsController.total}}
<div><h1>Количество альбомов: {{App.albumsController.total}}</h1></div>
{{#each content in App.albumsController}}
<div class='album'>
<div class='image'>
<a {{action showAlbum content href=true}}>
<img {{bindAttr src="content.avatarUrl"}}>
</a>
</div>
<div class='info'>
<h2>
<a {{action showAlbum content href=true}}>
{{content.title}}
</a>
</h2>
<div>{{content.description}}</div>
</div>
<div class='actions'>
<div>
<button {{action removeAlbum content target="App.albumsController"}}>Delete</button>
</div>
</div>
<div class='clear'></div>
</div>
{{/each}}
{{else}}
<div><h1>Loading</h1></div>
{{/if}}
</script>
This is my controller:
App.albumsController = Em.ArrayController.create({
content: [],
total: null,
loadAlbums: function(){
this.set('content', []);
this.set('total', null);
var self = this;
$.post(App.connection.url, {method: 'albums.getAll', params: {user_id: App.connection.userId}}, function(response){
self.set('total', response.albums.total);
response.albums.album.forEach(function(item){
var buf = App.AlbumInList.create({
id: item.id,
title: item.title,
description: item.description,
avatarUrl: item.thumbnail_video.thumbnails.thumbnail[1]._content
});
self.pushObject(buf);
});
});
},
removeAlbum: function(x){
console.log('remove it');
}
});
Try to set your target to controller instead of App.albumsController. Should solve the problem.
<button {{action removeAlbum content target="controller"}}>Delete</button>
The application is written using ASP.NET MVC 3 in vs2010.
I have a knockout template that updates some css and visible bindings using a
dependantObservable.
The issue ONLY occurs when I bind the
value of the select element to the
IntervalID. If this is not bound the
UI is updated as expected.
I have ripped the code out from my main app and created a sample page that does the same binding using standard markup and also templates.
The dependantObservable is called HasChanged.
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-1.2.0.js" type="text/javascript"></script>
<div data-bind="template: { name: 'intervalTemplate', for:viewModel }">
</div>
<h2>
Not Template</h2>
<div data-bind="style: { color: HasChanged() ? 'red' : 'black' }">
IntervalID: <span data-bind="text: IntervalID"></span>
<br />
Start:
<input type="text" data-bind="value: Start">
<br />
End:
<input type="text" data-bind="value: End">
<br />
Interval Type:
<select data-bind="value: IntervalTypeID">
<option value="1">Shift</option>
<option value="2">Break (Paid)</option>
<option value="3">Break (Unpaid)</option>
</select><br />
HasChanged: <span data-bind="text: HasChanged"></span>
</div>
<script id="intervalTemplate" type="text/html">
<div data-bind="style: { color: HasChanged() ? 'red' : 'black' }">
<h2>Template</h2>
IntervalID: <span data-bind="text: IntervalID"></span>
<br />
Start:
<input type="text" data-bind="value: Start">
<br />
End:
<input type="text" data-bind="value: End">
<br />
Interval Type:
<select data-bind="value: IntervalTypeID">
<option value="1">Shift</option>
<option value="2">Break (Paid)</option>
<option value="3">Break (Unpaid)</option>
</select><br />
HasChanged: <span data-bind="text: HasChanged"></span>
</div>
</script>
<script type="text/javascript">
function IntervalModel(data) {
var _this = this;
_this.IntervalID = ko.observable(data.IntervalID);
_this.Start = ko.observable(data.Start);
_this.End = ko.observable(data.End);
_this.IntervalTypeID = ko.observable(data.IntervalTypeID);
_this.OriginalStart = ko.observable(data.Start);
_this.OriginalEnd = ko.observable(data.End);
_this.OriginalIntervalTypeID = ko.observable(data.IntervalTypeID);
_this.HasChanged = ko.dependentObservable(function () {
return !(_this.OriginalStart() == _this.Start() &
_this.OriginalEnd() == _this.End() &
_this.OriginalIntervalTypeID() == _this.IntervalTypeID());
});
}
var viewModel;
$(function () {
var viewModel = {};
viewModel = new IntervalModel({ IntervalID: 1, Start: "09:00", End: "10:00", IntervalTypeID: 2 });
ko.applyBindings(viewModel);
});
</script>
Any help would be much appreciated... I need to use templates as i have lots of these intervals that need to be displayed.
Thanks!
There is an issue logged on github for this one here: https://github.com/SteveSanderson/knockout/issues/133
The issue centers around using numbers for the value of a select option. When a select element uses the value binding, it is updated with the actual value of the element, which is always a string. So, if your observable is 2, it gets set to "2" when the binding is set up. This change seems to cause an issue with any bindings that use that observable that were set up in the template prior to the select element.
So, until this is potentially fixed, you can make it work by passing IntervalTypeID as a string ("2"). An easy way to convert a number to string is to do yourvalue + ''.
Here it is working:
http://jsfiddle.net/rniemeyer/uDSFa/