I have a controller like this,
App.NewController = Ember.Controller.extend({
// the initial value of the `search` property
model: this.get('model'),
start_date:new Date(),
end_date: new Date()
});
My View template looks like this,
<div class="control-group">
<label class="control-label" for="inputPassword">Event Start Date</label>
<div class="controls">
{{view App.DatePickerField valueBinding='controller.start_date'}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Event End Date</label>
<div class="controls">
{{view App.DatePickerField valueBinding='controller.end_date'}}
</div>
</div>
finally i have my datepicker view like this:
App.DatePickerField = Ember.View.extend({
templateName: "Datepicker",
didInsertElement: function () {
var OnChangeDate, self;
self = this;
OnChangeDate = function (evt) {
return self.set('value', evt.date.toString());
};
return $('.date').datetimepicker({
language: 'en',
}).on('changeDate', OnChangeDate);
}
});
the problem now is that if i select my start date, controller.start_date updates at the same time, just as i want. But when i select the end date, both start_date and end_date gets updated,now the start_date has the same value of end_date. It's like the ValueBinding keeps both in sync. I'm fairly new to Ember. Could someone please help me, what i'm doing wrong here?
This is hooking up to both pickers
return $('.date').datetimepicker({
language: 'en',
}).on('changeDate', OnChangeDate);
you can scope it to this element using, this.$()
return $(this.$('.date')).datetimepicker({
language: 'en',
}).on('changeDate', OnChangeDate);
Related
I am following an example in primeng in which I can add a new row to a table. Everything "seems" to work as long as I fill out all the fields in the input option. However, I want to add the place holder value to the NGmodel if the user does not change the value of the input. I tried everything (ng-init, ngvalue, etc etc) but I can never get the ngmodel to carry the value in the place holder... and the table gets fill with the 3 filled fields but not the one where the user did not type anything.
extract of the HTML....
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_id">Product ID</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_id" [ngModel]="myproduct.product_line_id" placeholder="{{ lastproductline + 1}}" />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_1">Product</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_1" [(ngModel)]="myproduct.product_line_1" autofocus />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_2">Category</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_2" [(ngModel)]="myproduct.product_line_2" />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_3">Sub Category</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_3" [(ngModel)]="myproduct.product_line_3" />
</div>
</div>
the ts file looks something like...
productlines = [];
myproduct: { [s: string]: ProductLines; } = {};
showDialogToAdd() {
this.newProductLine = true;
this.myproduct = {};
this.displayDialog = true;
}
save() {
let productlines = [...this.productlines];
productlines.push(this.myproduct);
this.finalproductchanges.push(this.myproduct)
this.productlinesClone = productlines;
this.myproduct = null;
this.displayDialog = false;
}
Any ideas will be greatly appreciated
I managed to change the code by adding the field directly in the controller.
I am using the Tempus Dominus Timepicker v5.0.1 with jquery 3.4.1 and the latest version of moment.js. I have a form that has a registration start date and time and a registation end date and time. I want the user to be able to select the date and after they click a date I want the time to appear automatically (the equivalent of clicking the clock button at the bottom).
I have my view:
<div class="form-row">
<div class="col-md-4 col-lg-3 mb-3">
#Html.LabelFor(m => m.RegistrationStartDate, new { #class = "font-weight-bold label-required" })
#Html.TextBoxFor(m => m.RegistrationStartDate, new { #class = "form-control datetimepicker-input", placeholder = RecruitClassResource.RegistrationStartDate, required = "required", id="datetimepicker1", data_toggle="datetimepicker", data_target="#datetimepicker1" })
#Html.ValidationMessageFor(m => m.RegistrationStartDate)
</div>
</div>
<div class="form-row">
<div class="col-md-4 col-lg-3 mb-3">
#Html.LabelFor(m => m.RegistrationEndDate, new { #class = "font-weight-bold label-required" })
#Html.TextBoxFor(m => m.RegistrationEndDate, new { #class = "form-control datetimepicker-input", placeholder = RecruitClassResource.RegistrationEndDate, required = "required", id="datetimepicker2", data_toggle="datetimepicker", data_target="#datetimepicker2" })
#Html.ValidationMessageFor(m => m.RegistrationEndDate)
</div>
</div>
javascript:
#section Scripts {
#Scripts.Render("~/Scripts/moment.min.js")
#Scripts.Render("~/Scripts/tempusdominus-bootstrap-4.js")
<script>
$(document).ready(function () {
$('.datetimepicker-input').datetimepicker({
icons: {
time: "far fa-clock"
}
});
$('.datetimepicker-input').on('change.datetimepicker', function (e) {
// Just a test to see when this event is fired
alert(e.date);
});
});
</script>
}
I thought maybe the change.datetimepicker would be the event listener I was looking for, but it is fired the first time I click the textbox because the value changes from null to the current date. I also am not sure what I would need to call for the time to appear when a date is selected.
I have a JSFiddle for you, which does what you want, my friend -> https://jsfiddle.net/8ta5j6v7/2/.
Here is the code:
<div class="container" style="padding: 80px;">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
$(function() {
$("#datetimepicker1").datetimepicker();
var $picker = $("#datetimepicker1");
$picker.on("change.datetimepicker", function (e) {
// After the date is selected, I would like to switch to time view automatically / programmatically
if (!e.oldDate && $picker.datetimepicker('useCurrent')) {
// First time ever. If useCurrent option is set to true (default), do nothing
// because the first date is selected automatically.
return;
}
else if (
e.oldDate &&
e.date &&
(e.oldDate.format('YYYY-MM-DD') === e.date.format('YYYY-MM-DD'))
) {
// Date didn't change (time did).
return;
}
setTimeout(function () {
$('#datetimepicker1 [data-action="togglePicker"]').click();
}, 300); // With a mini delay so that the animation doesn't fire right-away.
});
});
I try to use https://tempusdominus.github.io/bootstrap-4/ in ASP.NET MVC project.
HTML
<div class="input-group date" data-target-input="nearest">
#Html.TextBoxFor(model => model.TimeEnd,
new { #class = "form-control form-control-sm datetimepicker-input",
#data_toggle = "datetimepicker",
#data_target = "#TimeEnd",
type="text"
})
<div class="input-group-append" data-target="#TimeEnd" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
Where model.TimeEnd is string in the format dd.MM.yyyy HH:mm
JS
$(document).ready(function () {
$('#TimeEnd').datetimepicker({
locale: 'es',
});
});
When I open page the input has correct value but it is not visible in the datetimepicker.
UPDATE #1
If I set defaultDate via the same model like defaultDate: '#Model.TimeEnd' (where it is string in the format dd.MM.yyyy HH:mm) then the Spanish localization is gone and I see English calendar! Wow.
And the following error appears
moment-with-locales.min.js:1 Deprecation warning: value provided is
not in a recognized RFC2822 or ISO format. moment construction falls
back to js Date(), which is not reliable across all browsers and
versions. Non RFC2822/ISO date formats are discouraged and will be
removed in an upcoming major release. Please refer to
http://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments: [0] _isAMomentObject: true, _isUTC: false, _useUTC: false,
_l: undefined, _i: 14.08.2018 00:00, _f: null, _strict: false, _locale: [object Object] Error
at Function.createFromInputFallback (http://localhost:62959/Scripts/moment-with-locales.min.js:1:3368)
at wa (http://localhost:62959/Scripts/moment-with-locales.min.js:1:21353)
at va (http://localhost:62959/Scripts/moment-with-locales.min.js:1:22064)
at Sa (http://localhost:62959/Scripts/moment-with-locales.min.js:1:22146)
at l (http://localhost:62959/Scripts/moment-with-locales.min.js:1:209)
at k.i.getMoment (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:14261)
at k.i.defaultDate (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:19874)
at String. (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:14947)
at Function.each (http://localhost:62959/Scripts/jquery-3.3.1.js:360:19)
at k.i.options (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:14895)
Any clue how to fix this issue?
It seems the probelm was around messing up the input and wraping div ids.
HTML
<div class="form-group row">
#Html.Label("Finish", new { #class = "col-sm-2 col-form-label", #for = "TimeStart2" })
<div class="col-sm-10">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input id="TimeEnd" name="TimeEnd" value="#Model.TimeEnd" type="text" class="form-control form-control-sm datetimepicker-input" data-target="#datetimepicker1" />
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
</div>
JS
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
locale: 'es'
});
});
I am new to ember. I have two divs with a select box each. I want the second div to toggle based on the change in the first select box value.
First DIV with select box:
<div class="row row-space">
<div class="col-sm-10">
<div class="input-group input-group-sm">
<span class="input-group-addon edit_schedule_label" id="sizing-addon3">Schedule Level</span>
<div class="recurrence_box">
{{view "select" content=schedule_levels optionValuePath="content.value" optionLabelPath="content.label" selection="default_schedule_level.value" value="default_schedule_level.value" selectionBinding="default_schedule_level"}}
</div>
</div>
</div>
</div>
Second DIV:
{{#if group_level_decider }}
<div class="row row-space">
<div class="col-sm-10">
<div class="input-group input-group-sm">
<span class="input-group-addon edit_schedule_label" id="sizing-addon3">Location </span>
<div class="recurrence_box">
{{view "select" content=schedule_levels optionValuePath="content.value" optionLabelPath="content.label" selection="default_schedule_level.value" value="default_schedule_level.value" selectionBinding="default_schedule_level"}}
</div>
</div>
</div>
</div>
{{/if}}
In Controller, I am observing the change in selection binding of the first select box and setting the condition to toggle for the second div. I can see the condition variable here "group_level_decider" getting set to the correct value but it is not reflecting in the view.
Controller:
group_level_decider : false,
schedule_level_changed: function() {
var model = this.get('store');
model.set('selected_schedule_level',this.get('default_schedule_level.value'))
model.set('group_level_decider',true)
}.observes('default_schedule_level')
Please help me. Thanks!
Here is an example of filtering out cities based on a state:
App.IndexController = Ember.ArrayController.extend({
cities: function(){
var state = this.get('state');
var states = this.get('model');
var cities = [];
if(state){
cities = states.filterBy('state', state).get(0).get('cities');
}
return cities;
}.property('state'),
states: function(){
return this.get('model').mapBy('state');
}.property(),
stateObserver: function(){
this.set('city', null);
}.observes('state')
});
Then, inside your template:
States: {{view "select" prompt="Pick State..." content=states value=state}}
Cities: {{view "select" prompt="Pick City..." content=cities value=city }}
Working solution here
example is very simple.
select the two search condition and return a table with pagination, the whole page will not refresh.
so i use the grails formRemote to submit the form, and the control return the gender with template and it work well. However, the pagination i want to use Jquery, but i cant pass the formRemote params to the remoteFunction using onSuccess method in formRemote.
Here it is the code:
<div class="formSep col-md-12">
<g:formRemote update="searchResult" class="form-inline" role="form" name="form"
url="[controller: 'autoRateRecord', action: 'search']" onSuccess="initPagination(data)">
<div class="form-group col-lg-2">
<g:select class="form-control" name="notified" from="${['done', 'undone']}"
noSelection="${['null': 'Oops']}">
</g:select>
</div>
<div class="form-group col-lg-2 pull-right">
<button type="submit" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-search"></span> search
</button>
</div>
</g:formRemote>
</div>
<div id="searchResult">
<g:render template="searchList"/>
</div>
<script type='text/javascript'>
function initPagination(data) {
console.log("------> " + data)
$("#Pagination").pagination(10, {
callback: getRecordList(1),
prev_text: "prev",
next_text: "next",
items_per_page: 15,
num_edge_entries: 1
});
}
**!!!!!!! need formRemote data !!!!!!!**
function getRecordList(page_index) {
<g:remoteFunction controller="autoRateRecord" action="search" update="searchResult" params="'page='+page_index"/>
}
// On load, style typical form elements
$(function () {
});
</script>
the controller code is:
def search = {
log.info(ToStringBuilder.reflectionToString(params))
// logic .....
render(template: "searchList", model: [
autoRateRecords: result,
total : result.totalCount
])
}
I would change the pagination script to something like
$("#pageHiddenFieldId").val(pageNo);
$("#myForm").submit();