I'm having issues with binding the calendar control based on jquery-UI.
I'm using Knockout and REST API to get the date value and it gets populated correctly in the input text box as below, but the calendar does not reflect the correct binding with the date populated? What needs to be done to reflect the correct date in the calendar.
<div class="form-group">
<label for="LaunchDate">Launch Date</label>
<div class="input-group"
<input type="text" data-bind="value: Launch_Date" class="date-picker form-control input-sm" id="LaunchDate"/>
<label for="LaunchDate" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span> </label>
</div>
</div>
Knockout JS Code:
self.Launch_Date = ko.observable(moment.utc(data.d.Launch_Date).format("YYYY-MMM-DD"));
DatePicker Code JQuery UI and Bootstrap:
$(".date-picker").datepicker();
Use the dateFormat option. The format the picker is set to use should match the format of the date you're initializing it with.
$(".date-picker").datepicker({ dateFormat: "yy-mm-dd" });
EDIT: Fiddle
I assume you are getting the value from data.d.Launch_Date.Some time REST api with json returns the date value with backslash, and you need to parse it,
var dt = new Date(parseInt(data.d.LaunchDate) and then you can try this format 'MM/DD/YYYY' instead of using the MMM.
Related
Context: This contains 1 select2 dropdown with the ability to select multiple options
<div class="form-group" id="mediaBox" >
<label for="i">
Media Type
</label>
<select class="form-control" name="mediatype" style="width: 100%;" multiple="multiple" id="i">
<option>Original</option>
<option>Videogame</option>
<option>Comic and/or Manga</option>
<option>TV</option>
<option>Movie</option>
<option>Novel and Book</option>
</select>
</div>
Pictures of problem(Visual representation of the problem):
Picture 1(Second select2 dropdown):
Output:
Problem:
When I submit a form with multiple values from a select2 dropdown(I have 1 select2 dropdowns in this form that allows me to select multiple values) they each submit only one value I selected and not all of them for the mediatype variable. Can you help me solve this problem? Modify any html code if necessary.
Sorry for my English.
I need to change input value format, for example: from "1000000" to "1 000 000 $".
In my views of rails app, I have this line of code:
<%= ng_text_field('total_price', 'selected.data.total_price', 'Full price', ng_readonly: '!selected.permissions.update') %>
In helper:
def ng_text_field(name, ng_model, placeholder, options = {})
result = <<-HTML
<div class="form-group" ng-class='{"has-error":errors.#{name}}' #{options[:ng_if] && "ng-if=\"#{options[:ng_if]}\""}>
<label for="#{name}" class="col-sm-3 control-label">#{placeholder}</label>
<div class="col-sm-9">
<input id="#{name}"
type="text"
class="form-control"
name="#{name}"
placeholder="#{placeholder}"
ng-model="#{ng_model}"
#{options[:ng_readonly] && "ng-readonly=\"#{options[:ng_readonly]}\""}>
<p class="help-block small" ng-if="errors.#{name}">{{errors.#{name} | join:',' }}</p>
</div>
</div>
HTML
result.html_safe
end
I am know Angular very little, I have tried some ways and all this ways was incorrect. :(
Could anyone give advice of some help?
Thank you in advance
You're going to need to create a new directive that requires ngModel and applies the appropriate $parser/$formatter to it.
https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$parsers
A good example of how to do this is (displaying as uppercase but always storing data as lowercase):
ngModel Formatters and Parsers
You should be able to then add the ability to include other directives in your 'options' argument so that they get added correctly to the output.
I am trying to change the "asp-action= ", unfortunately I could not find anything on the internet...
Currently I am working with a ViewBag where I can select a value from that list.
What I want is: I want to put that selected value from the ViewBag in the "asp-action= ( here ) "
Image of my index
Image of my Post method
<form method="post" enctype="multipart/form-data" asp-controller="Parser" asp-action= "PostDrone">
<div class="col-md-10">
<p>Upload one or more files using this form:</p>
<select asp-items="#(new SelectList(#ViewBag.listofitems ))"></select>
<input type="file" name="files" multiple />
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input type="submit" value="Upload" />
</div>
</div>
For example:
I want the "asp-action=" have the string value "PostSchoen" if I selected PostSchoen from the viewbag selectlist
I hope it is understandable what i said
What you wants to do it should doing by client side development with JS
But you have three ways:
1) You can change it by using JS
here an example with Jquery
need add it to onReady function this will change action to option val
<script>
$(function() {
$("select").change(function (){
//set form action to option val or get to whatever you need
$(this).closest("form").attr("action",$(this).val());
});
});
</script>
2) Send data to one contoller method then switch it by your select or other options
change in view
<select name="typeOfUploading" asp-items="#(new
SelectList(#ViewBag.listofitems ))"></select>
change in controller
PostDrone(List<IFromFile> files, string typeOfUploading)
{
//and use typeOfUploading this will be selected value from your select list
}
3) Firstly provide for user this data send choise, that generate him correct view with needed action
I'm using SimpleForm to collect a new object and I'd like to use values that the user has entered into the form to populate values in a nested form. Is there a way to do this?
So far I've been perusing the SimpleForm docs and poking around with pry when the form is active – without much luck… My next guess would be to try to get at the values with jQuery, but that is entirely new ground for me. Any suggestions would be most welcome.
<form id="get_value">
<input type="text" name="FirstName" ><br>
<input type="text" name="Email"><br>
</form>
<button>Get Value</button>
<div id="value"></div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#value").text($("#get_value").serialize());
});
});
</script>
Try this. In your view:
<p id="output"></p>
<%= text_field_tag :foo, params[:foo], id: 'bar' %>
This will set your custom ID.
And then in your .js file:
$("#bar").keyup(function() {
var value = $(this).val();
$("#output").text(value);
}).keyup();
This will return a value of the input.
Source: http://api.jquery.com/val/
Using select2 is really cool but I would simply like my input to stay a simple, basic search box, without the fancy styling and formatting from select2. I couldn't find a way to achieve this yet.
Is there a simple way to do this?
Thanks
Try Bootstrap Typeahead
http://twitter.github.io/bootstrap/javascript.html#typeahead
//JS
var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
$('#search').typeahead({source: subjects})
//HTML
<div class="well">
<input type="text" class="span3" id="search" data-provide="typeahead" autocomplete="off" data-items="4" />
</div>
See example here: http://jsfiddle.net/6XG8F/