I have a datapicker and i use it two times.
I have to disable previous dates if first datapicker is initialized and give user to chose modified datapicker.
So, i have this code :
<script>
$(document).ready(function() {
$( ".datapick" ).datepicker(
{
minDate: 0,
dateFormat: 'dd-mm-yy',
});
});
</script>
<input type="text" name="start" class="datapick" placeholder="Starting date" class="datapick">
<input type="text" name="end" class="datapick" placeholder="End date" class="datapick">
I am using minDate to disable previous days, but i dont know if selected 24-12-2014, to disable all previous days.
I think you get me :))
Try this following. I hope it will work.
<script type="text/javascript">
jQuery(function() {
jQuery(".Start").datepicker({ dateFormat: 'mm-dd-yy', maxDate: 0 });
jQuery(".End").datepicker({ dateFormat: 'mm-dd-yy', minDate: 0 });
});
</script>
<input name="Start" class="Start" type="text" placeholder="Starting date">
<input name="End" class="End" type="text" placeholder="Ending date">
It may solve your problem :-)
Related
so following the documentation I created a Datepicker like
<div class="col-md-6" id="datepickercontainer">
<div x-data x-init="picker = new Pikaday({ field: $refs.datepicker,
format: 'DD MM YYYY',
disableWeekends: true,
bound: false,
container: document.getElementById('datepickercontainer'),
i18n: deutsch, }); $nextTick(() => picker.show())">
<input type="text" x-ref="datepicker" />
</div>
</div>
It works fine but when I add wire:model.lazy="date" to write the selected date to my Livewire Components public property, pickaday closes and does not open again when clicking the input...
I used this datepicker and it works fine, but I can't find how to display the contents of this datepicker in a <div> without the pop.
My code:
<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
<input class="form-control" type="text" readonly />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<script type="text/javascript">
jQuery(function () {
jQuery("#datepicker").datepicker({
startDate: new Date(),
minDate: 0,
language: "fr",
autoOpen: true,
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
});
</script>
EDIT:
I can't get the value date from the input
<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy"></div>
<input type="hidden" id="my_hidden_input" class="form-control">
<script type="text/javascript">
jQuery('#datepicker').datepicker();
jQuery('#datepicker').on('changeDate', function() {
jQuery('#my_hidden_input').val( jQuery('#datepicker').datepicker('getFormattedDate'));
});
jQuery(document).ready(function () {
jQuery("#datepicker").datepicker({
startDate: new Date(),
language: "fr",
autoOpen: true,
autoclose: true,
todayHighlight: true
//datesDisabled: ['22/02/2017', '28/02/2017']
}).datepicker('update', new Date());;
});
jQuery("input[type=hidden]").bind('change', function() {
alert(jQuery(this).val());
});
</script>
As the docs say:
Instantiating the datepicker on a simple div will give an embedded picker that is always visible.
Here a working sample:
jQuery(function () {
jQuery("#datepicker").datepicker({
startDate: new Date(),
minDate: 0,
language: "fr",
autoOpen:true,
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
jQuery('#datepicker').on('changeDate', function(e) {
jQuery('#my_hidden_input').val(e.date);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.fr.min.js"></script>
<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
</div>
<input type="hidden" id="my_hidden_input" class="form-control">
EDIT:
You are adding the the changeDate listner in the wrong place, put it after datepicker initialization. Moreover changeDate event has the date property that contains Date object representing the selected date.
I'd like to update the class of a div according to the user input. A simple input text that need to be validated.
I have to go with a helper but I can't figure it out.
<div class="{{validationClass}}">
<p>{{input type="text" id="titleInput" value=title placeholder="Title"}}</p>
</div>
When there's nothing written in the text field I'd like to surround the box with the red colour, after the used typed a single character I want it to go default.
So, according to bootstrap 2.x I'd need to set the div class to control-group error or control-group success etc.
I've never created a helper so I'm struggling, I don't know how to call it and how to return the desired string to be replaced in {{validationClass}}
Thanks.
You can use the bind-attr helper .
This is a sample:
<script type="text/x-handlebars" data-template-name="index">
<div {{bind-attr class=":control-group validationClass"}}>
<p>{{input type="text" id="titleInput" value=title placeholder="Title"}}</p>
</div>
</script>
App.IndexController = Ember.ObjectController.extend({
title: null,
validationClass: function() {
var title = this.get('title');
return title ? 'success' : 'error';
}.property('title')
});
http://jsfiddle.net/marciojunior/6Kgty/
Use {{bind-attr}} helper
{{!hbs}}
<div {{bind-attr class=":control-group isError:error"}}>
{{input type="text" class="form-control" value=testVal}}
</div>
//Controller
App.ApplicationController = Em.Controller.extend({
testVal: '',
isError: Em.computed.empty('testVal')
});
Sameple Demo
I am using a Jquery ui datepicker as follows:
<input type="text" name="StartDate" id="StartDate" class="date-picker" />
<input type="text" name="FinishDate" id="FinishDate" class="date-picker" />
in my JS
$(".date-picker").datepicker({
onSelect: function (date) {
alert("selected!");
}
});
Is there a way to detect when the user left the datepicker empty similar to the way selection is detected as above?
Sure, you're looking for the onClose callback: jsFiddle
$("input").datepicker({
onClose: function(dateText){
if( !dateText ){
alert('empty!');
}
}
});
The application is written using ASP.NET MVC 3 in vs2010.
I have a knockout template that updates some css and visible bindings using a
dependantObservable.
The issue ONLY occurs when I bind the
value of the select element to the
IntervalID. If this is not bound the
UI is updated as expected.
I have ripped the code out from my main app and created a sample page that does the same binding using standard markup and also templates.
The dependantObservable is called HasChanged.
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-1.2.0.js" type="text/javascript"></script>
<div data-bind="template: { name: 'intervalTemplate', for:viewModel }">
</div>
<h2>
Not Template</h2>
<div data-bind="style: { color: HasChanged() ? 'red' : 'black' }">
IntervalID: <span data-bind="text: IntervalID"></span>
<br />
Start:
<input type="text" data-bind="value: Start">
<br />
End:
<input type="text" data-bind="value: End">
<br />
Interval Type:
<select data-bind="value: IntervalTypeID">
<option value="1">Shift</option>
<option value="2">Break (Paid)</option>
<option value="3">Break (Unpaid)</option>
</select><br />
HasChanged: <span data-bind="text: HasChanged"></span>
</div>
<script id="intervalTemplate" type="text/html">
<div data-bind="style: { color: HasChanged() ? 'red' : 'black' }">
<h2>Template</h2>
IntervalID: <span data-bind="text: IntervalID"></span>
<br />
Start:
<input type="text" data-bind="value: Start">
<br />
End:
<input type="text" data-bind="value: End">
<br />
Interval Type:
<select data-bind="value: IntervalTypeID">
<option value="1">Shift</option>
<option value="2">Break (Paid)</option>
<option value="3">Break (Unpaid)</option>
</select><br />
HasChanged: <span data-bind="text: HasChanged"></span>
</div>
</script>
<script type="text/javascript">
function IntervalModel(data) {
var _this = this;
_this.IntervalID = ko.observable(data.IntervalID);
_this.Start = ko.observable(data.Start);
_this.End = ko.observable(data.End);
_this.IntervalTypeID = ko.observable(data.IntervalTypeID);
_this.OriginalStart = ko.observable(data.Start);
_this.OriginalEnd = ko.observable(data.End);
_this.OriginalIntervalTypeID = ko.observable(data.IntervalTypeID);
_this.HasChanged = ko.dependentObservable(function () {
return !(_this.OriginalStart() == _this.Start() &
_this.OriginalEnd() == _this.End() &
_this.OriginalIntervalTypeID() == _this.IntervalTypeID());
});
}
var viewModel;
$(function () {
var viewModel = {};
viewModel = new IntervalModel({ IntervalID: 1, Start: "09:00", End: "10:00", IntervalTypeID: 2 });
ko.applyBindings(viewModel);
});
</script>
Any help would be much appreciated... I need to use templates as i have lots of these intervals that need to be displayed.
Thanks!
There is an issue logged on github for this one here: https://github.com/SteveSanderson/knockout/issues/133
The issue centers around using numbers for the value of a select option. When a select element uses the value binding, it is updated with the actual value of the element, which is always a string. So, if your observable is 2, it gets set to "2" when the binding is set up. This change seems to cause an issue with any bindings that use that observable that were set up in the template prior to the select element.
So, until this is potentially fixed, you can make it work by passing IntervalTypeID as a string ("2"). An easy way to convert a number to string is to do yourvalue + ''.
Here it is working:
http://jsfiddle.net/rniemeyer/uDSFa/