How to set an initial value to daterangepicker? - javascript

I have a DateRangePicker as follows:
HTTP:
<input id="date" name="date" ng-model="FilesDate" class="form-control"/>
JQuery:
$('input[name="date"]').daterangepicker({
opens: 'left'
});
The DateRangePicker works totally fine but when the program initializes, its empty by default. If I remove ng-model, the date initializes properly.

Just set the value of your input:
<input value="01/01/2018 - 01/15/2018" id="date" name="date" ng-model="FilesDate" class="form-control" />
http://www.daterangepicker.com/#examples

$('input[name="date"]').attr('value', '01/01/2018 - 01/15/2018');

Related

How to change the directive of an input text with angular 1.6?

Currently I have two directives in the app.js, which are for following onkeypress validation, one directive is to validate only numerics and the other directive validate only letters [A-Z].
<input type="text" id="txt_siaf" class="form-control" ng-model="siaf" maxlength="10" valid-numeric />
Given that my input text currently assigns a valid-numeric directive, I need to know how to change it by the valid-letters directive.
I would appreciate your support.
**You change the value of variable $scope.showNumericDirective dynamically.**
Add in template
<input type="text" ng-if="showNumericDirective" id="txt_siaf" class="form-control" ng-model="siaf" valid-numeric />
<input type="text" ng-if="!showNumericDirective" id="txt_siaf" class="form-control" ng-model="siaf" valid-letters />
var myapp = angular.module("myapp", []);
myapp.controller('controllerName', function($scope)
{
$scope.showNumericDirective = true;
});
myapp.directive('validNumeric', function() {
});
myapp.directive('validLetters', function() {
});
Well i don't think so that you can add or remove directive dynamically from input but you can play with other work around like:
in controller:
$scope.validNumericDirective = true;
and in template:
<input type="text" id="txt_siaf" ng-if="validNumericDirective" class="form-control" ng-model="siaf" maxlength="10" valid-numeric />
<input type="text" id="txt_siaf" ng-if="!validNumericDirective" class="form-control" ng-model="siaf" maxlength="10" valid-letters />
this logic will do the trick but you have to toggle validNumericDirective in your controller on any event.
Update:
There is a way where you can add or remove directive dynamically but it has a lengthy process see:
Angularjs dynamically adding and removing elements using directive
https://www.codeproject.com/Tips/1038684/AngularJs-Add-Remove-Directives-Dynamically-Save-D

Want to disable future date in 'from' date field only in daterangepicker

In the given fiddle here
There are two date inputs 'from' and 'to'
In which I want to disable future date in 'From' only but when i apply endDate code in applies to both 'from' and 'to' date.
I want to apply 'endDate' that is I want to disable future date in 'from' field only and not in 'to' date field.
I picked this datepicker from thiss site
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon">from</span>
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
$('.input-daterange').datepicker({
autoclose: true,
endDate: '+0d'
});
For any query please comment below
Since you're using the date range functionality and you can't initialize the date pickers separately, you can utilize the built-in setEndDate method to set the endDate property of a specific input element.
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');
In your case, you would initialize the date range picker on both input fields (like you were already doing) and then target the specific input element by its attribute and use the setEndDate method:
Updated Example
$('.input-daterange').datepicker({
autoclose: true
});
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');
Full Snippet:
$('.input-daterange').datepicker({
autoclose: true
});
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon">from</span>
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
Assign an id to each input field:
Then instead of $('.input-daterange') use $('#startdate') and $('#enddate') and only include endDate: '+0d' where you need it.
You can use the input name attribute as a selector, and set the attributes for each instance of the datepicker.
// HTML
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon">from</span>
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
// JS
$('input[name=start]').datepicker({
autoclose: true,
endDate: '+0d'
});
$('input[name=end]').datepicker({
autoclose: true
});
Try this:
$(".datepicker").datepicker({maxDate: '0'});

how to get value from hidden input with jquery?

i have a any hidden input element. i want get value from a element. but tis code $('#chin').val() return ''. hidden element for keep default value from the cotroller.
my code is:
<input placeholder="تاریخ ورود" class="datepicker" name="from" id="from" value="#Model.FromDate" />
<input ng-model="searchFilters.CheckInDate" name="chin" id="chin" hidden value="#Model.CheckInDate" />
and html is:
<input ng-model="searchFilters.CheckInDate" name="chin" id="chin" hidden="" value="2016/12/21" class="ng-pristine ng-untouched ng-valid ng-empty">
the input has value.
how to get value from this?
You should be using Angular to retrieve that value. It will be in the model (#Model.CheckInDate).
delete hidden input and Instead it use this code:
<input placeholder="تاریخ ورود" class="datepicker" name="from" id="from" value="#Model.FromDate" data-gdate="#Model.CheckInDate" />
add data-gdate="#Model.CheckInDate" into end code.

datepicker min date change dynamically in angular js

I have a min date taken dynamically. I get the value from my controller as 'setmax'.
I need to give this value to my datepicker mindate.
I ahev tried this by setting
$scope.minDate = $scope.setmax;
inside my controller. But it is not taking this value.
Is it possible to give like this
<input type="text" class="form-control"
datepicker-popup="dd/MM/yyyy"
ng-model="myModel.vdate"
placeholder="Amount valid date"
is-open="startOpened"
ng-init="startOpened = false"
min-date="{{secmax}}"
max-date="end"
required
close-text="Close"
ng-click="startOpen($event)"
name="datevalidity"/>
Did you try this?
<input type="text" class="form-control"
datepicker-popup="dd/MM/yyyy"
ng-model="myModel.vdate"
placeholder="Amount valid date"
is-open="startOpened"
ng-init="startOpened = false"
min-date="setmax"
max-date="end"
required
close-text="Close"
ng-click="startOpen($event)"
name="datevalidity"/>

How to disable the already selected date for next date box in J.T.Sage DateBox

I my application i use jt.sage DateBox. I want to disable the already selected datepicker for next date box fields for example my Date1 is like 13.08.14 my other date box fields need to select after 13.08.14 (NOTE : depends on previous date fields).
Here is the FIDDLE FOR date box demo.
It has lot of options like prevent tomorrow and yesterday day but not include after select the current date
<label for="mydate">Date 1</label>
<input id="date1" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}' onclick="filterDate(this.id);"/>
<label for="mydate">Date 2</label>
<input id="date2" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}' onclick="filterDate(this.id);"/>
<label for="mydate">Date 3</label>
<input id="date3" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}' onclick="filterDate(this.id);"/>
<label for="mydate">Date 4</label>
<input id="date4" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}' onclick="filterDate(this.id);"/>
<label for="mydate">Date 5</label>
<input id="date5" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}' onclick="filterDate(this.id);"/>
How to do this please help to solve this one.
Hope this helps you : http://jsfiddle.net/QTuma/52/
Just change in the logic for difference calculation:
Start Date
// Get the difference
var diff = parseInt((((startDate.getTime() - todaysDate.getTime()) / lengthOfDay)+2)*-1,10);
And End Date
// Get the difference
var diff = parseInt((((endDate.getTime() - todaysDate.getTime()) / lengthOfDay)),10);
This will work for the statement 'example my start date is like 13.08.14 my end date box fields need to select after 13.08.14 .'
I have updated your code based on below reference,
http://jsfiddle.net/ktbcP/528/
This should solve your issue,
http://dev.jtsage.com/jQM-DateBox/doc/6-2-link/
Hope it helps !!

Categories

Resources