I have 2 input form fields that use daterangepicker to get single timestamps, I want to pass these to another paragraph after a button is clicked.
This is what the script looks like in para 1,
<label class = "name">From Date : </label>
<input type="text" id="fromDate" class = "dates" placeholder = "Select timestamp" ng-model="fromTs"></input>
<label class = "name">To Date : </label>
<input type="text" id="toDate" class = "dates" placeholder = "Select timestamp" ng-model="toTs"></input>
<script>
$(function() {
var start = moment();
var end = moment();
$('#fromDate').daterangepicker({
timePicker: true,
startDate: start,
singleDatePicker: true,
showDropdowns: true,
timePickerSeconds: true,
timePicker24Hour: true,
locale: {
format: 'DD-MM-YYYY HH:mm:ss'
}
});
$('#toDate').daterangepicker({
endDate: end,
timePicker: true,
singleDatePicker: true,
showDropdowns: true,
timePickerSeconds: true,
timePicker24Hour: true,
locale: {
format: 'DD-MM-YYYY HH:mm:ss'
}
});
});
</script>
<button type="submit" class="btnbtn-primary" ng-click="z.angularBind( 'fromTs', fromDate, 'paragraph_1590566438633_806469898'); z.angularBind('toTs', toTs, 'paragraph_1590566438633_806469898'); z.runParagraph( 'paragraph_1590566438633_806469898');">Apply</button>
And this is in para2,
%md
### Date range is ${fromTs} to ${toTS}
I get Nullpointer exception when I run this, checked in the console that there is no object being passed in case of fromTs and toTs.
Initially I was using bootstrap-datepicker but later moved to daterangepicker as it had the option of selection of time as well, using the ng-model value to pass the input field value worked there, but it doesn't seem to be working with daterangepicker.
Why is this happening and how do I go about this error?
Related
I am using pikaday.js date picker.
I have moment.js loaded as well.
If i select 02/02/2022 it stored fine but when the page loads it changes changes the date to a random date.
var qualExpiry = new Pikaday({
field: document.getElementById('qualExpiry'),
firstDay: 1,
format: 'DD-MM-YYYY',
yearRange: [2010, 2040]
});
{!! Form::text('expiry_date', null, ['id' => 'qualExpiry', 'class' => 'form-control form-control-lg form-control-solid mb-3 mb-lg-0', 'placeholder' => 'Select expiry date']) !!}
if i remove format: 'DD-MM-YYYY' and use the default ISO format it works fine
i have two kendodatepickers "startDate" and "endDate". I want every time the user set a date in startdate, establish the max date one month forward from the selected date to pick in endDate datepicker.
I am setting up the first time in this way:
$("#datStartDate").kendoDatePicker({
start: "month",
depth: "year",
format: "dd/MM/yyyy",
dateInput: true,
change: (e) => {
return moc.rangeStartDate("datStartDate", "datEndDate");
},
min: new Date(1900, 0, 1),
max: new Date(),
value: new Date()
});
$("#datEndDate").kendoDatePicker({
start: "month",
depth: "year",
format: "dd/MM/yyyy",
dateInput: true,
max: new Date(),
change: (e) => {
return moc.rangeEndDate("datStartDate", "datEndDate");
},
value: new Date()
});
I tried this to set the max value, each time the startDate picker is cheanged:
$("#datStartDate").change(() => {
let startDate = ($("#datStartDate").val()).split("/");
console.log("cambio de fecha", parseInt(startDate[2]), parseInt(startDate[1]), parseInt(startDate[0]))
let datePicker = $("#datEndDate").data("kendoDatePicker");
datePicker.max(new Date(parseInt(startDate[2]), parseInt(startDate[1]), parseInt(startDate[0])));
datePicker.value(new Date(parseInt(startDate[2]), parseInt(startDate[1]), parseInt(startDate[0])))
})
It doesnt works and i dont get an error. How can i do this? Thank you so much for you time.
I am using this:
KendoUI
JavaScript
ASP .NET MVC
RAZOR
jquery
you can use it in Jquery
function startChange() {
var endPicker = $("#dtpStartDate").data("kendoDatePicker"),
startDate = this.value();
if (startDate) {
startDate = new Date(startDate);
startDate.setDate(startDate.getDate());
endPicker.max(startDate + 30);
}
}
function endChange() {
var startPicker = $("#dtpEndDate").data("kendoDatePicker"),
endDate = this.value();
if (endDate) {
endDate = new Date(endDate);
endDate.setDate(endDate.getDate());
startPicker.max(endDate - 30);
}
}
and in razor files you can create datepickers like this
<div class="form-group">
<label class="col-md-4 control-label">#Html.LabelFor(m => m.StartDate)</label>
<div class="col-md-8">
#(Html.Kendo().DatePickerFor(m => m.StartDate)
.HtmlAttributes(new { #Id = "dtpStartDate", style = "width:100%", required = "required", validationMessage = "Select Start Date" })
.Events(e => e.Change("startChange")))
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">#Html.LabelFor(m => m.EndDate)</label>
<div class="col-md-8">
#(Html.Kendo().DatePickerFor(m => m.EndDate)
.HtmlAttributes(new { #Id = "dtpEndDate", style = "width:100%", required = "required", validationMessage = "Select End Date" })
.Events(e=>e.Change("endChange")))
</div>
</div>
Need help in building a function for my Project which will disable anybody from entering the date of birth less than 18 in the date of birth field.
A validation will work !! just need help in building a validation
htmlcode
<label>Date of Birth <span class="red-asterisk">*</span></label>
<input type="text" id="DOB" name="DateOfBirth" placeholder="  dd/mm/yyyy" data-bind="datePicker : Model.DateOfBirth, dateTimePickerOptions : {format: 'DD/MM/YYYY', maxDate: (new Date()).addDays(-6573), useCurrent : false}" />
js file code
self.Model.DateOfBirth = ko.observable().extend({
date: true,
required: {
params: true,
message: "Please enter a date"
}
});
where shall I change the code for validation or showing a validation age less than 18 years old not allowed to sign in?
You need to create knockout custom rule as follows
ko.validation.rules["DateValidation"] = {
validator: function (val) {
var ageDifMs = Date.now() - val.getTime();
var ageDate = new Date(ageDifMs); // miliseconds from epoch
var year = Math.abs(ageDate.getUTCFullYear() - 1970);
return (year < 18);
},
message: " "
};
ko.validation.registerExtenders();
then you can add to your extend
self.Model.DateOfBirth = ko.observable().extend({
date: true,
required: {
params: true,
message: "Please enter a date"
},
DateValidation: {
message: "Override message"
}
});
I'm developing a small app with CakePHP and I need to save a startdate and an enddate for an event. I went with the Bootstrap Daterangepicker to let users visually input the dates.
In my add.ctp view I have two fields:
<div class="form-group">
<?php echo $this->Form->input('start', array(
'class' => 'form-control',
'type' => 'text',
'id' => 'start',
'name' => 'start',
'data-mask')); ?>
</div><!-- .form-group -->
<div class="form-group">
<?php echo $this->Form->input('end', array(
'class' => 'form-control',
'type' => 'text',
'id' => 'end',
'name' => 'end',
'data-mask')); ?>
</div>
And the Javascript that controls the inputs:
<script type="text/javascript">
$(function() {
$('input[name="start"]').daterangepicker({
timePicker24Hour: true,
singleDatePicker: true,
timePicker: false,
timePickerIncrement: 30,
locale: {
format: 'YYYY-MM-DD HH:mm:ss'
}
});
$('input[name="end"]').daterangepicker({
timePicker24Hour: true,
singleDatePicker: true,
timePicker: false,
timePickerIncrement: 30,
locale: {
format: 'YYYY-MM-DD HH:mm:ss'
}
});
});
</script>
The picker works just fine, it updates the field values properly, but when I attempt to save the form, the start field gets written to the database as follows:
start 0000-00-00 00:00:00
end (null)
The form data for the start and end fields saves properly if I'm reverting to the default configuration of the fields.
Any clue as to where I'm failing would be highly appreciated.
try something like this
$correctdate = date("Y-m-d j:h:m",strtotime($yourdate));
It's not a great peace of code, but it should help to go further in the right direction.
We take this string and make a timestamp out of it. Then we change it to a proper datetime value.
Okay, so I was passing text to a datetime field and the save operation failed. In order to fix this I had to convert the strings to the proper type by processing it in the beforeSave() function of the model.
Here is the code that worked for me:
public function beforeSave($options = array()) {
if (!empty($this->data['Task']['start']) && !empty($this->data['Task']['end'])) {
$this->data['Task']['start'] = $this->dateFormatBeforeSave($this->data['Task']['start']);
$this->data['Task']['end'] = $this->dateFormatBeforeSave($this->data['Task']['end']);
}
return true;
}
public function dateFormatBeforeSave($dateString) {
return date('Y-m-d h:m:s', strtotime($dateString));
}
I'm using Typehead.js and it's working fine, but I have a special case that I'm not sure how to solve.
I'm using hint:true so when the user starts typing the search box gets updated with a hint. If the user presses enter at this point without selecting a match from the list I'm not getting any value in the input field, and I don't know where to get the value of the hint.
This is how I initialise Typehead.js
$('#search .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 2
},
{
name: 'tags',
displayKey: 'name',
source: substringMatcher()
});
And this is what I mean by hint. When the user writes ar he gets architecture.
But as you can see from the HTML I have no value on the inputs.
<input class="typeahead tt-hint" type="text" readonly="" autocomplete="off" spellcheck="false" tabindex="-1">
<input class="typeahead tt-input" type="text" placeholder="Search" autocomplete="off" spellcheck="false" dir="auto">
You add the values from the Javascript code not the html code.
You need to do something like this
var key_attributes = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('key'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
});
key_attributes.initialize();
$('.attr-row').last().find('.taginput-key').typeahead({
hint: true,
highlight: true,
minLength: 0
}, {
name: 'key',
display: 'key',
source: key_attributes.ttAdapter()
});