I've a Kendo template and that template contains a textbox like below with datetime picker.
<script id="popup_editor" type="text/x-kendo-template">
<input data-role="datepicker" data-bind="value: datePickerValue" />
</script>
Now I want to set min value for this. i.e I don't want to permit to select previous days than today. Is an example available on the web?
Try this
var myDatePicker = $("#myDatePicker").kendoDatePicker().data("kendoDatePicker");
var today = new Date();
var day = today.getDate();
var month = today.getMonth() + 1;
var year = today.getFullYear();
myDatePicker.min(new Date(year,month,day));
Usually, you can do some javascript here:
var myDatePicker = $("#date").kendoDatePicker().data("kendoDatePicker");
myDatePicker.min(new Date());
but I'm not sure if it's going to work within your template that way. Maybe it's a start.
Ok I had to implement something similar recently and found a straightforward way to do this. I realize this is way too late, but I found this question, while I was doing my research.
Say the below is your template: (Simplified for brevity)
<div class="k-block k-shadow">
<p>Contract Start Date: </p>
<input type="text" tabindex="7"
class="k-input k-textbox"
name="Contract_Start_Date"
id="Contract_Start_Date"
data-bind="value:Contract_Start_Date"
data-format="MMMM yyyy"
data-start="year"
data-depth="year"
data-change="setContractMinEnd"
data-role="datepicker" />
</div>
<div class="k-block k-shadow">
<p>Contract End Date: </p>
<input type="text" tabindex="8"
class="k-input k-textbox"
name="Contract_End_Date"
id="Contract_End_Date"
data-bind="value:Contract_End_Date"
data-format="MMMM yyyy"
data-start="year"
data-depth="year"
data-role="datepicker" />
</div>
The below code for the Contract_Start_Date field assigns a JS function to the "Change" event of that field: data-change: setContractMinEnd
I added the above function in a script block to go out with the page. And now every time the start date is changed the end date gets a min value which is the start date:
function setContractMinEnd() {
var edval = $('#Contract_Start_Date').data("kendoDatePicker");
var sdval = $('#Contract_End_Date').data("kendoDatePicker");
if (sdval && edval) {
edval.min(sdval.value());
}
}
You can obviously get fancy with that logic and set the below or something to that effect: edval.min(new Date())
Hope it helps someone...
You can just pass data-min="your Date in proper format" in html input.
<script id="popup_editor" type="text/x-kendo-template">
<input data-role="datepicker" data-bind="value: datePickerValue" data-min="min_date_value" />
</script>
This will not even show dates beyond the minimum value.
Related
This answer is great! everything works fine with the datepicker.
But I have a problem with datetime-picker. as I see from another datetime field (without default value), the class used by that field defined as datetime-input.
So I tried to use :
$crud->set_js_config('assets/grocery_crud/js/jquery_plugins/config/jquery.datetime.config.js');
...
<script type="text/javascript">var js_date_format = "dd/mm/yyyy HH:mm:ss"; </script>
<input name="date" type="text" value="'.date("d/m/Y H:i:s").'" class="datetime-input" />
<a class="datetime-input-clear ui-button " tabindex="-1" role="button">Clear</a>
even i've tried using class "timepicker" :
<input name="date" type="text" value="'.date("d/m/Y H:i:s").'" class="datetime-input timepicker" />
but the jquery datetime picker function is not available. Any idea how to make it works? Thank you
try to use callback field values.
$crud->callback_add_field('date_feild_name',array($this,'set_default_date'));
public function set_default_date(){
$value = date("d/m/Y");
$return = '<input id="field-date_feild_name" name="date_feild_name" type="text" value="'.$value.'" maxlength="10" class="datepicker-input hasDatepicker">
<a class="datepicker-input-clear" tabindex="-1">Date feild name</a> (dd/mm/yyyy)';
return $return;
}
I'm using .NET Charts to create some dynamic charts from a table in a database, and each chart is a separate view, with a corresponding action in the controller.
Then they are displayed in a main view as images:
<img src="~/Controller/Chart1" class="centered" />
Now I want to be able to filter the charts by date, and I've added the parameters to the actions and a couple datepickers for a start date and an end date.
I'm trying to refresh the charts using Ajax, but I'm having trouble. Without Ajax, the filter works, but redirects to a page containing just the updated chart.
With Ajax, nothing happens, or rather, if I set the UpdateTargetId to a div it gets filled with text, like byte code or something.
This is what I'm using:
<div>
using (Ajax.BeginForm("Chart1", "controller",
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "Chart1"
}))
{
<p>
<input type="text" name="begindate" class="datefield" placeholder="Begin Date" />
<input type="text" name="enddate" class="datefield" placeholder="End Date" />
<input type="submit" value="Filter" />
</p>
<img src="~/controller/Chart1" class="centered" />
</div>
How can I fix this problem?
You need to pass the dates to your action method and let the action method uses these dates to generate a filtered data set which will be used to generate the chart.
You can simply use jQuery Ajax to do this.
<div>
<input type="text" name="begindate" class="datefield" placehold="Begin Date" />
<input type="text" name="enddate" class="datefield" placeholder="End Date" />
<input type="submit" id="btnFilter" value="Filter" />
<img src="~/controller/Chart1" id="chartImg" class="centered" />
</div>
Now when user clicks the form, pass the dates
$(function(){
$("#btnFilter").click(function(e){
e.preventDefault();
var d1 = $("input[name='begindate']").val();
var d2 = $("input[name='enddate']").val();
var url = "#Url.Action("Chart1", "YourControllerName")";
url += "?beginDate=" + d1 + "&endDate=" + d2;
$("#chartImg").attr("src", url);
});
});
Now of course your action method should accept the dates and return the data as needed:
public ActionResult Chart1(DateTime beginDate,DateTime endDate)
{
// Return the chart image
}
I am using the Url.Action action method to generate the correct path to the Chart1 action method. This code will work if your JavaScript code is inside a Razor view. If your code is inside an external js file, Use the approach mentioned in this post
I have created a custom template for a task using this example:
http://docs.telerik.com/kendo-ui/api/javascript/ui/gantt#configuration-editable.template
<script id="editor" type="text/x-kendo-template">
<h3>Edit meeting</h3>
<p><label>Title: <input name="title" /></label></p>
<p><label>Start: <input data-role="datetimepicker" name="start" /></label></p>
<p><label>End: <input data-role="datetimepicker" name="end" /></label></p>
</script>
Now I need to add a 'Resources - Assign' button, just like the one in this example (Edit Task Form):
http://demos.telerik.com/kendo-ui/gantt/resources
What do I need to do to create this button? I can't find any API documentation for this part of the Gantt control.
There are a few steps needed to accomplish this.
First, add something like this to your Kendo template:
<div>
<label for='resources'>Resources:</label>
<div class='k-gantt-resources' style='display: none;'>
</div>
<div class='k-edit-field' data-container-for='resources'>
<a class='k-button' href='\\#'>Assign</a>
</div>
</div>
Next, you'll want to add the following two event handlers to the options when you initialize the widget:
edit: editHandler,
save: saveHandler
Finally, you'll want to create the two handlers referenced above. You are basically intercepting the default functionality and opening the popup yourself, then saving the results when complete (if they were modified).
var resoucesdEdited = false;
function editHandler(e)
{
var gantt = e.sender;
resoucesdEdited = false;
if (e.task)
{
e.container.on('click', 'div[data-container-for="resources"] > a', function (event)
{
event.preventDefault();
resoucesdEdited = true;
gantt._createResourceEditor(e.container.find('div.k-gantt-resources'), e.task);
});
}
}
function saveHandler(e)
{
if (e.task && resoucesdEdited)
{
this._updateAssignments(e.task.get("id"), e.task.get(this.resources.field));
}
}
I'm glad you asked this question because it's something I needed to know too, and you're right, the Telerik/Kendo documentation doesn't mention anything on how to do this!
I have the following code:
<input data-role="datepicker" data-bind="value:referralData.Referral.from_date" />
With the value to bind as such:
from_date: "2014-01-01T00:00:00"
In the object and it doesn't bind anymore.
I have tried:
<input data-role="datepicker" data-bind="value:referralData.Referral.from_date, parseFormats:'YYYY-MM-DD\Thh:mm:ss'" />
But it states that: Uncaught Error: The parseFormats binding is not supported by the DatePicker widget. So I believe I have a syntax error that I am missing.
Does anyone know how to tell the datepicker to pick up this date?
data-bind is for live-binding options. If all you want to do is use the configuration option, you can use data-parse-formats:
<input data-role="datepicker"
data-parse-formats="YYYY-MM-DDThh:mm:ss"
data-bind="value:referralData.Referral.from_date" />
Also, if you want to use a 24 hour clock, you should use the this formatting config for time: HH:mm:ss
The solution by #Lars works, but the date format specifier is wrong (as of Kendo version 2014.3.119). It should be yyyy-MM-ddTHH:mm:ss (lower case for year and day and upper case for hour):
<input
data-role="datepicker"
data-bind="value:referralData.Referral.from_date"
data-parse-formats="yyyy-MM-ddTHH:mm:ss" />
And as a completion, if sometimes you need to, you can in fact pass more than one format, according to the documentation, like this:
<input
data-role="datepicker"
data-bind="value:referralData.Referral.from_date"
data-parse-formats="['yyyy-MM-ddTHH:mm:ss','yyyy-MM-dd']" />
You can create a custom binding for date format:
Custom Binding
kendo.data.binders.widget.dateFormat = kendo.data.Binder.extend({
init: function (widget, bindings, options) {
//call the base constructor
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
},
refresh: function () {
var that = this,
value = that.bindings["dateFormat"].get(); //get the value from the View-Model
$(that.element).data("kendoDatePicker").setOptions({
format: value
}); //update the widget
}
});
HTML
<div id="report1" data-role="view" data-model="APP.models.report1">
<input data-role="datepicker" data-bind="value: start_date, dateFormat: date_format" />
</div>
Model
window.APP = {
models: {
report1: kendo.observable({
start_date: new Date(),
date_format: "dd/MM/yyyy",
}),
}
};
var app = new kendo.mobile.Application($(document.body), {
initial: "report1",
skin: "default",
});
I want to improve my website and figured out a good way to do it was by submitting forms via AJAX. But, I have so many forms that it would be inpractical to do $('#formx').submit(). I was wondering if there was a way to do this automatically by making an universal markup like;
<form class="ajax_form" meta-submit="ajax/pagename.php">
<input type="text" name="inputx" value="x_value">
<input type="text" name="inputy" value="y_value">
</form>
And have this submit to ajax/pagename.php, where it automatically includes inputx and inputy?
This would not only save me a lot of time but also a lot of lines of code to be written.
First question so I hope it's not a stupid one :)
Something like this should work for all forms. It uses jQuery - is this available in your project? This specific code chunk hasn't been tested per say, but I use this method all the time. It is a wonderful time saver. Notice I changed meta-submit to data-submit so that its value can be fetched using $('.elemenet_class').data('submit');
HTML
<!-- NOTE: All Form items must have a unique 'name' attribute -->
<form action="javascript:void(0);" class="ajax_form" data-submit="ajax/pagename.php">
<input type="text" name="inputx" value="x_value">
<input type="text" name="inputy" value="y_value">
<input type="submit" value="go" />
</form>
JavaScript
$('.ajax_form').submit(function(e){
var path = $(this).attr('data-submit'); //Path to Action
var data = $(this).serialize(); //Form Data
$.post(path, {data:data}, function(obj){
});
return false;
})
PHP
//DEBUGGING CODE
//var_dump($_POST);
//die(null);
$data = $_POST['data'];
$inputx = $data['inputx'];
$inputy = $data['inputy'];
you can create ajax fot text boxes so that it can update to database whenever change the focus from it.
<form id="ajax_form1">
<fieldset>
<input type="text" id="inputx" value="x_value" />
<input type="text" id="inputy" value="y_value" />
</fieldset>
</form>
<script>
$(document).ready(function()
{
$("form#ajax_form1").find(":input").change(function()
{
var field_name=$(this).attr("id");
var field_val=$(this).val();
var params ={ param1:field_name, param2:field_val };
$.ajax({ url: "ajax/pagename.php",
dataType: "json",
data: params,
success: setResult
});
});
});
</script>