I want to set datePicker HH:mm always have 09:00AM. I managed to disable hour picker.
HTML
<input class="form-control" id="date_start_picker">
JS
function initDatePicker(id_picker, date, id_other_picker, is_first_picker = true, format = 'yyyy-mm-dd HH:mm') {
let this_object = this
var datePicker = $(id_picker)
datePicker.datepicker({
uiLibrary: 'bootstrap4',
modal: false,
footer: false,
value: date,
format: format,
minDate: "2000-01-01"
});
}
There is nothing mentioned in documentation
I managed to achieve my desired result by doing below
change: function (event) {
let picker_value = datePicker.val()
if (picker_value.includes('00:00')) {
picker_value = picker_value.replace("00:00", "09:00")
$(datePicker).datepicker("value",picker_value);
}
}
Related
I'm using Telerik for MVC and trying to get the multi-select to populate with the initial values in an Edit scenario.
<script>
function filterProducts() {
return {
manufacturerId: $("#ServiceBulletinItem_ManufacturerId").val()
};
}
function onManufacturerChange(e) {
var v = e.sender.dataItem().Value;
$.post("#Url.Action("GetCascadeProducts", "Components")", { manufacturerId: v }, function (result) {
var grid = $("#ServiceBulletinItem_ApplicableProducts").data("kendoMultiSelect")
grid.setDataSource(result)
});
}
function InitialPopulate(manId) {
$.post("#Url.Action("GetCascadeProducts", "Components")", { manufacturerId: manId }, function (result) {
var grid = $("#ServiceBulletinItem_ApplicableProducts").data("kendoMultiSelect")
grid.setDataSource(result)
});
}
$(document).ready(function () {
$('.control-datepicker').Zebra_DatePicker();
var m = $("#ServiceBulletinItem_ManufacturerId").val();
InitialPopulate(m);
});
</script>
<div class="form-group">
#Html.LabelFor(m => m.ManufacturerList, "Manufacturer", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#(Html.Kendo().DropDownListFor(m => m.ServiceBulletinItem.ManufacturerId)
.HtmlAttributes(new { #class = "col-md-6 form-control" })
.Filter("contains")
.DataValueField("Value")
.DataTextField("Text")
.BindTo((IEnumerable<SelectListItem>)Model.ManufacturerSelectList)
.HtmlAttributes(new { style = "width:70%;" }).Events(e =>
{
e.Change("onManufacturerChange");
})
)
</div >
</div >
<div class="form-group">
#Html.LabelFor(m => m.ProductList, "Product", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#(Html.Kendo().MultiSelectFor(m => m.ServiceBulletinItem.ApplicableProducts)
.AutoClose(false)
.DataTextField("ProductName")
.DataValueField("ProductId")
.Placeholder("Select products...")
)
</div>
</div>
I'm trying to populate the manufacturer drop down and the Product multiSelect. The ApplicableProducts item is an IEnumerable representing the ProductId's of all those previously selected and I know that when I select the manufacturer and it calls the GetCascadeProducts controller method it will return back a collection of ProductId and ProductName for all the manufacturers products of which those productId is the ApplicableProducts property should exist.
On document.ready I can call the InitialPopulate method with the manufacturerID which will populate the multiSelect items but can't seem to populate the initial values.
I couldnt get the binding working correctly so ended up using
#(Html.Kendo().MultiSelect()
.Name("ServiceBulletinItem_ApplicableProducts")
.AutoClose(false)
.DataTextField("ProductName")
.DataValueField("ProductId")
.Placeholder("Select products 2...")
.AutoBind(false)
)
and then on the using the following code on document ready to make an ajax call to populate the manufacturer and product controls
function PopulateProductsInitial(manId) {
$.post("#Url.Action("GetCascadeProducts", "Components")", { manufacturerId: manId }, function (result) {
var grid = $("#ServiceBulletinItem_ApplicableProducts").data("kendoMultiSelect")
grid.setDataSource(result);
var s = $("#ServiceBulletinItem_Id").val();
$.post("#Url.Action("GetSBProducts", "ServiceBulletins")", { Id: s}, function (result) {
var arr = [];
result.forEach(function (element) {
arr.push(element.ProductId);
});
var grid = $("#ServiceBulletinItem_ApplicableProducts").data("kendoMultiSelect")
grid.value(arr);
});
});
}
}
$(document).ready(function () {
//Populate Initial Values
PopulateProductsInitial($("#ServiceBulletinItem_ManufacturerId").val());
$('#YourButton').click(SendForm);
});
The problem then became sending the selected items back to the controller when the edit was complete which again seemed convoluted because the control was not bound and therefore I had to make an Ajax call to submit the data.
function SendForm() {
var items = $("#ServiceBulletinItem_ApplicableProducts").data("kendoMultiSelect").value();
//Manipulate into ServiceBulletinViewModel for the save
var data = {
Id: $("#ServiceBulletinItem_Id").val(),
ServiceBulletinItem: {
Id: $("#ServiceBulletinItem_Id").val(),
ManufacturerId: $("#ServiceBulletinItem_ManufacturerId").val(),
IssueDate: $('#ServiceBulletinItem_IssueDate').val(),
Heading: $('#ServiceBulletinItem_Heading').val(),
Details: $('#ServiceBulletinItem_Details').val(),
Url: $('#ServiceBulletinItem_Url').val(),
SelectedProducts: items
}
}
$.ajax({
type: 'POST',
url: '/ServiceBulletins/Edit',
contentType: 'application/json',
data: JSON.stringify(data),
success: function (result) {
//Your success code here..
if (result.redirectUrl != null) {
window.location = result.redirectUrl;
}
},
error: function (jqXHR) {
if (jqXHR.status === 200) {
alert("Value Not found");
}
}
});
}
It all seemed a lot more convoluted than any of the demo's that teleriks and I couldnt find any good examples of binding from remote sources which looked similar.
As the binding is convention based I'm wondering if its possible to simplify the ajax calling for the post functionality with the correct naming of the controls so that I can simply get the selected items on the multiselect control or if the ajax post is the way to go.
I want to test file uploader component using Jest and vue/test-utils.
I have this:
describe('show progress bar of uploading file', () => {
const wrapper = mount(FileUploaderComponent)
// create csv file
let csv = new Blob([''], { type: 'text/csv;charset=utf-8;' })
csv.name = 'myFile.csv'
let input = wrapper.find('input')
input.element.value = csv // || csv.error value, Error here
input.trigger('change')
// Update current status
})
Where in FileUploaderComponent i have:
<template>
<form action="POST" enctype="multipart/form-data">
<label class="btn btn-primary" for="input-file">
<input class="input-file" id="input-file" name="file" type="file" accept=".xlsx, .xls, .csv">
UPLOAD FILE
</label>
</form>
</template>
Throws this error:
InvalidStateError: This input element accepts a filename, which may
only be programmatically set to the empty string.
49 |
50 | let input = wrapper.find('input')
> 51 | input.element.value = csv
52 | input.trigger('change')
53 |
54 | // Update current status
So, the question is: How can i trigger event change with file input value? in this case, a csv file as value ?
You could do this using the DataTransfer object. Unfortunately, it hasn't been added to JSDOM, so you can't test in Jest. There's an open issue to add the object—https://github.com/jsdom/jsdom/issues/1568
If you ran your tests in a browser using Karma, you could test like this:
const wrapper = shallow(FormComponent)
const input = wrapper.find('input[type="file"]')
const dT = new ClipboardEvent('').clipboardData || new DataTransfer()
dT.items.add(new File(['foo'], 'programmatically_created.txt'))
input.element.files = dT.files
await input.trigger('change')
If you're just wanting to simulate a value in input.element.files and changes to input.element.value in Jest, but not necessarily accurately simulating every DOM behavior, you can do it by defining a getter/setter for those fields. This works for me:
let localImageInput
let localImageInputFiles
let localImageInputValueGet
let localImageInputValueSet
let localImageInputValue = ''
beforeEach(function() {
localImageInput = wrapper.find('#local-image-input')
localImageInputFilesGet = jest.fn()
localImageInputValueGet = jest.fn().mockReturnValue(localImageInputValue)
localImageInputValueSet = jest.fn().mockImplementation(v => {
localImageInputValue = v
})
Object.defineProperty(localImageInput.element, 'files', {
get: localImageInputFilesGet
})
Object.defineProperty(localImageInput.element, 'value', {
get: localImageInputValueGet,
set: localImageInputValueSet
})
})
it('should do the thing', function() {
localImageInputValue = 'some-image.gif'
localImageInputFilesGet.mockReturnValue([{
size: 12345,
blob: 'some-blob',
width: 300,
height: 200
}])
localImageInput.trigger('change')
return Vue.nextTick().then(() => {
// Assuming the component sets input.value = '' when this event is triggered
// and calls someFn with the image data
expect(localImageInputValue).toEqual('')
expect(someFn.mock.calls[0][0]).toEqual({
size: 12345,
blob: 'some-blob',
width: 300,
height: 200
})
})
}
i have used jquery-ui datepicker in my application. I want to count a week number with date type "dd-mm-yy" but it giving me a wrong week number i realize that it uses "mm-dd-yy" date type to calculate week number.
i have used bellow code :
<input type="text" class="calendar">
<input type="text" class="week">
$(function() {
$(".calendar").datepicker({dateFormat: "dd/mm/yy",
showWeek: true,
onSelect: function(dateText, inst) {
dateFormat: "'Week Number '" + $.datepicker.iso8601Week(new Date(dateText)),
$(".week").val('Week:' + $.datepicker.iso8601Week(new Date(dateText)));
}
});
$(".calendar").datepicker("setDate", new Date());
});
here is a also a JSFiddle for it
Use inst to get selectedYear, selectedMonth and selectedDay and construct a Date from those values instead of the dateText.
Here is the code:
$(function() {
$(".calendar").datepicker({
dateFormat: "dd/mm/yy",
showWeek: true,
onSelect: function(dateText, inst) {
var newDate = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
dateFormat: "'Week Number '" + $.datepicker.iso8601Week(newDate),
$(".week").val('Week:' + $.datepicker.iso8601Week(newDate));
}
});
$(".calendar").datepicker("setDate", new Date());
});
Here is the updated JSFiddle.
add this link to JSFiddle resources
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.js
now run this code only
$(document).ready(function(){
var weekday = moment("12-25-1995", "MM-DD-YYYY").week();
alert(weekday);
});
I am using rails and algolia gem with mongoid datastore.
I am sending data to algolia for a model Question. One of the doc example in Algolia system is
objectID: 5691e056410213a381000000
text: "what is #cool about your name Mr. John? #name #cool"
asked_to: ["565571704102139759000000", "i7683yiq7r8998778346q686", "kjgusa67g87y8e7qtwe87qwe898989"]
asked_by: "564a9b804102132465000000"
created_at: "2016-01-10T04:38:46.201Z"
card_url: "http://localhost:3000/cards/5691e056410213a381000000"
answerers: []
has_answer: false
requestor_count: 0
status: "active"
popularity_point: 0
created_at_i: 1452400726
_tags: ["cool", "name"]
I want to find all those documents, where it meets these two conditions:
1) text contains your name
2) asked_to contains i7683yiq7r8998778346q686
I am using Twitter's typeahead javascript library. And my UI's javascript to implement algolia search is as follows:
<input class="typeahead ui-widget form-control input-md search-box tt-input" id="typeahead-algolia" placeholder="Search questions" spellcheck="false" type="text" autocomplete="off" dir="auto" style="position: relative; vertical-align: top;">
$(document).on('ready page:load', function () {
var client = algoliasearch("APPLICATION_ID", "SEARCH_KEY");
var index = client.initIndex('Question');
$('#typeahead-algolia').typeahead(
{
hint: false,
highlight: true,
minLength: 1
},
{
source: index.ttAdapter({hitsPerPage: 10}),
displayKey: 'text'
}
).on('keyup', this, function (event) {
if (event.keyCode == 13) {
$('#typeahead-algolia').typeahead('close');
window.location.href = "/?keyword="+encodeURIComponent($('#typeahead-algolia').val());
}
});
$('.typeahead').bind('typeahead:select', function(ev, suggestion) {
window.location.href = suggestion.card_url;
});
});
So my question is:
This code works perfectly. But how to add condition for asked_to contains i7683yiq7r8998778346q686 in above javascript to filter out result.
You can use a facet filter on the asked_to attribute in your query.
You first need to declare the attribute asked_to as an attribute for faceting in your index settings and then pass asked_to:i7683yiq7r8998778346q686 as a facet filter in your query via the facetFiltersquery parameter.
When your index settings are changed, you can change your source to add the facetFilters parameter:
$('#typeahead-algolia').typeahead(
{
hint: false,
highlight: true,
minLength: 1
},
{
source: index.ttAdapter({hitsPerPage: 10, facetFilters: "asked_to:i7683yiq7r8998778346q686"}),
displayKey: 'text'
}
).on('keyup', this, function (event) {
if (event.keyCode == 13) {
$('#typeahead-algolia').typeahead('close');
window.location.href = "/?keyword="+encodeURIComponent($('#typeahead-algolia').val());
}
});
I have a problem with my datepicker. When I focus the text field it shows properly, but when I click anywhere else in the screen (to make it dissapear), then if I focus again the text field without previously selecting another element, the datepicker doesn't show.
Here is the code:
$(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
changeDay: true,
showButtonPanel: true,
dateFormat: 'dd MM yy',
onClose: function (dateText, inst) {
var day = $("#datepicker").datepicker('getDate').getDate();
var month = $("#datepicker").datepicker('getDate').getMonth() + 1;
var year = $("#datepicker").datepicker('getDate').getFullYear();
$(this).datepicker('setDate', new Date(year, month, day));
}
});
});
The problem is in your onClose function. When you call $("#datepicker").datepicker('getDate').getdate(), you run the possibility of calling getDate() on null.
The following should fix the problem, hope it works for you =)
$(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
changeDay: true,
showButtonPanel: true,
dateFormat: 'dd MM yy',
onClose: function (dateText, inst) {
var getdate = $('#datepicker').datepicker('getDate');
if(getdate) {
var day = getdate.getDate();
var month = getdate.getMonth() + 1;
var year = getdate.getFullYear();
$('#datepicker').datepicker('setDate', new Date(year, month, day));
}
}
});
});
Edit: here's the jsfiddle if you need a working proof of concept: http://jsfiddle.net/jcolicchio/fpS2Q/